关于firstChild&firstElementChild及其同类属性使用，同时分析不同浏览器下child的包含的节点差异
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function (){
/*本例中所有属性均为只读属性*/
var oBox = document.getElementById('box');
var oText = document.getElementById('text'); oText.innerHTML += '子元素节点统计:<br/>'+oBox.childNodes.length+'<br/><br/>';
alert(oBox.childNodes.length);
/*标准：包含文本和元素节点，*同时'包含'非法嵌套节点，如p标签，此处显示 11，共计11个节点*/
/*非标准：只包含元素节点，*同时'包含'非法嵌套节点，且视为独立节点，在下文的'lastChild.previousSibling'会体现*/
/*IE7以下'不包含'非法节点，如p标签，将非法节点与它前面的合法节点捆绑，视为一个节点，在下文的lastChild中会体现*/ oText.innerHTML += '选定的子元素节点类型:<br/>'+oBox.childNodes[0].nodeType+'<br/><br/>';
alert(oBox.childNodes[0].nodeType);/*获取读取到的元素的节点类型*/
/*
* 常用的三种节点类型
* 元素节点：1
* 属性节点：2
* 文本节点：3
*/
oText.innerHTML += '第一个子节点:<br/>'+oBox.firstChild+'<br/>'+oBox.firstChild.innerHTML+'<br/><br/>';
alert(oBox.firstChild);
/*IE7以下 显示 object*/
/*标准浏览器 显示 object Text*/
alert(oBox.firstChild.innerHTML);
/*IE7以下 显示 111*/
/*标准浏览器 显示 undefined*//*因为是文本节点*/ oText.innerHTML += '最后一个子节点:<br/>'+oBox.lastChild+'<br/>'+oBox.lastChild.innerHTML+'<br/><br/>';
alert(oBox.lastChild);
/*IE7以下 显示 object*/
/*标准浏览器 显示 object Text*/
alert(oBox.lastChild.innerHTML);
/*IE7以下 显示
* 444
* <p>555</p>
*/
/*标准浏览器 显示 undefined*//*同样是文本节点*/ oText.innerHTML += '第一个子节点 的 后一个兄弟节点:<br/>'+oBox.firstChild.nextSibling+'<br/>'+oBox.firstChild.nextSibling.innerHTML+'<br/><br/>';
/*元素的第一个子节点的后一个兄弟节点*/
alert(oBox.firstChild.nextSibling);
/*IE7&8以下 显示 object*/
/*标准浏览器 显示 object HTMLLiElement*/
alert(oBox.firstChild.nextSibling.innerHTML);
/*IE7&8以下 显示 222*/
/*标准浏览器 显示 111*/ oText.innerHTML += '最后一个子节点 的 前一个兄弟节点:<br/>'+oBox.lastChild.previousSibling+'<br/>'+oBox.lastChild.previousSibling.innerHTML+'<br/><br/>';
/*元素的最后一个子节点的前一个兄弟节点*/
alert(oBox.lastChild.previousSibling);
/*IE7以下 显示 object*/
/*IE8 显示 object HTMLLiElement*/
/*标准浏览器 显示 object HTMLParagraphElement*/
alert(oBox.lastChild.previousSibling.innerHTML);
/*IE7以下 显示 333*/
/*IE8 显示 444*/
/*标准浏览器 显示 555*//*此处分析，标准浏览器同样将非法节点视为独立节点*/
/*此处可以看出，对于child
* IE7以下 不包含文本节点，并且相较于IE8，将非法节点与其前面的合法节点捆绑，视为一个节点
* IE8下 不包含文本节点，相较于IE7以下，包含非法节点，并且视非法节点为独立的节点
* 标准浏览器下包含所有节点，如文本及元素等
* */
};
</script>
</head>
<body>
<ul id="box">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<p>555</p>
</ul>
<div id="text"></div>
</body>
标准浏览器显示：
子元素节点统计:
11
选定的子元素节点类型:
3
第一个子节点:
[object Text]
undefined
最后一个子节点:
[object Text]
undefined
第一个子节点 的 后一个兄弟节点:
[object HTMLLIElement]
111
最后一个子节点 的 前一个兄弟节点:
[object HTMLParagraphElement]
555
////////////////////////////////////////////////////////////////
IE8显示：
子元素节点统计:
5
选定的子元素节点类型:
1
第一个子节点:
[object
HTMLLIElement]
111
最后一个子节点:
[object
HTMLParagraphElement]
555
第一个子节点 的 后一个兄弟节点:
[object
HTMLLIElement]
222
最后一个子节点 的 前一个兄弟节点:
[object
HTMLLIElement]
444
//////////////////////////////////////////////////////////////////
IE7以下显示
4
选定的子元素节点类型:
1
第一个子节点:
[object]
111
最后一个子节点:
[object]
444
555
第一个子节点 的 后一个兄弟节点:
[object]
222
最后一个子节点 的
前一个兄弟节点:
[object]
333
function zcyFirstChild(){
/*标准浏览器下，ElementChild为真，返回此属性，非标准下为假，返回Child*/
var oFirst = oBox.firstElementChild||oBox.firstChild;
return oFirst;
};
alert(zcyFirstChild().innerHTML);
此方法正常情况可以解决兼容问题，但是如果元素中没有子元素时浏览器会报错
此时可以使用 children 进行子元素获取，此属性只获取元素类节点，不包含文本节点等，但是非法嵌套的差异依旧存在
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function (){
/*本例中所有属性均为只读属性*/
var oBox = document.getElementById('box');
var oText = document.getElementById('text'); if( oBox.children[0] ){
oBox.children[0].style.background = 'red';
}else{
alert(1);
}
};
</script>
</head>
<body>
<ul id="box">
</ul>
<div id="text"></div>
</body>