Node.firstChild
只读属性返回树中节点的第一个子节点,如果节点是无子节点,则返回 null
<div>
<img src="">
</div>
var img = document.body.children[0].firstChild;
console.log(img);
在我们平时想获取父元素的第一个子元素的节点时候,通常使用 firstChild
这段代码的作用是,获取到 div
标签下 img
节点,但是发现控制台输出的是 #text
,因为在 img
标签之前,有一个换行符和多个空格充当了一个文本节点,在Gecko(浏览器排版引擎)中,任意多个的空白符都将导致文本节点的插入,包括一个到多个空格符,换行符,制表符等等。
所以解决办法就是,将 img
标签前面的空格全部删除,或者使用 firstElementChild
firstChild要注意的地方,如果 html 是<div><!-- a --><img src=""></div>
控制台将会输出 <!--a-->
。也就是 firstChild 包含注释节点
详情请参见 DOM 中的空白符 和W3C DOM 3 FAQ: 为什么一些文本节点是空的.
Element.firstElementChild
ParentNode.firstElementChild
只读属性,返回对象的第一个子 元素, 如果没有子元素,则为null。
可以通过使用 firstElementChild
获取到 img
节点。
<div>abcabc
<img src="">
</div>
var img = document.body.children[0].firstElementChild;
console.log(img);
将 img
标签 添加任意文本,回车符等等,也不影响我获取到 img
节点。
但是firstElementChild
不兼容 IE 6,7,8
ParentNode.children
返回 一个Node的子elements
可以通过使用 firstElementChild
获取到 img
节点。
<div>abcabc
<img src="">
</div>
var img = document.body.children[0].children[0];
console.log(img)
需要注意的是,IE 6,7,8支持改属性,但是可能会错误地包含注释 Comment
节点。