zoukankan      html  css  js  c++  java
  • 使用JavaScript访问子节点方法elementNode.childNodes时,需要注意的地方

    有这样一个HTML结构

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

    使用JavaScript访问它的子节点

    var children = document.getElementsByTagName('div')[0].childNodes;
    
    children.length // 7

    正如你看到的,children.length的结果不是4,而是7!为什么呢?

    因为浏览器会把节点之间的空白符当作文本结点处理

    <div>
      javascript  
      <p>javascript</p> <!-- ←空白结点 -->
      <div>jQuery</div> <!-- ←空白结点 -->
      <h5>PHP</h5> <!-- ←空白结点 -->
    </div>

    4个可见结点 + 3个看不出来的空白结点 = 7个结点

    这可以通过用JavaScript判断结点类型(元素的nodeType值为1,文本的nodeType值为3)的方式来进行验证

    var children = document.getElementsByTagName('div')[0].childNodes;
    for (var i = 0; i < children.length; i++) {
        if (children[i].nodeType === 1) {        // 如果是元素结点 
            document.write(children[i].innerText + '<br>');
        } else if (children[i].nodeType === 3) { // 如果是文本结点
            document.write(' "' + children[i].nodeValue +'"<br>');
        }    
    }

    页面输出的结果是这样的

    " javascript "
    javascript
    " "
    jQuery
    " "
    PHP
    " "

    (完)

  • 相关阅读:
    "ping: unknown host www.baidu.com"问题解决方式
    hive分区表中表字段操作
    hive常用函数
    spark书籍视频推荐
    pandas筛选排序
    pandas常用函数
    hive字符串函数
    Centos镜像下载
    记录操作 子查询 三表联查
    .net Excel转换DataSet
  • 原文地址:https://www.cnblogs.com/zhangbao/p/5881769.html
Copyright © 2011-2022 走看看