您的位置：首页 > Web前端 > Node.js

js中firstChild和childNodes[0]以及children[0]之间的点滴问题

2017-03-11 16:41 519 查看
示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js中firstChild和childNodes[0]以及children[0]之间的点滴问题</title>
</head>
<body>
<div id="div1">
<p>
pppppppppppppppp
</p>
</div>
<script type="text/javascript">
window.onload = function() {
if (!document.getElementById("div1")) return false;
var div1 = document.getElementById("div1");
console.log(div1.firstChild);
console.log(div1.firstChild.nodeType);

console.log(div1.childNodes[0]);
console.log(div1.childNodes[0].nodeType);

console.log(div1.children[0]);
console.log(div1.children[0].nodeType);

console.log(document.getElementsByTagName("p")[0].firstChild.nodeValue);
};
</script>
</body>
</html>


运行结果入下：



分析：

从上面的代码以及运行结果可以看出，当使用上述三种方法去获取div1的第一个子元素（节点）的时候，本希望可以直接得到p元素，可是呢，三者的却出现了不一样的运行结果，firstChild和childNodes[0]的运行结果一样，都是将一个文本节点当做了div1的第一个子节点，这显然不是希望得到的结果，可是，这个文本节点是哪儿来的呢？原来，这两种方法都会将换行当做一个节点，即上面出现的文本节点。（从后面用firstChild打印p元素的节点值也可以看出，里面是包含了前后换行的）

而我们的children[0]的方法却显示出了“希望”的结果，是在与它的认知方式与前两个不一样，它只认识文档里面的HTML节点，而不会把换行也当做一个节点进行处理，即是说它是不认识文本节点的，所以，就可以得到元素节点p了。

分析过后，下面更改部分代码看看效果：

将

<div id="div1">
<p>
pppppppppppppppp
</p>
</div>改为
<div id="div1"><p>pppppppppppppppp</p></div>

并将

console.log(document.getElementsByTagName("p")[0].firstChild.nodeValue);
改为

console.log(document.getElementsByTagName("p")[0].firstChild);
console.log(document.getElementsByTagName("p")[0].childNodes[0]);
console.log(document.getElementsByTagName("p")[0].children[0]);

再次运行可得如下结果：



由上可以看出，当把div里面的换行都去除之后，三种方式都可以得到“一致”（姑且认为一致）的运行结果，即都将p元素作为它们的第一节点。从后面的三行打印结果可以证实children是真不认识文本节点的。不过，需要注意的是，firstChild和childNodes才是标准的，而遗憾的是children不是标准的。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript firstChild childNodes children
相关文章推荐
新的分享
章节导航