ParentNodes、childNodes、children之间的区别

"parentNode"

常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点    

例:
<div id="parent">
<b id="child">My text</b>
</div>

在上面的代码中, 你看到把"爹"作为一个 div 容器, 该容器中有个"孩子", 就是粗体的文字部分. 如果你打算用getElementById() 方法获取粗体元素并且想知道它"爹"是谁, 返回的信息将是一个 div. 演示下面的脚本, 你就知道是怎么回事啦 ... 

 

“children”

有些时候你发现调用childNodes属于没有获得你期望的值。比如：

html：

<a href="javascript:void(0);" onclick="selectCategory('1,this);">
                            <span>apple</span>
</a>

JS：

function selectCategory(val,obj){  
    var text = obj.children[0].innerHTML;

}

我们希望获得的text属性值为“apple”，但实际上的值是undefined，也就是说获取失败。

原因：

childNodes属性返回值包含了元素节点和文本节点，此例中obj.children[0]返回的实际是空格。

解决方案：

1）去掉<span>和<a>之间的空格。

2）改用 obj.children[0].innerHTML。children属性只返回元素节点。

 

"childNodes"

，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本。

 

 

 

 

 

 

例子：

function setCount(count) {
var counts = count.split(",");
for (var i = 0; i < counts.length; i++) {
var j = i + 1;
document.getElementById('Text' + j).innerText = counts[i];
}
}
function setTable() {
var table = document.getElementById("bodyTb");
var n = 1
for (var i = 2; i <= 7; i++) {
var row = table.rows(i);
if (i == 3) {
for (var j = 2; j <= 14; j++) {
row.insertCell(j).innerHTML = " <span style='width:100%' id='Text" + n + "' ondblclick='EXCDWE(this)'></span>";
n++;
}
}
else {
for (var j = 1; j <= 13; j++) {
row.insertCell(j).innerHTML = " <span style='width:100%' id='Text" + n + "' ondblclick='EXCDWE(this)'></span>";
n++;
}
}
}
}