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>

js中的节点遍历+类数组对象的更多相关文章

JS中集合对象(Array、Map、Set)及类数组对象的使用与对比
原文地址在使用js编程的时候,常常会用到集合对象,集合对象其实是一种泛型,在js中没有明确的规定其内元素的类型,但在强类型语言譬如Java中泛型强制要求指定类型. ES6引入了iterable类型, ...
JS中集合对象(Array、Map、Set)及类数组对象的使用与对比（转载）
在使用js编程的时候,常常会用到集合对象,集合对象其实是一种泛型,在js中没有明确的规定其内元素的类型,但在强类型语言譬如Java中泛型强制要求指定类型. ES6引入了iterable类型,Array ...
js之数组，对象，类数组对象
许久不写了,实在是不知道写点什么,正好最近有个同事问了个问题,关于数组,对象和类数组的,仔细说起来都是基础,其实都没什么好讲的,不过看到还是有很多朋友有些迷糊,这里就简单对于定义以及一下相同点,不同点 ...
浅谈JavaScript和DOM中的类数组对象
JavaScript是一门弱类型语言,它的数据类型分为两大类:简单数据类型(5种:Undefined.Null.Boolean.Number.String)和复杂数据类型(1种:Object).Obj ...
js－类数组对象
JavaScript中,数组是一个特殊的对象,其property名为正整数,且其length属性会随着数组成员的增减而发生变化,同时又从Array构造函数中继承了一些用于进行数组操作的方法. 而对于一 ...
如何在JavaScript中手动创建类数组对象
前言关于什么是js的类数组对象这里不再赘述.可以参考这个链接,还有这里. js中类数组对象很多,概念简单的讲就是看上去像数组,又不是数组,可以使用数字下标方式访问又没有数组方法. 例: argume ...
浅谈js的类数组对象arguments
类数组对象:arguments总所周知,js是一门相当灵活的语言.当我们在js中在调用一个函数的时候,我们经常会给这个函数传递一些参数,js把传入到这个函数的全部参数存储在一个叫做arguments的 ...
JavaScript中的类数组对象
在javascript中,对象与数组都是这门语言的原生规范中的基本数据类型,处于并列的位置. 一般来说,如果我们有一个对象obj和一个数组a: obj["attr1"]; / ...
什么是“类数组对象”，在jquer中怎样将类数组对象转换为数组对象
类数组对象的定义: 所谓"类数组对象"就是一个常规的Object对象,如$("div")但它和数组对象非常相似:具备length属性, 并以0.1.2.3……等 ...

随机推荐

【学习笔记】Linux基础（零）：预备知识
学习笔记(连载)之Linux系列 Note:本学习笔记源自<鸟哥的Linux私房菜(基础学习篇)>一书,为此书重要内容的摘要和总结,对于一些常识性的知识不再归纳新型冠状病毒引发的肺炎战& ...
SQL 两个时间段不能重复语句
DECLARE @BeginDate datetime; DECLARE @EndDate datetime; set @BeginDate='2015-03-2' set @EndDate='201 ...
基于 H5 和 webGL 的 3d 智慧城市
前言中共中央.国务院在今年12月印发了<长江三角洲区域一体化发展规划纲要>(下文简称<纲要>),并发出通知,要求各地区各部门结合实际认真贯彻落实. <纲要>强调, ...
[python]Mongodb
文档: http://api.mongodb.com/python/current/tutorial.html 安装: 官网直接下载安装, mac上brew安装的下载太慢, 打算手动安装使用: 开启 ...
目标检测之RCNN，fast RCNN，faster RCNN
RCNN: 候选区生成(Selective Search). 分割成2000左右的候选小区域合并规则:颜色.纹理相近,尺度均匀,合并后形状规则特征提取. 归一候选区尺寸为227×227,归一方法. ...
（二）maven依赖，两个项目之间如何依赖，继承实现
maven的jar之间存在依赖关系的,我们在引入一个时,其他有依赖关系的也会被引入依赖排除: 比如现在有两个依赖关系,A(x,java,y.java,z.java) B(a,java,b,java ...
配置 Docker 加速器
Linux curl -sSL https://get.daocloud.io/daotools/set_mirror.sh | sh -s http://f1361db2.m.daocloud.io ...
SpringBoot Jpa 分页查询最新配置方式
这是已经被废弃的接口 Sort sort = new Sort(Sort.Direction.DESC,"bean类中字段"); //创建时间降序排序 Pageable pagea ...
Go语言实现：【剑指offer】翻转单词顺序列
该题目来源于牛客网<剑指offer>专题. 例如,"student. a am I",正确的句子应该是"I am a student." Go语言实 ...
C++：重载前置++/--返回引用，重载后置++/--返回临时对象
标准库中iterator对++/--的重载代码如下: _Myiter& operator++() { // preincrement ++*(_Mybase *)this; return (* ...

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

js中的节点遍历+类数组对象的更多相关文章

随机推荐

热门专题