JavaScript 的 firChile、firstElementChild与children

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 节点。