zoukankan      html  css  js  c++  java
  • 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';
            }
        };
    };
  • 相关阅读:
    Bulk insert的用法
    跨服务器与连接不同数据库 不跨服务器连接库存表
    读书笔记(1)
    CSS渲染HTML时的优先级问题
    如何使用as3获得一组不重复的随机数
    flash cs5导出swc到flash builder 4
    转:AS3.0的Dictionary类简介
    转:As3.0中的反射
    Flex 4里的fx、mx以及s命名空间
    yahoo的flash组件
  • 原文地址:https://www.cnblogs.com/bokebi520/p/4311060.html
Copyright © 2011-2022 走看看