问答详情
源自：9-8 访问子节点childNodes

为什么第一个节点的nodeValue值JavaScript输出来了，后面第三个却是空格呢

http://img.mukewang.com/57076c7700015d2a08520409.jpg源码如下

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div>
  javascript2  
  <p>javascript</p>
  <div>jQuery</div>
  <h5>PHP</h5>
</div>
<script type="text/javascript">
    var nodeDIV = document.getElementsByTagName("DIV");
   
      var x = nodeDIV[0].childNodes;
     for(var i=0;i<nodeDIV[0].childNodes.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>

提问者：请君莫问 2016-04-08 16:33

个回答

  • 笑猪猪
    2016-04-08 21:17:31
    已采纳

    不同浏览器（IE，Firefox，chrome等）得出的节点数不一样，以上代码IE会输出3个节点(p,div,h5)，其他浏览器有七个(将两个标签间的空白文档算作子节点共四个）。1输出的是第一行的文本文档值Javascript。所以3、5的value没有值是因为她们是空白文档。

    0
  • 天梦梦天
    2016-04-08 22:47:56

    改成下面的样子就好了


    <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>无标题文档</title>

    </head>

    <body>

    <div>javascript2<p>javascript</p><div>jQuery</div><h5>PHP</h5></div>

    <script type="text/javascript">

        var nodeDIV = document.getElementsByTagName("DIV");

       

          var x = nodeDIV[0].childNodes;

         for(var i=0;i<nodeDIV[0].childNodes.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>


    0