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中的节点遍历+类数组对象的更多相关文章

  1. JS中集合对象(Array、Map、Set)及类数组对象的使用与对比

    原文地址 在使用js编程的时候,常常会用到集合对象,集合对象其实是一种泛型,在js中没有明确的规定其内元素的类型,但在强类型语言譬如Java中泛型强制要求指定类型. ES6引入了iterable类型, ...

  2. JS中集合对象(Array、Map、Set)及类数组对象的使用与对比（转载）

    在使用js编程的时候,常常会用到集合对象,集合对象其实是一种泛型,在js中没有明确的规定其内元素的类型,但在强类型语言譬如Java中泛型强制要求指定类型. ES6引入了iterable类型,Array ...

  3. js之数组，对象，类数组对象

    许久不写了,实在是不知道写点什么,正好最近有个同事问了个问题,关于数组,对象和类数组的,仔细说起来都是基础,其实都没什么好讲的,不过看到还是有很多朋友有些迷糊,这里就简单对于定义以及一下相同点,不同点 ...

  4. 浅谈JavaScript和DOM中的类数组对象

    JavaScript是一门弱类型语言,它的数据类型分为两大类:简单数据类型(5种:Undefined.Null.Boolean.Number.String)和复杂数据类型(1种:Object).Obj ...

  5. js－ 类数组对象

    JavaScript中,数组是一个特殊的对象,其property名为正整数,且其length属性会随着数组成员的增减而发生变化,同时又从Array构造函数中继承了一些用于进行数组操作的方法. 而对于一 ...

  6. 如何在JavaScript中手动创建类数组对象

    前言 关于什么是js的类数组对象这里不再赘述.可以参考这个链接,还有这里. js中类数组对象很多,概念简单的讲就是看上去像数组,又不是数组,可以使用数字下标方式访问又没有数组方法. 例: argume ...

  7. 浅谈js的类数组对象arguments

    类数组对象:arguments总所周知,js是一门相当灵活的语言.当我们在js中在调用一个函数的时候,我们经常会给这个函数传递一些参数,js把传入到这个函数的全部参数存储在一个叫做arguments的 ...

  8. JavaScript中的类数组对象

    在javascript中,对象与数组都是这门语言的原生规范中的基本数据类型,处于并列的位置. 一般来说,如果我们有一个对象obj和一个数组a: obj["attr1"];    / ...

  9. 什么是“类数组对象”，在jquer中怎样将类数组对象转换为数组对象

    类数组对象的定义: 所谓"类数组对象"就是一个常规的Object对象,如$("div")但它和数组对象非常相似:具备length属性, 并以0.1.2.3……等 ...

随机推荐

  1. 最大似然估计、n阶矩、协方差（矩阵）、（多元）高斯分布 学习摘要

    最大似然估计 似然与概率 在统计学中,似然函数(likelihood function,通常简写为likelihood,似然)和概率(Probability)是两个不同的概念.概率是在特定环境下某件事 ...

  2. linux下oracle调试小知识

    1.oracle 安装下的/u01/diag/rdbms/orcl/HOF/incident目录下是什么文件?答:每当一个错误发生的时候,oracle会创建一个incident,并且分配一个INCID ...

  3. 关于android 中WebView使用Css

    demo private static final String linkCss = "<link rel=\"stylesheet\" href=\"f ...

  4. Spring框架学习笔记（9）——API接口设计相关知识及具体编码实现

    最近需要设计一个API服务器,想要把API接口搞得规范一下,就通过网上搜集到了一些资料,以下便是自己的一些理解以及相关的具体实现 本文采用的是spring boot+maven的方案 restful规 ...

  5. python学习记录（八）

    0910--https://www.cnblogs.com/fnng/archive/2013/04/28/3048356.html Python异常 Python用异常对象(exception ob ...

  6. HDU_1556_线段树

    http://acm.hdu.edu.cn/showproblem.php?pid=1556 直接用了技巧来做. #include<iostream> #include<cstdio ...

  7. 题解 CF1292A 【NEKO's Maze Game】

    有一个结论: 当 \((1,1)\) 不能抵达 \((2,n)\) 时,必定存在一个点对,这两个点的值均为真,且坐标中的 \(x\) 互异,\(y\) 的差 \(\leq 1\) 这个结论的正确性感觉 ...

  8. Linux 工作机初始化操作

    # apt 依赖包安装 sudo apt install build-essential zlib1g-dev libncurses5-dev libgdbm-dev libnss3-dev libs ...

  9. landsat8波段叠加（layer stacking）

    许久没更.最近一直在看IDL,忽略了gdal的学习. 今天做了landsat8的辐射定标,需要通过reflectance gains/bias来进行波段运算.由于landsat8 oli未提供一个完整 ...

  10. Digital Twin 数字孪生

    GE的一个NB视频:http://v.youku.com/v_show/id_XMjk0NTMzODIyNA==.html http://www.gongkong.com/news/201701/35 ...