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