JavaScript children和childNodes有什么区别
DOM childNodes属性 : childNodes属性是JavaScript中Node的属性,用于返回一个包含子节点的NodeList。NodeList中的项是对象,而不是字符串,可以通过索引号访问。第一个子节点的索引号为 0 。
语法
element.childNodes
DOM children Property : children 是一个元素的属性,返回该元素的子元素作为对象。
语法
element.children
children属性和childNodes属性的主要区别在于children属性作用于元素,childNodes属性作用于节点,包括文本节点和注释节点等非元素节点。
示例1: 此示例演示了childNodes属性的特性。
<h1 style="color:green">GeeksforGeeks</h1>
<h2>childNodes</h2>
<button onclick="childNode()">
Try it
</button>
<p id="geek"></p>
<script>
function childNode() {
//accessing all the child nodes present in our code
var childNode =
document.body.childNodes;
var string = "";
var i;
for (i = 0; i < childNode.length; i++) {
string = string + childNode[i].nodeName + "<br>";
}
//appending the child nodes to paragraph with id "geek"
document.getElementById(
"geek").innerHTML = string;
}
</script>
输出:
示例2: 此示例演示了子元素的属性。
<h1 style="color:green">GeeksforGeeks</h1>
<h2>children</h2>
<button onclick="myChildren()">
Try it
</button>
<p id="geek"></p>
<script>
function myChildren() {
var c = document.body.children;
var string = "";
var i;
for (i = 0; i < c.length; i++) {
string = string + c[i].tagName + "<br>";
}
document.getElementById(
"geek").innerHTML = string;
}
</script>
输出: