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
    " "

    (完)

  • 相关阅读:
    通过Powershell开启RDP
    映射网络驱动器
    简易图书管理系统
    使用IDEA快速创建Spring Boot项目
    oracle11g安装步骤详细图文教程
    使用JDOM创建XML文档
    使用JDOM解析XML文档
    HTML+CSS之金立官网部分实现
    webstorm2019安装与使用详细教程
    第二章 JavaScript基础指令
  • 原文地址:https://www.cnblogs.com/zhangbao/p/5881769.html
Copyright © 2011-2022 走看看