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……等 ...
随机推荐
- IDEA | Dot Executable: null..No dot executable found
背景 今天想在IDEA上打开.puml后缀的类图,发现IDEA并不能识别,但是正常的时序图却能正常打开,打开类图就报如下错误: 解决方案 经排查,idea的plantuml插件默认只支持时序图,类图还 ...
- Topics类型配置
配置项 备注 segment.bytes 分段文件大小,最大2GB segment.ms 强制新建段文件间隔阀值时间 segment.jitter.ms 段文件抖动时间 segment.index.b ...
- Arduino系列之光照传感器（三）
今天,我将简单做一个当光照值低于某个值的时候,灯光自动打开,当高于某个值的时候,自动关闭. 设计代码原理: 首先,定义一个全局变量,并赋予初始值 然后,初始化程序 将设定某个IO口为输出模式 读取光度 ...
- oracle和mysql区别
1.本质的区别.oracle是对象关系数据库管理系统,简称ordbms.mysql是开源关系数据库关系系统,简称rdbms.Oracle是收费的.mysql是开源.免费的. 2.数据库安全性.myql ...
- VC实现快递查询
#include <iostream> #include <string> #include <cstdlib> #include <afxinet.h> ...
- c++IO对象不可复制
IO类型的3个独立的头文件: iostream定义读写控制窗口的类型, fstream 定义读写已命名文件的类型, (包含fstream类) sstream定义读写存储在内存中 ...
- 尝试用 Python 写了个病毒传播模拟程序
病毒扩散仿真程序,用 python 也可以. 概述 事情是这样的,B 站 UP 主 @ele 实验室,写了一个简单的疫情传播仿真程序,告诉大家在家待着的重要性,视频相信大家都看过了,并且 UP 主也放 ...
- 《 Java 编程思想》CH06 访问权限控制
访问控制(或隐藏具体实现)与"最初的实现并不恰当"有关. 重构即重写代码,以使得它更可读,更容易理解,并因此而更具维护性. 在面向对象设计中需要考虑一个基本问题:"如何把 ...
- List<E> 、Set<E>和Map<K,E>的简单应用
题目一: 创建两个线性表,分别存储{“chen”,“wang”,“liu”,“zhang”}和{“chen”,“hu”,“zhang”},求这两个线性表的交集和并集. 代码: List_Test.ja ...
- 微信小程序开发技巧总结（二） -- 文件的选取、移动、上传和下载
微信小程序开发技巧总结(二) -- 文件的选取.移动.上传和下载 1.不同类型文件的选取 1.1 常用的图片 视频 对于大部分开发者来说,需要上传的文件形式主要为图片,微信为此提供了接口. wx.ch ...