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</style>
        body{
            width:100%;
            height;
        }
    script src="Domready.js"></script
        myReady(function(){
            var oHtml=document.documentElement;
            console.log(oHtml);

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

             oBody1];
            console.log(oBody);
        });
    body>    

html>

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

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

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

document.documentElement;
            console.log(oHtml);获取根元素节点

            ];
            console.log(oBody);

            console.log(oHead.parentNode==oHtml);true
            console.log(oBody.parentNode
            console.log(oHead.nextSiblingoBody);            console.log(oBody.prevIoUsSiblingoHead);
            console.log(Box.ownerDocument);
            console.log(oHtml);
            console.log(Box.ownerDocumentdocument);            console.log(Box.ownerDocumentfalse
oHtml.parentNode);true 文档的根元素节点的父元素节点=文档节点

            console.log(Box.hasChildNodes());            console.log(Box.childNodes[].hasChildNodes());
        });

    >    
    div id="Box">这是Boxdiv>

HTML结构树打印

(){
            
             s"";
             travelNode(space,node){
                 如果不是空白节点
                if(node.tagName){
                    s+=space+node.tagName"<br>;
                }
                 lennode.childNodes.length;获取该元素的子元素长度
                for( i;i<len;i++){
                    travelNode(space|-,node.childNodes[i]);
                }
                
            }
            travelNode(>
        ul>
            li>item1>item2>item3>item4>item5>

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

 uldocument.getElementById(ul);
            ul.childNodes.length;i){
                (ul.childNodes[i].nodeType){判断是否是元素节点
                    console.log(ul.childNodes[i]);
                }
            }

        });

    ul ="ul">

一组只获取元素节点的API

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

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

prevIoUsElementSibling 上一个兄弟元素

nextElementSibling 下一个兄弟元素

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

childElementCount 子元素节点数量

兼容性：IE9+

ul.childElementCount;i){
                console.log(ul.children[i]);
            }

        });

    >

NodeList 类数组对象

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

使用ele.childNodes即可获取到nodeList

);
            console.log(ul.childNodes);NodeList(11) [text,li,text,text]
            console.log(ul.childNodes[]);<li>item1</li>
            console.log(ul.childNodes.item());>

类数组对象不是数组

            ul.childNodes.push(<li>item6</li>);Uncaught TypeError: ul.childNodes.push is not a function at HTMLDocument.<anonymous>
>

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

ul.childNodes.push("<li>item6</li>");//Uncaught TypeError: ul.childNodes.push is not a function at HTMLDocument.<anonymous>

             toArray(nodeList){    
                 arrnull;
                arrnew Array();
                nodeList.length;i){
                    arr.push(nodeList[i]);
                }
                return arr;
            }

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

    >

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

Array.prototype.slice.call(ul.childNodes);            
            newNodeList.push(>

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

 toArray(nodeList){
                ;
                try{
                    Array.prototype.slice.call(nodeList);
                     newNodeList;
                }catch(e){
                    arr Array();
                    ){
                        arr.push(nodeList[i]);
                    }
                     arr;
                }
            }
            );
            console.log(newNodeList);
        });

    >

类数组对象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的元素

注意只返回一个

 psdocument.getElementsByTagName(p scriptsdocument.scripts;
             linksdocument.links;
             formsdocument.forms;
             imagesdocument.images;
             tdstr1).cells;
             optionsselect).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]
            console.log(options);HTMLOptionsCollection(3) [option,option,selectedindex: 0]

            console.log(tds.namedItem(td<td id="td">1</td>
p>这是p标签1>这是p标签2>

    a href="#">这是a链接1a>这是a链接2form action=""select name="select" id="select"option valueoptionselectformimg ="source/cat-little.jpg" alttabletr ="tr1"td ="td">1td>2>3>4tr>
    

>

类数组对象namednodeMap

通过.attributes得到

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

有item方法和length属性

 listlist attrslist.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[id="list"
            console.log(attrs.item(data-url="index.html"
="list" data-url="index.html" data-action="submit">

类数组对象：nodeList HTMLCollection namednodeMap

都具有动态性

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

appendChild() 追加子元素

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

 divsdivHTMLCollection类数组对象
            while(idivs.length){
                document.body.appendChild(document.createElement());
                i;
            }

        });

    >

结果页面崩溃

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

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

 lengthdivs.length;
            length){
                document.body.appendChild(document.createElement(>

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

相关推荐