• js中的节点遍历+类数组对象

    firstChild  第一个子元素

    lastChild  最后一个子元素

    childNodes[n]  =   childNodes.item(n)    第n+1个子元素

    parentNode  父元素

    nextSibling  下一个兄弟元素

    previousSibling  上一个兄弟元素

    document.documentElement 获取文档的根节点

    .tagName 标签名

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            var oHtml=document.documentElement;
            console.log(oHtml);

            var oHead=oHtml.firstChild;//获取html的第一个子元素节点
            var oHead=oHtml.childNodes[0];
            var oHead=oHtml.childNodes.item(0);
            console.log(oHead);

            var oBody=oHtml.childNodes[1];
            console.log(oBody);
        });
    </script>
</head>
<body>    

</body>
</html>

     会返回head与body之间的空白文本节点（除了IE8以下的浏览器会忽略这个空白文本节点）

    任何节点都可以通过 .ownerDocument 获得根元素节点

    .hasChildNodes() 判断元素是否含有子节点

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            var oHtml=document.documentElement;
            console.log(oHtml);//获取根元素节点

            var oHead=oHtml.firstChild;//获取html的第一个子元素节点
            var oHead=oHtml.childNodes[0];
            var oHead=oHtml.childNodes.item(0);
            console.log(oHead);

            var oBody=oHtml.childNodes[1];
            console.log(oBody);

            console.log(oHead.parentNode==oHtml);//true
            console.log(oBody.parentNode==oHtml);//true

            console.log(oHead.nextSibling==oBody);//true
            console.log(oBody.previousSibling==oHead);//true

            console.log(box.ownerDocument);
            console.log(oHtml);
            console.log(box.ownerDocument==document);//true
            console.log(box.ownerDocument==oHtml);//false
            console.log(box.ownerDocument==oHtml.parentNode);//true 文档的根元素节点的父元素节点=文档节点

            console.log(box.hasChildNodes());//true
            console.log(box.childNodes[0].hasChildNodes());//false

        });

    </script>
</head>
<body>    
    <div id="box">这是box</div>
</body>
</html>

    HTML结构树打印

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            
            var s="";
            function travelNode(space,node){
                // 如果不是空白节点
                if(node.tagName){
                    s+=space+node.tagName+"<br>";
                }
                var len=node.childNodes.length;//获取该元素的子元素长度
                for(var i=0;i<len;i++){
                    travelNode(space+"|-",node.childNodes[i]);
                }
                
            }
            travelNode("",document);
            document.write(s);

        });

    </script>
</head>
<body>    
    <div id="box">
        <ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
        </ul>
    </div>
</body>
</html>

     只获取元素节点，而过滤空白文本节点

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            
            var ul=document.getElementById("ul");
            for(var i=0,len=ul.childNodes.length;i<len;i++){
                if(ul.childNodes[i].nodeType==1){//判断是否是元素节点
                    console.log(ul.childNodes[i]);
                }
            }

        });

    </script>
</head>
<body>    
    <div id="box">
        <ul id="ul">
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
        </ul>
    </div>
</body>
</html>

     一组只获取元素节点的API

    firstElementChild 第一个元素子节点（直接子元素节点，而不是后代子元素节点）

    lastElementChild 最后一个元素子节点（直接子元素节点，而不是后代子元素节点）

    previousElementSibling  上一个兄弟元素

    nextElementSibling 下一个兄弟元素

    children[n] 第n+1个子元素节点

    childElementCount 子元素节点数量

    兼容性：IE9+

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            
            var ul=document.getElementById("ul");
            for(var i=0,len=ul.childElementCount;i<len;i++){
                console.log(ul.children[i]);
            }

        });

    </script>
</head>
<body>    
    <div id="box">
        <ul id="ul">
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
        </ul>
    </div>
</body>
</html>

     NodeList 类数组对象

    可以通过[]来访问，有item方法和length属性

    使用ele.childNodes即可获取到nodeList

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            
            var ul=document.getElementById("ul");
            console.log(ul.childNodes);//NodeList(11) [text, li, text, li, text, li, text, li, text, li, text]
            console.log(ul.childNodes[1]);//<li>item1</li>
            console.log(ul.childNodes.item(1));//<li>item1</li>

        });

    </script>
</head>
<body>    
    <div id="box">
        <ul id="ul">
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
        </ul>
    </div>
</body>
</html>

    类数组对象不是数组

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            
            var ul=document.getElementById("ul");
            console.log(ul.childNodes);//NodeList(11) [text, li, text, li, text, li, text, li, text, li, text]
            ul.childNodes.push("<li>item6</li>");//Uncaught TypeError: ul.childNodes.push is not a function at HTMLDocument.<anonymous>

        });

    </script>
</head>
<body>    
    <div id="box">
        <ul id="ul">
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
        </ul>
    </div>
</body>
</html>

    接下来将类数组对象转为数组

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            
            var ul=document.getElementById("ul");
            console.log(ul.childNodes);//NodeList(11) [text, li, text, li, text, li, text, li, text, li, text]
            //ul.childNodes.push("<li>item6</li>");//Uncaught TypeError: ul.childNodes.push is not a function at HTMLDocument.<anonymous>

            function toArray(nodeList){    
                var arr=null;
                arr=new Array();
                for(var i=0,len=nodeList.length;i<len;i++){
                    arr.push(nodeList[i]);
                }
                return arr;
            }

            var newNodeList=toArray(ul.childNodes);
            newNodeList.push("<li>item6</li>");
            console.log(newNodeList);//(12) [text, li, text, li, text, li, text, li, text, li, text, "<li>item6</li>"]
        });

    </script>
</head>
<body>    
    <div id="box">
        <ul id="ul">
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
        </ul>
    </div>
</body>
</html>

    Array.prototype.slice.call() 可以将类数组对象转为数组，但是在低版本IE中会报错

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            
            var ul=document.getElementById("ul");
            console.log(ul.childNodes);//NodeList(11) [text, li, text, li, text, li, text, li, text, li, text]
            //ul.childNodes.push("<li>item6</li>");//Uncaught TypeError: ul.childNodes.push is not a function at HTMLDocument.<anonymous>

            var newNodeList=Array.prototype.slice.call(ul.childNodes);            
            newNodeList.push("<li>item6</li>");
            console.log(newNodeList);//(12) [text, li, text, li, text, li, text, li, text, li, text, "<li>item6</li>"]
        });

    </script>
</head>
<body>    
    <div id="box">
        <ul id="ul">
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
        </ul>
    </div>
</body>
</html>

    下面是兼容低版本IE的写法

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            
            var ul=document.getElementById("ul");
            console.log(ul.childNodes);//NodeList(11) [text, li, text, li, text, li, text, li, text, li, text]
            //ul.childNodes.push("<li>item6</li>");//Uncaught TypeError: ul.childNodes.push is not a function at HTMLDocument.<anonymous>

            function toArray(nodeList){
                var arr=null;
                try{
                    var newNodeList=Array.prototype.slice.call(nodeList);
                    return newNodeList;
                }catch(e){
                    arr=new Array();
                    for(var i=0,len=nodeList.length;i<len;i++){
                        arr.push(nodeList[i]);
                    }
                    return arr;
                }
            }
            var newNodeList=toArray(ul.childNodes);
            newNodeList.push("<li>item6</li>");
            console.log(newNodeList);
        });

    </script>
</head>
<body>    
    <div id="box">
        <ul id="ul">
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
        </ul>
    </div>
</body>
</html>

     类数组对象HTMLCollection

    ele.getElementsByTagName() 获取所有该标签的元素集合

    document.scripts  scripts元素集合

    document.links  所有的a标签

    document.images  image集合

    document.forms  form表单集合

    tr.cells  tr下的所有td集合

    select.options  select下的所有option元素集合

    HTMLCollection中有name  item  namedItem

    .namedItem(value) 

    首先尝试返回有id=value的元素

    如果没有，就返回name=value的元素

    注意只返回一个

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            
            var ps=document.getElementsByTagName("p");
            var scripts=document.scripts;
            var links=document.links;
            var forms=document.forms;
            var images=document.images;
            var tds=document.getElementById("tr1").cells;
            var options=document.getElementById("select").options;

            console.log(ps);//HTMLCollection(2) [p, p]
            console.log(scripts);//HTMLCollection(2) [script, script]
            console.log(links);//HTMLCollection(2) [a, a]
            console.log(forms);//HTMLCollection(2) [form, form]
            console.log(images);//HTMLCollection(2) [img, img]
            console.log(tds);//HTMLCollection(4) [td, td, td, td]
            console.log(options);//HTMLOptionsCollection(3) [option, option, option, selectedIndex: 0]

            console.log(tds.namedItem("td"));//<td id="td">1</td>

        });

    </script>
</head>
<body>
    <p>这是p标签1</p>
    <p>这是p标签2</p>

    <a href="#">这是a链接1</a>
    <a href="#">这是a链接2</a>

    <form action="">
        <select name="select" id="select">
            <option value=""></option>
            <option value=""></option>
            <option value=""></option>
        </select>
    </form>
    <form action="">
    </form>

    <img src="source/cat-little.jpg" alt="">
    <img src="source/cat-little.jpg" alt="">

    <table>
        <tr id="tr1">
            <td id="td">1</td>
            <td name="td">2</td>
            <td name="td">3</td>
            <td>4</td>
        </tr>
    </table>
    

</body>
</html>

     类数组对象namedNodeMap

    通过.attributes得到

    获取元素的所有属性，包括系统自带属性和自定义属性

    有item方法和length属性

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            
            var list=document.getElementById("list");
            var attrs=list.attributes;

            console.log(attrs);//NamedNodeMap {0: id, 1: data-url, 2: data-action, id: id, data-url: data-url, data-action: data-action, length: 3}
            console.log(attrs.length);//3
            console.log(attrs[0]);//id="list"
            console.log(attrs.item(1));//data-url="index.html"

        });

    </script>
</head>
<body>
    <ul id="list" data-url="index.html" data-action="submit">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

    类数组对象：nodeList   HTMLCollection   namedNodeMap

    都具有动态性

    每当文档结构发生变化时，就会随之更新

    appendChild() 追加子元素

    证明：尝试获取到最初div元素的个数，并且在页面中追加同等个数的div（即数量加倍的效果）

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            
            var divs=document.getElementsByTagName("div");//HTMLCollection类数组对象
            var i=0;
            while(i<divs.length){
                document.body.appendChild(document.createElement("div"));
                i++;
            }

        });

    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

    结果页面崩溃

    原因是每次在循环时，会重新计算div元素的个数，导致div元素的个数永远都在动态改变，导致while循环无法结束

    解决方法是将最初div元素的个数用一个变量保存起来

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            
            var divs=document.getElementsByTagName("div");//HTMLCollection类数组对象
            var i=0;
            var length=divs.length;
            while(i<length){
                document.body.appendChild(document.createElement("div"));
                i++;
            }

        });

    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>
  • 相关阅读:
    django缓存,信号,orm性能,多数据库配置
    git实战
    Web框架
    Windows Server 2012 R2 管理员密码忘记如何修改密码
    主机记录和记录值
    Python的类
    GenomicRangeQuery Find the minimal nucleotide from a range of sequence DNA.
    Countdiv-Codility Lesson5
    Windows域控时间不正确，设置互联网NTP服务器时间自动同步
    Missing Smallest positive integer
  • 原文地址：https://www.cnblogs.com/chenyingying0/p/12271488.html
Copyright © 2020-2023  润新知