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……等 ...

随机推荐

C++ 对TXT 的串并行读写
任务说明:有36篇文档,现在要读入,并统计词频,字典长度25,希望能够比较串并行读写操作的时间差距. 串行读入并统计词频 // LoadDocsInUbuntu.cpp // #include < ...
Leetcode 题目整理
1. Two Sum Given an array of integers, return indices of the two numbers such that they add up to a ...
浅谈构建前端自动化工作流程一之 nvm
1.NVM简介我们可能同时在进行2个项目,而2个不同的项目所使用的node版本又是不一样的,或者是要用更新的node版本进行试验和学习.这种情况下,对于维护多个版本的node将会是一件非常麻烦的事情 ...
14、 NAT
私有IP地址段:10.0.0.0-10.255.255.255/8172.16.0.0-172.31.255.255/12192.168.0.0-192.168.255.255/16 NAT的必要性: ...
RestTemplate工具类根据服务名发送请求
要使用RestTemplate 根据服务名发送请求的话需要使用 @LoadBalanced 这个注解,用了这个注解的RestTemplate就不用使用 ip 来请求了,首先要创建一个配置类 i ...
Codeforces_734_D
http://codeforces.com/problemset/problem/734/D 保存最近的八个方向的点,判断即可. #include<iostream> #include&l ...
vue仓库、组件间通信、前后台数据交互、前端储存数据大汇总
目录路由重定向仓库介绍 vuex插件:可以完成任意组件间信息交互(移动端) 前端存储数据大汇总前后台交互方式(重点) 前后台数据交互 axios插件:完成前后台ajax交互的同源策略 - 前后 ...
必知必会之Lambda表达式
Java是一门强大的面向对象的语言,除了8种基本的数据类型,其他一切皆为对象.因此,在Java中定义函数或方法都离不开对象,也就意味着很难直接将方法或函数像参数一样传递,而Java8中的Lambda表 ...
强连通分量——tarjan算法
概念: 有向图强连通分量:在有向图G中,如果两个顶点vi,vj间(vi>vj)有一条从vi到vj的有向路径,同时还有一条从vj到vi的有向路径,则称两个顶点强连通.如果有向图G的每两个顶点都强连 ...
Flink系统之Table API 和 SQL
Flink提供了像表一样处理的API和像执行SQL语句一样把结果集进行执行.这样很方便的让大家进行数据处理了.比如执行一些查询,在无界数据和批处理的任务上,然后将这些按一定的格式进行输出,很方便的让大 ...

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

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

随机推荐

热门专题