DOM基础——节点操作:子节点

父节点、子节点

节点类型：元素节点、属性节点、文本节点、注释节点、document节点

nodeType属性：查看节点类型

返回值：1-->元素节点

2-->属性节点

3-->文本节点

8-->注释节点

9-->document节点

nodeName属性：查看节点名称

nodeValue属性：查看节点的值

childNodes（标准属性）：子节点

在ie9（包括ie9）以上及标准浏览器，会把标签的换行作为空白文本节点。

children（非标准属性）：子节点 无兼容性问题

实例1：布局符合标签嵌套规则

<ul id="ul1">

    <li>

      <ul>

        <li></li>

        <li></li>

      </ul>

    </li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

  </ul>

<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">

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <p>ajdljaljfdj</p>

  </ul>

<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>