javascript——DOM之childNodes、nodeType、children、parentNode

元素.childNodes : 只读 属性 子节点列表集合

标准下：包含了文本和元素类型的节点，也会包含非法嵌套的子节点
非标准下：只包含元素类型的节点，ie7以下不会包含非法嵌套子节点

childNodes只包含一级子节点，不包含后辈孙级以下的节点

元素.nodeType : 只读 属性 当前元素的节点类型

DOM节点的类型有很多种 12种
元素节点 : 1
属性节点 : 2
文本节点 : 3

具体实例：HTML部分

<ul id="ul1" style="border:1px solid #ccc;">
    <li>1111 <span>span</span></li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
    <p>555555</p>
</ul>

JS部分：（通过chillNodes下的nodeType来改变背景色）

window.onload = function(){
        
        var oUl = document.getElementById('ul1');

        // alert(oUl.childNodes.length);                //标准下：会弹出11（元素节点+文本节点），非标准下：会弹出5（元素节点），IE7以下：会弹出4（除去法嵌套子节点的元素节点）

        // alert(oUl.nodeType);                            //返回当前元素节点的类型   返回 1 => 元素节点； 2 => 属性节点 3 => 文本节点        

        // alert(oUl.childNodes[0].nodeType);            //标准下：3（文本节点）    非标准下：1（元素节点）

        // alert(oUl.attributes.length);                //返回当前元素属性的集合 

        // alert(oUl.attributes[0].nodeType);            //弹出2（属性节点）

        //循环遍历所有li，并返回所有元素节点（节点类型为1），并改变背景色为灰色
        for (var i = 0; i < oUl.childNodes.length; i++) {
            if(oUl.childNodes[i].nodeType == 1){
                oUl.childNodes[i].style.background = '#ddd';
            }
        };

    };

元素.children : 只读 属性 子节点列表集合

标准下：   只包含元素类型的节点
非标准下：只包含元素类型的节点

JS部分：（通过chilldren来改变背景色）

window.onload = function() {
    
    var oUl = document.getElementById('ul1');

    // alert(oUl.children.length);

    for(var i = 0; i<oUl.children.length; i++){
        oUl.children[i].style.background = '#ddd';
    }
}

 

元素.parentNode : 只读 属性 当前节点的父级节点

parentNode实例HTML部分：

<ul id="ul1">
        <li>11111 <a href="javascript:;">隐藏</a></li>
        <li>22222 <a href="javascript:;">隐藏</a></li>
        <li>33333 <a href="javascript:;">隐藏</a></li>
        <li>44444 <a href="javascript:;">隐藏</a></li>
    </ul>

parentNode实例JS部分：

window.onload = function(){
    var aA = document.getElementsByTagName('a');
    for (var i = 0; i < aA.length; i++) {
        aA[i].onclick = function(){
            this.parentNode.style.display = 'none';
        }
    };
};