当前位置: 开发笔记 > 编程语言 > 正文

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

作者：黄雅萱介芳 | 来源：互联网 | 2023-10-10 19:26

以一段简单的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 的意思是判断子节点是不是文本节点

推荐阅读

default
利用树莓派畅享落网电台音乐体验

最近重新拾起了闲置已久的树莓派，这台小巧的开发板已经沉寂了半年多。上个月闲暇时间较多，我决定将其重新启用。恰逢落网电台进行了改版，回忆起之前在树莓派论坛上看到有人用它来播放豆瓣音乐，便萌生了同样的想法。通过一番调试，终于实现了在树莓派上流畅播放落网电台音乐的功能，带来了全新的音乐享受体验。 ... [详细]

蜡笔小新 2024-11-05 09:20:37
int
计算二叉树的直径：深入解析与优化算法

二叉树的直径是指树中任意两个叶节点之间最长路径上的节点数量。本文深入解析了计算二叉树直径的算法，并提出了一种优化方法，以提高计算效率和准确性。通过详细的案例分析和性能对比，展示了该优化算法在实际应用中的优势。 ... [详细]

蜡笔小新 2024-11-05 02:21:46
int
深入理解 gRPC：从基础到进阶的全面指南

本文全面解析了 gRPC 的基础知识与高级应用，从 helloworld.proto 文件入手，详细阐述了如何定义服务接口。例如，`Greeter` 服务中的 `SayHello` 方法，该方法在客户端和服务器端的消息交互中起到了关键作用。通过实例代码，读者可以深入了解 gRPC 的工作原理及其在实际项目中的应用。 ... [详细]

蜡笔小新 2024-11-05 01:25:09
int
利用 VTK Glyph3D 实现三维数据的符号化可视化

vtkGlyph3D 是一种强大的符号化可视化工具，能够将三维数据集中的每个点用预定义的几何图形（如球体或箭头）进行表示。该工具不仅支持自定义符号的方向和缩放比例，还能够在复杂的数据场中突出显示关键特征，从而提高数据的可解释性和可视化效果。通过这种方式，用户可以更直观地理解和分析三维数据集中的重要信息。 ... [详细]

蜡笔小新 2024-11-04 21:48:22
ip
MongoVUE基础操作指南：轻松上手数据库管理

本文介绍了MongoVUE的基础操作，旨在帮助用户轻松掌握数据库管理技巧。MongoVUE是一款功能强大的MongoDB客户端工具，虽然需要注册，但其用户友好的界面和丰富的功能使其成为许多开发者的首选。文中详细解释了安装步骤、基本配置以及常见操作方法，并对一些常见的问题进行了修正和补充，确保用户能够快速上手并高效使用MongoVUE进行数据库管理。 ... [详细]

蜡笔小新 2024-11-04 19:52:38
int
Python网络编程中的多线程应用与优化

在Python网络编程中，多线程技术的应用与优化是提升系统性能的关键。线程作为操作系统调度的基本单位，其主要功能是在进程内共享内存空间和资源，实现并行处理任务。当一个进程启动时，操作系统会为其分配内存空间，加载必要的资源和数据，并调度CPU进行执行。每个进程都拥有独立的地址空间，而线程则在此基础上进一步细化了任务的并行处理能力。通过合理设计和优化多线程程序，可以显著提高网络应用的响应速度和处理效率。 ... [详细]

蜡笔小新 2024-11-04 19:37:38
include
HDU1176：免费馅饼问题的动态规划解法分析

题目“免费馅饼”通过动态规划方法进行了解析。该问题的时间限制为 Java 2000ms 和其他语言 1000ms，内存限制为 Java 65536K 和其他语言 32768K。本文详细探讨了如何利用动态规划算法高效求解此问题，并对算法的时间复杂度和空间复杂度进行了深入分析。此外，还提供了具体的实现步骤和代码示例，帮助读者更好地理解和应用这一方法。 ... [详细]

蜡笔小新 2024-11-04 19:02:22
include
Hibernate实战笔记14：深入解析反向工程技术

在处理遗留数据库的映射时，反向工程是一个重要的初始步骤。由于实体模式已经在数据库系统中存在，Hibernate 提供了自动化工具来简化这一过程，帮助开发人员快速生成持久化类和映射文件。通过反向工程，可以显著提高开发效率并减少手动配置的错误。此外，该工具还支持对现有数据库结构进行分析，自动生成符合 Hibernate 规范的配置文件，从而加速项目的启动和开发周期。 ... [详细]

蜡笔小新 2024-11-04 18:29:37
list
遍历集合过程中应避免执行修改操作以防止引发ConcurrentModificationException异常

在遍历集合的过程中，若需根据特定条件对集合进行修改操作，如添加或删除元素，应特别注意避免引发 `ConcurrentModificationException` 异常。例如，在当前场景中，当集合中的对象ID与另一个集合中的对象ID不匹配时，需要向集合中添加新元素。为了避免这一异常，建议使用迭代器的 `remove` 方法或采用线程安全的集合类型，如 `CopyOnWriteArrayList`，以确保操作的安全性和一致性。 ... [详细]

蜡笔小新 2024-11-04 16:10:45
ip
如何在Mac上构建高效的本地服务器环境

在Mac上构建高效的本地服务器环境，首先需要了解基本步骤：1. 配置目录基础；2. 启动Apache服务；3. 添加自定义文档至本地服务器；4. 查看自定义效果。此外，还可以通过手机或其他电脑访问本机服务器，以确保跨设备的兼容性和调试效果。Mac系统自带的Apache服务为本地开发提供了便捷的工具，本文将详细介绍每个步骤的具体操作方法。 ... [详细]

蜡笔小新 2024-11-04 15:46:21
ip
CAS 机制下的无锁队列设计与实现

CAS 机制下的无锁队列设计与实现 ... [详细]

蜡笔小新 2024-11-04 15:38:05
ip
JavaScript 中变量前的加号（+）符号代表什么含义及作用解析

在 JavaScript 中，变量前的加号（+）符号用于将变量转换为数字类型。例如，在 `if (+valueDistance) {}` 语句中，加号的作用类似于 `Number(valueDistance)`，会根据 Number 函数的规则将变量转换为数值或 NaN。这种用法常用于确保变量在进行数值运算时不会出现类型错误。 ... [详细]

蜡笔小新 2024-11-04 15:30:37
ip
【Linux进阶指南】第一阶段第三课：体验与部署Ubuntu系统

在正式踏上Linux学习之旅之前，本课程将引导你深入体验和部署Ubuntu系统。通过详细的操作步骤和实践演练，你将掌握Ubuntu的基本安装、配置及常用命令，为后续的进阶学习打下坚实的基础。此外，课程还将介绍如何解决常见问题和优化系统性能，帮助你更加高效地使用Ubuntu。 ... [详细]

蜡笔小新 2024-11-04 14:41:20
get
通过 NuGet 获取最新版本的 Rafy 框架及其详细文档

为了帮助开发者更便捷地使用Rafy领域实体框架，我们已将最新版的Rafy框架程序集上传至nuget.org，并同步发布了最新版本的Rafy SDK至Visual Studio。此外，我们还提供了详尽的文档和示例，以确保开发者能够快速上手并充分利用该框架的强大功能。 ... [详细]

蜡笔小新 2024-11-04 14:05:16
ip
虚拟机网络设置与数据库远程连接优化指南

本文针对个人计算机上虚拟机网络配置与数据库远程连接的问题，提供了一套详细的优化指南。在探讨远程数据库访问前，需确保网络配置正确，特别是桥接模式的设置。通过合理的网络配置，可以有效解决因虚拟机或网络问题导致的连接失败，提升远程访问的稳定性和效率。 ... [详细]

蜡笔小新 2024-11-04 11:43:08

黄雅萱介芳

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章