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……等 ...
随机推荐
- js笔记（2）--第一天记录
---恢复内容开始--- 模仿了网站的一个常见小功能,开关灯小功能. 代码: <!DOCTYPE html> <html lang="en"> <he ...
- python 中的反斜杠匹配的问题
关于反斜杠的匹配问题可以参考: https://www.cnblogs.com/mzc1997/p/7689235.html 文章中提出了两个概念: 字符串转义和正则转义,我觉得是理解反斜杠的关键所在 ...
- Codeforces_327_C
http://codeforces.com/problemset/problem/327/C 等比求和相加,有mod的出现,所以要算逆元. #include<iostream> #incl ...
- CentOS7 Cloudera Manager6 完全离线安装 CDH6 集群
本文是在CentOS7.4 下进行CDH6集群的完全离线部署.CDH5集群与CDH6集群的部署区别比较大. 说明:本文内容所有操作都是在root用户下进行的. 文件下载 首先一些安装CDH6集群的必须 ...
- 《Head first设计模式》学习笔记
1. 单例模式 2. 工厂模式 3. 抽象工厂 4. 策略模式 5. 观察者模式 6. 装饰者模式 7. 命令模式 8. 适配器模式 9. 外观模式 10. 模版方法模式 11. 迭代器模式 设计模式 ...
- 小cookie，大智慧
Cookie是什么?cookies是你访问网站时创建的数据片段文件,通过保存浏览信息,它们使你的在线体验更加轻松. 使用cookies,可以使你保持在线登录状态,记录你的站点偏好,并为你提供本地化支持 ...
- ajax 解决中文乱码问题
最近遇到了ajax 中文乱码的问题.下面总结一下 1. HTTP协议的编码规定 在HTTP协议中,浏览器不能向服务器直接传递某些特殊字符,必须是这些字符进行URL编码后再进行传送.url编码遵循的规则 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统--网页版本代码生成器
1.单列表模式 2.树形列表模式 3.左右列表模式 4.左右树形和列表结合模式 一 简介 网页版代码生成器需要运行项目,非常有趣,可以用来研究,和自定义一些自己的代码习惯 按界面生成:可生成单个页面和 ...
- 接口测试:http状态码
http状态码 每发出一个http请求之后,都会有一个响应,http本身会有一个状态码,来标示这个请求是否成功,常见的状态码有以下几种:1.200 2开头的都表示这个请求发送成功,最常见的就是200, ...
- tomcat 多端口 多容器 多域名 配置
先强调一个原则: server下面可以有多个service,用于配置不同监听端口 service下面可以有多个Host,用于配置该端口下的不同域名 Host里可以包含多个Context,用于配置该端口 ...