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>
    <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

/**
                 * 非常高效的把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>
    <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>
    <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]注意事项前面的话一说起动态集合,多数人可能都有所了解.但是,如果再深入些,有哪些动态集合, ...

随机推荐

使用jbc查询数据封装成对象的工具类
适用于获取Connection对象的util package com.briup.myDataSource; import java.io.FileReader; import java.io.Inp ...
小菜鸟之shell
Linux shell编程目录什么是Shell 1 Shell脚本的执行方式 1 第一种:输入脚本的绝对路径或相对路径 1 第二种:bash或sh +脚本 1 Shell中的变量 2 定义变量 2 ...
Linux命令中dd的作用
Linux命令中用vi编辑文本时dd的作用是删除整行文本的信息.
知乎Python后端面试总结
一面写个快速排序热热身,分析一下复杂度,如果不使用额外的空间,应该怎么写? 说一下Flask中g是怎么实现的,原理是什么? 说一下浏览器从输入url到页面渲染的过程,越详细越好: 了解web安全吗? ...
python 修改文件的创建时间、修改时间、访问时间
目录 python 修改文件创建.修改.访问时间方案一方案二(无法修改文件创建时间) python 修改文件创建.修改.访问时间突如其来想知道一下 python 如何修改文件的属性(创建.修改. ...
轻松搭建CAS 5.x系列(2)-搭建HTTPS的SSO SERVER端
概要说明 CAS要求,必须使用HTTPS的服务,否则就只等实现登录,无法实现单点登录.科普下HTTPS,网站有HTTP和HTTPS两种协议.HTTP是浏览器到网站之间是明文传输,比如你输入帐号名和密码 ...
C#/.net 通过js调用系统相机进行拍照，图片无损压缩后进行二维码识别
这两天撸了一个需求,通过 JS 调用手机后置相机,进行拍照扫码.前台实现调用手机相机,然后截取图片并上传到后台的功能.后台接收传过来的图片后,通过调用开源二维码识别库 ZXing 进行二维码数据解析 ...
html-proload
对基础与初始化进行预加载加载顺序 document > preload > 正常加载 media 属性不同设备时的响应式加载 - media="(max-width: 600 ...
基于PROMISE解决回调地狱问题
回调地狱问题: 在使用JavaScript时,为了实现某些逻辑经常会写出层层嵌套的回调函数,如果嵌套过多,会极大影响代码可读性和逻辑,这种情况也被成为回调地狱.比如说你要把一个函数 A 作为回调函数, ...
SuperMap iClient3D for WebGL 9D怎么将s3m图层的纹理变更精细些
设置S3MTilesLayer.lodRangeScale.默认值是1,设的越小越精细,最小值是0.01.越大越模糊,最大值是100

NodeList对象的特点

NodeList对象的特点的更多相关文章

随机推荐

热门专题