11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour!

J'ai un petit script qui passe au travers de différentes nodes.


<ul id="cool">
	<li>1</li>
	<ul>
		<li>dsdsd</li>
	</ul>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>



<script>
window.onload = function() {
	var cool = document.getElementById("cool");
	for(var i = 0; i < cool.childNodes.length; i++) {
		alert(cool.childNodes[i].tagName);
	}
}
</script>


Ça marche dans IE8, IE9, FF, Chrome.... mais pas dans IE7.

Pour une raison quelconque, IE7 ne voit pas le UL imbriqué dans un UL. il ne voit que les LI.

Y a-t-il une explication? Un workaround?

Merci! Smiley smile [/i]
Modifié par DarkMalow (04 Mar 2011 - 17:55)
Est-ce que quelqu'un sait si l'émulation de IE7 avec IE9 fonctionne bien? C'est ce que j'utilise actuellement pour tester IE7, mais si ça ne fait pas ça dans la vraie version de IE7, je vais arrêter de chercher...

J'ai tenté une solution alternative:


function getChildren(p) {
	var oTmp = p.getElementsByTagName("*");
	var oChildren = [];
	for(var i = 0; i < oTmp.length; i++) {
		if(oTmp[i].parentNode == p) {
			oChildren.push(oTmp[i]);
		}
	}
	return oChildren;
}


Eh bien dans IE7, ça donne le même résultat que lorsque j'utilise childNodes...[/i][/i]
Semblant d'explication que je crois avoir trouvé...

Dans une liste comme celle-ci :


<ul>
  <li>1</li>
  <ul>
    <li>1.1</li>
  </ul>
  <li>2</li>
</ul>


IE7 semble plutôt comprendre


<ul>
  <li>1
    <ul>
      <li>1.1</li>
    </ul>
  </li>
  <li>2</li>
</ul>


Ce qui fait que le parent du UL imbriqué est LI au lieu du UL. J'ai donc corrigé ma fonction getChildren...


function getChildren(p) {
	var oTmp = p.getElementsByTagName("*");
	var oChildren = [];
	for(var i = 0; i < oTmp.length; i++) {
		if(oTmp[i].parentNode == p || oTmp[i].tagName.toLowerCase() == "ul" && p.tagName.toLowerCase() == "ul") {
			oChildren.push(oTmp[i]);
		}
	}
	return oChildren;
}


Voilà...[/i][/i][/i]