精华内容
下载资源
问答
  • childNodes.length与children.length的值常不一样。
  • childNodes 用法两例

    2020-09-06 00:20:26
    childNodes实现代码
  • JS中用childNodes获取子元素换行会产生一个子元素 <div id='div3'></div> 这样的代码 $(‘#div1').childNodes.length==>会等于 5哦 要是你把这些代码不换行你就会得到2 $('#div1').childNodes.length 5 $('...
  • 主要介绍了JavaScript操作DOM元素的childNodes和children区别,本文直接给出测试代码和运行效果来讲解它们之间的区别,需要的朋友可以参考下
  • Javascript中,相信大家都试过用getElementsByTagName和childNodes来实现对节点的遍历
  • js -- childNodes

    2019-03-06 01:32:54
    博文链接:https://skyofdawn.iteye.com/blog/208281
  • childNodes

    2019-01-14 08:37:15
    &lt;html&gt;&lt;head&gt;&lt;title&gt;getElementsByTagName()&lt;/title&gt;&lt;script language="javascript"...alert(ul.childNodes.length); for

    <html>
    <head>
    <title>getElementsByTagName()</title>
    <script language="javascript">
    function test1()
    {
    var ul=document.getElementById("bb");
    alert(ul.childNodes.length);

    for(var i=0;i<ul.childNodes.length;i++)
    {
    alert(ul.childNodes[i].nodeName);
    }

    }
    </script>
    </head>
    <body οnlοad="test1()">

    <ul id="uu">
    <a href="a1.html">a1</a>
    <a href="a2.html">a2</a>
    </ul>

    <ul id="bb">
    <a href="aa1.html">aa1</a>
    <a href="aa2.html">aa2</a>
    </ul>

    </body>
    </html>
    IE8
    a标签中间的文本算是 文本节点 测试弹出4 分别是: a #text a #text

    展开全文
  • childNodes详解

    2019-10-03 11:53:00
    childNodes 属性返回节点的子节点集合,以 NodeList 对象。 提示:您可以使用 length 属性来确定子节点的数量,然后您就能够遍历所有的子节点并提取您需要的信息。 浏览器支持 所有主流浏览器都支持 childNodes...

    定义和用法

    childNodes 属性返回节点的子节点集合,以 NodeList 对象。

    提示:您可以使用 length 属性来确定子节点的数量,然后您就能够遍历所有的子节点并提取您需要的信息。

    浏览器支持

    所有主流浏览器都支持 childNodes 属性。

    语法

    element.childNodes

    技术细节

    返回值:NodeList 对象,表示节点集合。
    DOM 版本Core Level 1

     

     

     

    以上是定义来着w3cschool.com

    DOM中节点的类型


    DOM中一共有12中类型。但是我们常用的只有几种。

    首先我们了解下DOM中一般常见的节点类型有哪些?

    1、元素节点

    DOM中的原子都是元素节点,比如<body><table><div>等等。

    如果把Web上的文档比作一座大厦,则元素就是构成这块大厦的砖石。一个文档是由N个元素组成的。元素可包含其他元素。

    2、文本节点

    任意的文字、空格、换行、空白行都算是文本节点。

    3、属性节点

    属性节点,故名思议就是其他节点的属性。例如所有的元素都有title属性,在title='title1'就是一个属性节点。

    4、注释节点

    就是注释了。

     

    childNodes包含了哪些节点?

    由childNodes属性返回的数组中包含着所有类型的节点,所有的属性节点和文本节点也包含在其中。(这一点存在疑问,下面有解释

    事实上,文档里几乎每一样东西都是一个节点,甚至连空格和换行符都会被解释成节点。而且都包含在childNodes属性所返回的数组中。

     

    chidNoeds返回的事node的集合,

    每个node都包含有nodeType属性。

    nodeType取值:

    元素节点:1

    属性节点:2

    文本节点:3

    注释节点:8

     

    测试

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script>
            window.onload = function () {
                console.log("body的childNodes");
                var oItems = document.body.childNodes;
                for (var i = 0; i < oItems.length; i++) {
                    console.log("nodeType:" + oItems[i].nodeType);
                    console.log("nodeName:" + oItems[i].nodeName);
                    console.log("nodeValue:'" + oItems[i].nodeValue + "'");
                }
                console.log("h1的childNodes");
                getChildNodesAtrr(document.getElementsByTagName("h1")[0]);
                console.log("span的childNodes");
                getChildNodesAtrr(document.getElementsByTagName("span")[0]);
                console.log("div的childNodes");
                getChildNodesAtrr(document.getElementsByTagName("div")[0]);
            };
    
            function getChildNodesAtrr(dom) {
                var oItems = dom.childNodes;
                for (var i = 0; i < oItems.length; i++) {
                    console.log("nodeType:" + oItems[i].nodeType);
                    console.log("nodeName:" + oItems[i].nodeName);
                    console.log("nodeValue:'" + oItems[i].nodeValue + "'");
                }
            }
        </script>
    </head>
    <body>
        <h1>h1</h1>
        <span>span</span>
        <!--这是一个注释-->
        123
        <div class="class1" title="title1"></div>
    </body>
    </html>

    最终控制台的输出结果:

    body的childNodes
    nodeType:3
    nodeName:#text
    nodeValue:'
    '
    nodeType:1
    nodeName:H1
    nodeValue:'null'
    nodeType:3
    nodeName:#text
    nodeValue:'
    '
    nodeType:1
    nodeName:SPAN
    nodeValue:'null'
    nodeType:3
    nodeName:#text
    nodeValue:'
    '
    nodeType:8
    nodeName:#comment
    nodeValue:'这是一个注释'
    nodeType:3
    nodeName:#text
    nodeValue:'
    123
    '
    nodeType:1
    nodeName:DIV
    nodeValue:'null'
    nodeType:3
    nodeName:#text
    nodeValue:'


    '
    h1的childNodes
    nodeType:3
    nodeName:#text
    nodeValue:'h1'
    span的childNodes
    nodeType:3
    nodeName:#text
    nodeValue:'span'
    div的childNodes

     

    结果分析

    1、分析结果,其中可以发现

    nodeValue:'
    123
    '

    这个其实是nodeValue:\n123\n,加引号只是为了能看出换行效果。

    这说明空格和换行符确实被当成一个文本接单

    2、元素包含文字时,元素节点本身的nodevalue是null,而它包含的文字成为了一个独立的文本节点,这个文本节点的nodeValue才是我们之前设置的值。上例中的H1和SPAN都是这样的,childNodes的长度为1。而div因为没有内容所以div的childNodes的长度为0。

    3、没有发现有nodeType为2的节点类型

    总结

    在使用原生的childNodes时,包括提供的nodeValue,firstChild(),lastChild()等等。都需要注意其他元素类型的影响,因为我们通常操作的都是元素节点。而childNodes返回的集合中包含了很多意向不到的东西,在实际使用中和容易造成错误。

    所以建议在使用childNodes时,最好通过nodeType将返回集合过滤一遍再进行使用,能够避免很多不必要的问题。

    疑问

    实际测试发现并没有发现有nodeType为2的node。不知道是和原因?希望有知道的大神告知。

     

     

    以上哪有写的不对的地方欢迎指正学习。^3^

    欢迎转载

    转载注明原创地址:http://www.cnblogs.com/Jersen/p/4908943.html

    转载于:https://www.cnblogs.com/Jersen/p/4908943.html

    展开全文
  • childNodes简单解析

    千次阅读 2019-11-06 15:06:49
    childNodes 属性返回节点的子节点集合,以 NodeList 对象。 提示:您可以使用 length 属性来确定子节点的数量,然后您就能够遍历所有的子节点并提取您需要的信息。 浏览器支持 所有主流浏览器都支持 childNodes 属性...

    定义和用法

    childNodes 属性返回节点的子节点集合,以 NodeList 对象。

    提示:您可以使用 length 属性来确定子节点的数量,然后您就能够遍历所有的子节点并提取您需要的信息。

    浏览器支持

    所有主流浏览器都支持 childNodes 属性。

    语法

    element.childNodes
    技术细节
    返回值: NodeList 对象,表示节点集合。
    DOM 版本 Core Level 1

    以上是定义来着w3cschool.com

    DOM中节点的类型

    DOM中一共有12中类型。但是我们常用的只有几种。

    首先我们了解下DOM中一般常见的节点类型有哪些?

    1、元素节点
    DOM中的原子都是元素节点,比如
    body table div等等。

    如果把Web上的文档比作一座大厦,则元素就是构成这块大厦的砖石。一个文档是由N个元素组成的。元素可包含其他元素。

    2、文本节点
    任意的文字、空格、换行、空白行都算是文本节点。

    3、属性节点
    属性节点,故名思议就是其他节点的属性。例如所有的元素都有title属性,在title='title1’就是一个属性节点。

    4、注释节点
    就是注释了。

    childNodes包含了哪些节点?

    由childNodes属性返回的数组中包含着所有类型的节点,所有的属性节点和文本节点也包含在其中。(这一点存在疑问,下面有解释)

    事实上,文档里几乎每一样东西都是一个节点,甚至连空格和换行符都会被解释成节点。而且都包含在childNodes属性所返回的数组中。

    chidNoeds返回的事node的集合,

    每个node都包含有nodeType属性。

    nodeType取值:

    元素节点:1

    属性节点:2

    文本节点:3

    注释节点:8

    测试

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script>
            window.onload = function () {
                console.log("body的childNodes");
                var oItems = document.body.childNodes;
                for (var i = 0; i < oItems.length; i++) {
                    console.log("nodeType:" + oItems[i].nodeType);
                    console.log("nodeName:" + oItems[i].nodeName);
                    console.log("nodeValue:'" + oItems[i].nodeValue + "'");
                }
                console.log("h1的childNodes");
                getChildNodesAtrr(document.getElementsByTagName("h1")[0]);
                console.log("span的childNodes");
                getChildNodesAtrr(document.getElementsByTagName("span")[0]);
                console.log("div的childNodes");
                getChildNodesAtrr(document.getElementsByTagName("div")[0]);
            };
    
            function getChildNodesAtrr(dom) {
                var oItems = dom.childNodes;
                for (var i = 0; i < oItems.length; i++) {
                    console.log("nodeType:" + oItems[i].nodeType);
                    console.log("nodeName:" + oItems[i].nodeName);
                    console.log("nodeValue:'" + oItems[i].nodeValue + "'");
                }
            }
        </script>
    </head>
    <body>
        <h1>h1</h1>
        <span>span</span>
        <!--这是一个注释-->
        123
        <div class="class1" title="title1"></div>
    </body>
    </html>
    

    最终控制台的输出结果:

    body的childNodes
    nodeType:3
    nodeName:#text
    nodeValue:’

    nodeType:1
    nodeName:H1
    nodeValue:‘null’
    nodeType:3
    nodeName:#text
    nodeValue:’

    nodeType:1
    nodeName:SPAN
    nodeValue:‘null’
    nodeType:3
    nodeName:#text
    nodeValue:’

    nodeType:8
    nodeName:#comment
    nodeValue:‘这是一个注释’
    nodeType:3
    nodeName:#text
    nodeValue:’
    123

    nodeType:1
    nodeName:DIV
    nodeValue:‘null’
    nodeType:3
    nodeName:#text
    nodeValue:’


    h1的childNodes
    nodeType:3
    nodeName:#text
    nodeValue:‘h1’
    span的childNodes
    nodeType:3
    nodeName:#text
    nodeValue:‘span’
    div的childNodes

    结果分析
    1、分析结果,其中可以发现

    nodeValue:’
    123

    这个其实是nodeValue:\n123\n,加引号只是为了能看出换行效果。

    这说明空格和换行符确实被当成一个文本接单

    2、元素包含文字时,元素节点本身的nodevalue是null,而它包含的文字成为了一个独立的文本节点,这个文本节点的nodeValue才是我们之前设置的值。上例中的H1和SPAN都是这样的,childNodes的长度为1。而div因为没有内容所以div的childNodes的长度为0。

    3、没有发现有nodeType为2的节点类型

    总结
    在使用原生的childNodes时,包括提供的nodeValue,firstChild(),lastChild()等等。都需要注意其他元素类型的影响,因为我们通常操作的都是元素节点。而childNodes返回的集合中包含了很多意向不到的东西,在实际使用中和容易造成错误。

    所以建议在使用childNodes时,最好通过nodeType将返回集合过滤一遍再进行使用,能够避免很多不必要的问题。

    展开全文
  • 转载原创地址:http://www.cnblogs.com/Jersen/p/4908943.html定义和用法childNodes 属性返回节点的子节点集合,以 NodeList ...浏览器支持所有主流浏览器都支持 childNodes 属性。语法element.childNodes技术细节...

    转载原创地址:http://www.cnblogs.com/Jersen/p/4908943.html

    定义和用法

    childNodes 属性返回节点的子节点集合,以 NodeList 对象。

    提示:您可以使用 length 属性来确定子节点的数量,然后您就能够遍历所有的子节点并提取您需要的信息。

    浏览器支持

    所有主流浏览器都支持 childNodes 属性。

    语法

    element.childNodes

    技术细节

    返回值:NodeList 对象,表示节点集合。
    DOM 版本Core Level 1

     

     

     

    以上是定义来着w3cschool.com

    DOM中节点的类型


    DOM中一共有12中类型。但是我们常用的只有几种。

    首先我们了解下DOM中一般常见的节点类型有哪些?

    1、元素节点

    DOM中的原子都是元素节点,比如<body><table><div>等等。

    如果把Web上的文档比作一座大厦,则元素就是构成这块大厦的砖石。一个文档是由N个元素组成的。元素可包含其他元素。

    2、文本节点

    任意的文字、空格、换行、空白行都算是文本节点。

    3、属性节点

    属性节点,故名思议就是其他节点的属性。例如所有的元素都有title属性,在title='title1'就是一个属性节点。

    4、注释节点

    就是注释了。

     

    childNodes包含了哪些节点?

    由childNodes属性返回的数组中包含着所有类型的节点,所有的属性节点和文本节点也包含在其中。(这一点存在疑问,下面有解释

    事实上,文档里几乎每一样东西都是一个节点,甚至连空格和换行符都会被解释成节点。而且都包含在childNodes属性所返回的数组中。

     

    chidNoeds返回的事node的集合,

    每个node都包含有nodeType属性。

    nodeType取值:

    元素节点:1

    属性节点:2

    文本节点:3

    注释节点:8

     

    测试

    复制代码
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script>
            window.onload = function () {
                console.log("body的childNodes");
                var oItems = document.body.childNodes;
                for (var i = 0; i < oItems.length; i++) {
                    console.log("nodeType:" + oItems[i].nodeType);
                    console.log("nodeName:" + oItems[i].nodeName);
                    console.log("nodeValue:'" + oItems[i].nodeValue + "'");
                }
                console.log("h1的childNodes");
                getChildNodesAtrr(document.getElementsByTagName("h1")[0]);
                console.log("span的childNodes");
                getChildNodesAtrr(document.getElementsByTagName("span")[0]);
                console.log("div的childNodes");
                getChildNodesAtrr(document.getElementsByTagName("div")[0]);
            };
    
            function getChildNodesAtrr(dom) {
                var oItems = dom.childNodes;
                for (var i = 0; i < oItems.length; i++) {
                    console.log("nodeType:" + oItems[i].nodeType);
                    console.log("nodeName:" + oItems[i].nodeName);
                    console.log("nodeValue:'" + oItems[i].nodeValue + "'");
                }
            }
        </script>
    </head>
    <body>
        <h1>h1</h1>
        <span>span</span>
        <!--这是一个注释-->
        123
        <div class="class1" title="title1"></div>
    </body>
    </html>
    复制代码

    最终控制台的输出结果:

    body的childNodes
    nodeType:3
    nodeName:#text
    nodeValue:'
    '
    nodeType:1
    nodeName:H1
    nodeValue:'null'
    nodeType:3
    nodeName:#text
    nodeValue:'
    '
    nodeType:1
    nodeName:SPAN
    nodeValue:'null'
    nodeType:3
    nodeName:#text
    nodeValue:'
    '
    nodeType:8
    nodeName:#comment
    nodeValue:'这是一个注释'
    nodeType:3
    nodeName:#text
    nodeValue:'
    123
    '
    nodeType:1
    nodeName:DIV
    nodeValue:'null'
    nodeType:3
    nodeName:#text
    nodeValue:'


    '
    h1的childNodes
    nodeType:3
    nodeName:#text
    nodeValue:'h1'
    span的childNodes
    nodeType:3
    nodeName:#text
    nodeValue:'span'
    div的childNodes

     

    结果分析

    1、分析结果,其中可以发现

    nodeValue:'
    123
    '

    这个其实是nodeValue:\n123\n,加引号只是为了能看出换行效果。

    这说明空格和换行符确实被当成一个文本接单

    2、元素包含文字时,元素节点本身的nodevalue是null,而它包含的文字成为了一个独立的文本节点,这个文本节点的nodeValue才是我们之前设置的值。上例中的H1和SPAN都是这样的,childNodes的长度为1。而div因为没有内容所以div的childNodes的长度为0。

    3、没有发现有nodeType为2的节点类型

    总结

    在使用原生的childNodes时,包括提供的nodeValue,firstChild(),lastChild()等等。都需要注意其他元素类型的影响,因为我们通常操作的都是元素节点。而childNodes返回的集合中包含了很多意向不到的东西,在实际使用中和容易造成错误。

    所以建议在使用childNodes时,最好通过nodeType将返回集合过滤一遍再进行使用,能够避免很多不必要的问题。

    展开全文
  • print "books[0].childNodes[1].childNodes[0].data:",books[0].childNodes[1].childNodes[0].data #print "books[0].childNodes[1].childNodes[1]:",books[0].childNodes[1].childNodes[1] 解释: #books是获取...
  • 在做DOM操作的练习-下拉列表左右选择时,使用了childNodes属性,不明白为什么select的子节点是7个。 正如绿色字体,不明白为什么会是7个,明明leftSelect下面是6个子节点啊(3个标签+3个文本),后来经过尝试和查阅...
  • js中childNodes易错点、详解定义以及用法 最近学习的时候,我遇到了childNodes的一些问题,我查阅了一些资料,总结一下其定义及用法。在学习childNodes之前,我们需要先了解一下DOM。  DOM:文档对象模型,描绘了一...
  • var block = ev.currentTarget.parentNode.childNodes; for(var i = 0;i<block.length;i++){ block[i].backgroundColor = "#000000"; } 上面这样写是木得效果滴。要加上.style 解决方法: var block = ev....
  • 关于childNodes和children区别一、parentNode和parentElement区别?二、childNodes和children区别1.区别 HTML共同 <ul id="uu"> <li>1</li> <li>2</li> <li id="li">3<...
  • 元素子节点 childNodes

    2020-08-26 18:09:03
    元素的 childNodes 包含了它的所有子节点。 不同浏览器看待这些节点方面存在显著的不同: <ul id="list"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul&...
  • 关于childNodes的删除

    2019-09-27 20:17:42
    在使用childNodes时,发现需要删除的元素多于1时,会出现无法全部删除的情况。谷歌以后发现,该属性返回的子节点集合是实时更新的,也就是说,在for循环中,当删除第一个子节点之后,第二次删除的是原子节点集合中的...
  • 获取子元素节点(children,childNodes)

    千次阅读 2019-09-10 20:29:01
    在js中获取元素节点有DOM对应的方法如getElementsByTagName()等等。。对于获取子元素还有另外一种获取方法ChildNodes 不过ChidNodes在高级浏览器除(IE6-8)里...
  • childNodes和nodeValue详解

    千次阅读 2018-04-26 17:28:03
    childNodes childNodes的w3school定义为 childNodes 属性返回节点的子节点集合,以 NodeList 对象。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&...
  • console.log(oUl.childNodes); 由图可见这是已经拿到了的一个数组, 长度为7, 但是在我编写 console.log(oUl.childNodes[0]); 的时候就变成undefined的了, 并且childNodes.length也是0 所以我就使用了 this...
  • Firefox对childNodes处理的一个BUG childNodesFirefox在处理childNodes没有过滤换行与空格。所以在初次使用的时候,得到效果不是预期的效果。 HTML 代码如下: ”tbtn” ID> ”curr” id u201dtabap3_btn_0″ ...
  • 今天是准备面试的第七天,js是由ECMAScript、文档对象模型(DOM)和浏览器对象模型(BOM)组成,我们今天就了解下与DOM有关的常用接口parentNode,parentElement,childNodes,children。 parentNode,parentElement,...
  • function del_ff(elem) { var elem_child = elem.childNodes; for (var i = 0; i < elem_child.length; i++) { if (elem_child[i].nodeName == "#text" && !/\s/.test(elem_child....
  • parentNode和parentElement功能一样,childNodes和children功能一样。但是parentNode和childNodes是符合W3C标准的,可以说比较通用。而另外两个只是IE支持,不是标准,Firefox就不支持 ————————————...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 63,638
精华内容 25,455
关键字:

childnodes