热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

不同浏览器中childNodes获取子节点个数

以一段简单的HTML代码为例这是div01这是div02childNodes:获取某节点下的所有直接子节点varnodedocument.getElementById(div)

以一段简单的HTML代码为例


这是div01

这是div02


childNodes:获取某节点下的所有直接子节点

var node = document.getElementById("div").childNodes; //获取div节点下的所有子节点

在这个时候,如果你alert一下,从alert出的值中,你就会发现出问题了。
alert(node.length);
如果你用的浏览器是IE,而且IE<9,那得到的值为2
如果你用的浏览器是谷歌,FF,IE>=9,那得到的值为5

造成这种差异的原因是IE(IE<9)和其他浏览器处理空白文本节点的机制不一样
FF,谷歌,IE>=9浏览器会将各个节点之间的空白也算作一个节点,也就是说最外层div和div1之间存在一个空白节点,但是IE(IE<9)不会。

那么怎样做到各个浏览器的兼容呢,我这里有两种方法。

第一种方法是改变源码的书写格式

>
这是div01>
这是div02>

经测试,所有alert的值都是2。但是这种写法看起来很别扭,并且写起来也很麻烦。要是很多很多的代码标签也不易于维护。

第二种方法是在调用childNodes属性之前先将空格删除。下面是一个删除空格的方法:

for (var i = 0; i //如果是文本节点,并且值为空,则删除该节点
if (node[i].nodeType == 3 && /\s/.test(node[i].nodeValue)) {
node[i].parentNode.removeChild(node[i]);
}
}
alert(node.length);
这样也能达到同样的效果,而且html代码格式也不需要改变。

PS:关于这个for循环的本质就是遍历所有的子节点,如果是文本节点,并且值为空,则删除该节点

node[i].nodeType == 3 的意思是判断子节点是不是文本节点


推荐阅读
  • 探讨 HDU 1536 题目,即 S-Nim 游戏的博弈策略。通过 SG 函数分析游戏胜负的关键,并介绍如何编程实现解决方案。 ... [详细]
  • Python自动化测试入门:Selenium环境搭建
    本文详细介绍如何在Python环境中安装和配置Selenium,包括开发工具PyCharm的安装、Python环境的设置以及Selenium包的安装方法。此外,还提供了编写和运行第一个自动化测试脚本的步骤。 ... [详细]
  • 气象对比分析
    本文探讨了不同地区和时间段的天气模式,通过详细的图表和数据分析,揭示了气候变化的趋势及其对环境和社会的影响。 ... [详细]
  • 深入解析动态代理模式:23种设计模式之三
    在设计模式中,动态代理模式是应用最为广泛的一种代理模式。它允许我们在运行时动态创建代理对象,并在调用方法时进行增强处理。本文将详细介绍动态代理的实现机制及其应用场景。 ... [详细]
  • 本文详细介绍如何在 iOS 7 环境下申请苹果开发者账号,涵盖从访问开发者网站到最终激活账号的完整流程。包括选择个人或企业账号类型、付款方式及注意事项等。 ... [详细]
  • 本文介绍了如何通过Java代码计算一个整数的位数,并展示了多个基础编程示例,包括求和、平均分计算、条件判断等。 ... [详细]
  • 本题要求在一组数中反复取出两个数相加,并将结果放回数组中,最终求出最小的总加法代价。这是一个经典的哈夫曼编码问题,利用贪心算法可以有效地解决。 ... [详细]
  • 本篇文章介绍如何将两个分别表示整数的链表进行相加,并生成一个新的链表。每个链表节点包含0到9的数值,如9-3-7和6-3相加得到1-0-0-0。通过反向处理链表、逐位相加并处理进位,最终再将结果链表反向,即可完成计算。 ... [详细]
  • 深入剖析JVM垃圾回收机制
    本文详细探讨了Java虚拟机(JVM)中的垃圾回收机制,包括其意义、对象判定方法、引用类型、常见垃圾收集算法以及各种垃圾收集器的特点和工作原理。通过理解这些内容,开发人员可以更好地优化内存管理和程序性能。 ... [详细]
  • Vue 开发与调试工具指南
    本文介绍了如何使用 Vue 调试工具,包括克隆仓库、安装依赖包、构建项目以及在 Chrome 浏览器中加载扩展的详细步骤。 ... [详细]
  • Java中的基本数据类型与包装类解析
    本文探讨了Java编程语言中的8种基本数据类型及其对应的包装类。通过分析这些数据类型的特性和使用场景,以及自动拆装箱机制的实现原理,帮助开发者更好地理解和应用这些概念。 ... [详细]
  • 本文详细探讨了Java中的包管理机制,包括默认包的使用和自定义包名的创建方法。通过实际操作,帮助开发者更好地理解和应用包管理。 ... [详细]
  • 本文详细介绍了 Android 开发中 layout_gravity 属性的使用方法及其在不同布局下的效果,旨在帮助开发者更好地理解和利用这一属性来精确控制视图的布局。 ... [详细]
  • 编写css让div2在div1的右下角? ... [详细]
  • Python notes
    6.1.1.执行模块当你用下面的方式运行一个Python模块pythonfibo.py模块中的代码将会被执行,就像导入它一样,不过此时__name__被设置为__main__。 ... [详细]
author-avatar
黄雅萱介芳
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有