var temp=document.getElementsByTagName("div")[0].childNodes;

来源:9-8 访问子节点childNodes

妖灵262

2016-11-12 17:10

var temp=document.getElementsByTagName("div")[0].childNodes;

这里的【0】怎么解释?

写回答 关注

5回答

  • 水墨墨心
    2016-11-15 10:25:21
    已采纳
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    </head>
    <body>
    <div>
      javascript  
      <p>javascript</p>
      <div>111</div>
      <h5>PHP</h5>
    </div>
    <div>
      哈哈哈  
      <p>javascript</p>
      <div>333</div>
      <h5>PHP</h5>
    </div>
    <div>
      哼哼  
      <p>javascript</p>
      <div>555</div>
      <h5>PHP</h5>
    </div>
    <script type="text/javascript">
     var x=document.getElementsByTagName("div")[3].childNodes;
     for(var i=0;i<x.length;i++)
     {
        document.write("第"+(i+1)+"个节点的值是:"+x[i].nodeValue+"<br  />"); 
        document.write("第"+(i+1)+"个节点的名称是:"+x[i].nodeName+"<br  />"); 
        document.write("第"+(i+1)+"个节点的属性是:"+x[i].nodeType+"<br  />");
        document.write("<br  />");
     }
    </script>
    </body>
    </html>

    参考以上代码,[3]选择的是第4个div,即 <div>333</div>。

    妖灵262

    非常感谢!

    2016-11-21 08:38:46

    共 1 条回复 >

  • qq_火兹_03896205
    2016-12-28 21:59:40

    我也是这样认为的,但我有个问题:当[0]变成[3]时,即<div>333</div>那么后面的.childNodes究竟访问的是什么呢?专指<div>333</div>这个节点,还是6个div节点,我运行的结果是

    第1个节点的值是:333

    第1个节点的名称是:#text

    第1个节点的属性是:3

    所以我觉得专指<div>333</div>这个节点,那么问题又来了 ,为啥还要加for的遍历呢?for(var i=0;i<x.length;i++),,,,什么才叫做子节点呢?麻烦解答一下,感激不尽!

  • 慕村1994845
    2016-12-10 22:20:38

    这里有两个div;所以用到了索引,找到我们想要的div

  • 水墨墨心
    2016-11-14 21:44:14

    这里的【0】是指选择第一个div,你可以尝试下在html中多些几个平行的div结构,如此,下面代码:

    var temp=document.getElementsByTagName("div")[1].childNodes;

    这里【0】变成了【1】,就是针对第二个div来进行相应的操作了(访问第二个div的字节点)。

    水墨墨心

    不好意思,回答错误了。

    2016-11-14 21:47:44

    共 1 条回复 >

  • 慕粉4013878
    2016-11-12 21:52:35

    0表示是第一个子节点,因为一组数的开始第一项是从0开始,比如一个含有四个节点的元素x,那么它的每个子节点的顺序是x[0],x[1],x[2],x[3]

JavaScript进阶篇

本课程从如何插入JS代码开始,带您进入网页动态交互世界

468192 学习 · 21891 问题

查看课程

相似问题