父节点、子节点
节点类型:元素节点、属性节点、
文本节点、
注释节点、document节点
nodeType属性:查看节点类型
返回值:1-->元素节点
2-->属性节点
3-->文本节点
8-->注释节点
9-->document节点
nodeName属性:查看节点名称
nodeValue属性:查看节点的值
childNodes(标准属性):子节点
在ie9(包括ie9)以上及标准浏览器,会把标签的换行作为空白文本节点。
children(非标准属性):子节点 无兼容性问题
实例1:布局符合标签嵌套规则
<ul id="ul1">
<script>
var oUl = document.getElementByIdx_x('ul1');
var aLi = oUl.children; //非标准属性
alert( aLi.length ); // ie6/7/8 --> 5; 标准--> 5
alert( aLi[0].nodeType ); // ie6/7/8 --> 1; 标准--> 1
alert( oUl.nodeName ); // ul
alert( oUl.nodeValue ); // null
alert( oUl.nodeType ); // 1
for(var i=0; i<aLi.length; i++){
if(aLi[i].nodeType === 1){ //判断是不是元素节点
aLi[i].style.background = 'red';
}
}
</script>
实例2:布局不符合标签嵌套规则
<ul id="ul1">
<script>
var oUl = document.getElementByIdx_x('ul1');
var aLi = oUl.childNodes; //标准属性
alert( aLi.length ); // ie6/7/8 --> 5
(未算标签<p>)
;
标准--> 13(算标签<p>)
alert( aLi[0].nodeType ); // ie6/7/8 --> 1; 标准--> 3
var aLi = oUl.children; //非标准属性
alert( aLi.length ); // ie6/7/8 --> 5
(
未
算标签<p>)
; 标准--> 6
(算标签<p>)
alert( aLi[0].nodeType ); // ie6/7/8 --> 1; 标准--> 1
alert( oUl.nodeName ); // ul
alert( oUl.nodeValue ); // null
alert( oUl.nodeType ); // 1
for(var i=0; i<aLi.length; i++){
if(aLi[i].nodeType === 1){ //判断是不是元素节点
aLi[i].style.background = 'red';
}
}
</script>