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

随机推荐

Mysql Innodb cluster集群搭建
之前搭建过一个Mysql Ndb cluster集群,但是mysql版本是5.7的,看到官网上mysql8的还是开发者版本,所以尝试搭建下mysql Innodb cluster集群. MySQL的高 ...
单点登陆（SSO）
一.背景在企业发展初期,企业使用的系统很少,通常一个或者两个,每个系统都有自己的登录模块,运营人员每天用自己的账号登录,很方便.但随着企业的发展,用到的系统随之增多,运营人员在操作不同的系统时,需要 ...
kaggle实战之 bag of words meet bag of poopcorn
由于编辑器总是崩溃,我只能直接把代码贴上了. import numpy #first step import pandas as pd import numpy as np # Read data f ...
暑假第二周总结（在centos系统中安装eclipse出错，改为安装ubantu）
本周试着在centos6.4系统上安装eclipse,在林子雨老师的教程所给的链接无法下载,后来找了许多的教程,即便是从官网下载之后,即便是安装好之后eclipse都无法正常启动,后来翻阅借阅的图书后 ...
并发队列之DelayQueue
已经说了四个并发队列了,DelayQueue这是最后一个,这是一个无界阻塞延迟队列,底层基于前面说过的PriorityBlockingQueue实现的 ,队列中每个元素都有过期时间,当从队列获取元素时 ...
LeetCode 304. Range Sum Query 2D - Immutable 二维区域和检索 - 矩阵不可变(C++/Java)
题目: Given a 2D matrix matrix, find the sum of the elements inside the rectangle defined by its upper ...
pycharm中的快捷键
不断更新...... 1.整行向右缩进方法:选中要向右缩进的代码,点击一次[Tab]键,向右进行一个缩进,点击2次就缩进2个[Tab]键 2.整行向左退[缩进] 方法:选中要退缩进的代码,同时点击[ ...
P2571 [SCOI2010]传送带——hyl天梦
P2571 [SCOI2010]传送带题解----天梦如写的不好,请多见谅. 对于这道题,我首先想说,确实困惑了我好久,看网上的各种题解,却都不尽人意,思路早已明白,却不会操作.最后想想,还是觉得自 ...
Codeforces_828
A.模拟,注意单人的时候判断顺序. #include<bits/stdc++.h> using namespace std; int n,a,b; int main() { ios::sy ...
Educational Codeforces Round 39 Editorial B(Euclid算法，连续-=与%=的效率)
You have two variables a and b. Consider the following sequence of actions performed with these vari ...

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

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

随机推荐

热门专题