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

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

请君莫问

2016-04-08 16:33

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>

写回答 关注

2回答

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

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

  • 天梦梦天
    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>


    请君莫问

    把代码中间的换行符删掉对吧。不过这样代码不美观,用while(nodeType!=1)来判断输出的话应该可以解决输出差异化问题。不过还是谢谢

    2016-04-12 16:28:02

    共 1 条回复 >

JavaScript进阶篇

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

468061 学习 · 21891 问题

查看课程

相似问题