Child&ElementChild
关于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
第一个子节点 的 后一个兄弟节点:
[object]
222
最后一个子节点 的 前一个兄弟节点:
[object]
333
4
选定的子元素节点类型:
1
第一个子节点:
[object]
111
最后一个子节点:
[object]
444
555
第一个子节点 的 后一个兄弟节点:
[object]
222
最后一个子节点 的 前一个兄弟节点:
[object]
333
兼容方法，通过判断选择使用的属性(必须使用..ElementChild判断)
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>
