recherche

Maison >interface Web >js tutoriel >Différences entre les childNodes et les enfants lorsque JavaScript exploite les compétences DOM elements_javascript

Différences entre les childNodes et les enfants lorsque JavaScript exploite les compétences DOM elements_javascript

WBOY
WBOYoriginal
2016-05-16 16:06:381254parcourir

Pour les éléments DOM, children fait référence aux sous-objets du type DOM Object, à l'exclusion des objets TextNode qui existent de manière invisible entre les balises, et childNodes inclut les objets TextNode qui existent de manière invisible entre les balises.

Regardez spécifiquement les tests pour les enfants et les childNodes dans l'environnement Chrome : 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 <div id="div1" class="div">
 <span id="s1" class="sp" lang="zh-cn">
 </span>
 </div>
</body>
<script type="text/javascript">
 
 function test() {
 var o = document.getElementById("div1");
 var child = o.children;
 console.log("div1.children运行结果:");
 for(i = 0; i < child.length; i++){
   console.log(child[i].tagName);
  }
 
 console.log("");
 child = o.childNodes;
 console.log("div1.childNodes运行结果:");
 for(i = 0; i < child.length; i++){
   console.log(child[i].tagName);
  }
 
 }
 
 test();

</script>
</html>


Les résultats des tests sont les suivants : 

 div1.children运行结果:
 SPAN

 div1.childNodes运行结果:
 undefined
 SPAN
 undefined

Il y a deux nœuds non définis dans le résultat de la collection childNodes ci-dessus, et ces deux-là sont TextNode avec nodeType=3.

Si le code HTML est écrit dans le style suivant, il n'y aura aucune différence dans les résultats des enfants et des childNodes. 

<body>
 <div id="div1" class="div"><span id="s1" class="sp" lang="zh-cn"></span></div>
</body>

Aucune autre différence n'a été trouvée dans la mesure réelle des éléments HTML tels que le document, l'en-tête, le corps et le div

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Méthode JS pour définir les attributs vspace et hspace des compétences images_javascript de la page WebArticle suivant：Méthode JS pour définir les attributs vspace et hspace des compétences images_javascript de la page Web

Articles Liés

Voir plus