DOM 要素の場合、子とは、タグ間に見えないように存在する TextNode オブジェクトを除く、DOM オブジェクト タイプのサブオブジェクトを指します。また、childNodes には、タグ間に見えないように存在する TextNode オブジェクトが含まれます。
Chrome 環境の子と childNodes のテストを具体的に見てみましょう:
<!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>
テスト結果は次のとおりです:
div1.children运行结果: SPAN div1.childNodes运行结果: undefined SPAN undefined
上記の childNodes コレクションの結果には 2 つの未定義のノードがあり、これら 2 つは、nodeType=3 の TextNode です。
HTMLコードを以下の形式で記述した場合、childrenとchildNodesの結果に違いはありません。
<body> <div id="div1" class="div"><span id="s1" class="sp" lang="zh-cn"></span></div> </body>
document、head、body、div などの HTML 要素の実測では、他に差異は見つかりませんでした
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
