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

随机推荐

《ASP.NET Core 高性能系列》关于.NET Core的配置信息的若干事项
1.配置文件的相关闲话 Core自身对于配置文件不是必须品,但由上文分析可知ASP.NET Core默认采用appsettings.json作为配置文件,关于配置信息的优先等级命令行>环境变量 ...
Leetcode 题目整理-3 Palindrome Number & Roman to Integer
9. Palindrome Number Determine whether an integer is a palindrome. Do this without extra space. clic ...
MCMC&Gibbs sampling
Note of Markov Chain Monte Carlo and Gibbs Sampling : http://pan.baidu.com/s/1jHpWY1o 序:A major lim ...
CodeBlocks 断点调试
启动调试器 1. 一般,调试器的按钮可以在工具栏找到如果没有,可以从view菜单项中调出 2. 设置断点使用调试器时需要让程序在需要的位置中断,在启动调试器前设置断点如下,鼠标点击编辑器的左边即可 ...
convertto-securestring结果使用python解密
根据微软帮助文档,convertto-securestring有两种加密模式.如果在指定密码的情况下,则使用aes加密,否则使用windows dpapi加密.而且aes加密也没有指明iv值与加密模式 ...
django登录页面优化
环境准备 1.python3.6 2.django2.0+ 3.bootstrap3 后台代码 #创建login_check视图函数,用来处理登录 def login_action(request): ...
sougn开源，自己写的一个项目
源代码:http://yun.baidu.com/share/link?shareid=1504480803&uk=2739888323 联系方式:1034465036@qq.com
DBSync如何连接并同步MySQL
DBSync支持各种异构数据库之间的同步,如Access.SQL Server.Oracle.MySQL.DB2等,但很多用户在同步MySQL时遇到问题,这里讲述一下解决措施. 1.问题现象DBSyn ...
详解python的装饰器decorator
装饰器本质上是一个python函数,它可以让其它函数在不需要任何代码改动的情况下增加额外的功能. 装饰器的返回值也是一个函数对象.它经常用于有切面需求的场景,比如:插入日志,性能测试,事务处理,缓存, ...
[sphinx]生成文档的工具
安装: pip install sphinx 新建文档项目 sphinx-quickstart 配置一些设置选项, 生成项目文件生成html make html .\make.bat html #w ...

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

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

随机推荐

热门专题