.firstChild / .firstElementChild ——元素第一个子节点 / 标准浏览器下元素的第一个元素类型子节点

一、.firstChild——元素第一个子节点

写法：元素.firstChild

描述：标准浏览器下firstChild会包含文本类型的节点。非标准浏览器（IE9以下）下只包含元素节点

读写性：只读属性

浏览器兼容性：标准浏览器，非标准浏览器（IE9以下）都有

实例

1、在标准或非标准浏览器下都设置第一个元素节点的背景色

方法1：（有问题）

if ( oUl.firstElementChild ) {  //如果标准浏览器下则存在firstElementChild 属性，不准确，可能不存在子节点
    oUl.firstElementChild.style.background = 'red';
} else {
    oUl.firstChild.style.background = 'red';  //如果不存在则说明不是标准浏览器，执行else里的语句
}

var oFirst = oUl.firstElementChild || oUl.firstChild;
oFirst.style.background = 'red'; //如果不存在子节点会有兼容性问题

方法2：

if ( oUl.children[0] ) {    //如果元素的第一个元素子节点存在，则执行
    oUl.children[0].style.background = 'red';
} else {
    alert( '没有子节点可以设置' );
}

 

二、.firstElementChild——标准浏览器下元素的第一个元素类型子节点

写法：元素.firstElementChild

描述： 在标准浏览器下获取第一个元素类型的子节点

读写性：只读属性

浏览器兼容性：标准浏览器才有的属性