使用childNodes时如何解决返回nodelist中空白文本节点的问题

最新推荐文章于 2023-04-11 15:37:16 发布

RebootTang

最新推荐文章于 2023-04-11 15:37:16 发布

阅读量2.2k

点赞数

文章标签： html dom 空节点正则表达式

本文链接：https://blog.csdn.net/applyTang/article/details/92853594

版权

在处理DOM时，使用childNodes会包含空的文本节点。本文介绍了一种通过正则表达式删除这些空节点的方法，以确保仅获取所需元素。通过检查nodeName和nodeValue，可以确定并移除空白文本节点，同时介绍了removeChild()方法的工作原理。

摘要由CSDN通过智能技术生成

在使用childNodes属性来返回节点的全部子节点的时候，childNodes会将子节点之间的空格看做一个空的文本节点一并返回。
html代码如下：

<div id="content">
     <ul>
         <li><span>HTML</span></li>
         <li><span>JS</span></li>
         <li>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

RebootTang

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Dom（3）——创建文本节点、元素节点、appendChild()、childNodes及时更新、querySelector、删除.remove()与.removeChild()、克隆

weixin_48796690的博客

10-23

475

Web API之dom（3）——创建文本节点、元素节点、appendChild()、childNodes及时更新、querySelector、删除.remove()与.removeChild()、克隆

JS childNodes属性和想象中不一样，空白节点的处理

人在江湖

06-20

2379

关于childNodes属性 childNodes返回的是所有的孩子节点，但是当我实际尝试的时候发现，孩子节点的长度并不是我想要的那样，于是我便展开了探索示例代码： html 部分 &lt;ul id="imagegallery"&gt; &lt;li&gt;&lt;a id="picture1" href="im

2 条评论您还未登录，请先登录后发表或查看评论

javascript DOM中的childNode问题

ljh_shuai的博客

12-05

2936

javascript DOM中的childNode问题childNodes到底怎么计算？如何准确找到想要的那个childNode？在看书时觉得childNodes就那么回事，可是真正用起来发现根本不知道如何准确找到想要的那个childNode。firstChild和lastChild也经常不知道是哪个。首先说一下childNodes属性，返回子节点列表，这里子节点不包括子子节点，firstChi

运用 children 获取节点子元素解决文本节点阻碍

weixin_44542089的博客

01-19

592

在刚开始学习获取元素节点和节点子元素时用的是这几种获取方法：childNodes、parentNode、firstChild和lastChild . 在执行之后确发现,这几个获取节点和子元素的属性值都有一点坏习惯,导致获取到的值出了些问题：遇到的问题： 1.childNodes会将标签节点间的空格用test文本节点代替,因为这个问题,打印出来的子元素节点集合里面有许多的text文本节点,看着...

NodeList & null

weixin_30598225的博客

02-26

122

NodeList& null querySelectorAll & querySelector let arr = document.querySelectorAll(`[data-btn="common_handle_prev"]`); // NodeList[] typeof(arr); // "object" let item = document....

IE与FireFox中的childNodes区别

09-05

`getElementsByTagName` 用于根据标签名获取元素的子节点，而`childNodes` 返回一个包含所有子节点的NodeList，包括元素节点、文本节点、注释节点等。在某些情况下，特别是需要处理复杂DOM结构时，`childNodes` 通常...

[Javascript]：DOM概念、DOM操作元素、属性、文本节点详解

我只是个程序员。

09-19

2754

DOM全称是文档对象模型，是专门用于操作HTML/XML文档的API（应用程序接口）。DOM将文档看作一颗树，其中的每个成分都是对象，这些对象都看作是节点。可以将文档的一切都理解成节点对象。 DOM的组成部分介绍：文档、对象和模型 Document(文档)：当用浏览器打开一个页面文档时，这个文档就会被转成document对象，然后就可以调用了。后面会提到该对象的用法。 Object(对象)：DOM中的每个节点都是对象，通过对象的属性和方法就能够操作节点。 Model(模型)：DOM将整个文档

JavaScript操作DOM元素的childNodes和children区别

10-24

如果使用childNodes，将会获取到一个包含元素节点、文本节点和注释节点的NodeList集合。 2. children属性：与childNodes不同的是，children属性仅返回指定元素的所有元素节点（ElementNode）。也就是说，使用...

js如何获取兄弟、父类等节点

10-26

这可能会导致与预期不符的结果，特别是在文本节点中存在空白符时。如果想要获取所有元素类型的子节点，可以使用`children`属性，它仅包含元素类型的子节点： ```javascript var childElements = s.children; ``` ...

childNodes详解

diukuijian4440的博客

10-25

1746

定义和用法 childNodes 属性返回节点的子节点集合，以 NodeList 对象。提示：您可以使用 length 属性来确定子节点的数量，然后您就能够遍历所有的子节点并提取您需要的信息。浏览器支持所有主流浏览器都支持 childNodes 属性。语法 element.childNodes 技术细节返回值： NodeList 对象，...

childNodes children

nibaohua的专栏

09-08

574

1，childNodes 属性，标准的，它返回指定元素的子元素集合，包括html节点，所有属性，文本。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。 有些人错误的使用()去取该集合元素，下表列出各浏览器对childNodes(i)的支持情况： IE6/7/8Firefox3.5Safari4Chrome4Opera10childNodes(i)支持不支持支持支持支持 <br

JS中的元素节点

weixin_47267628的博客

09-14

812

会将空格及空行也当成子节点【当成文本】，所以会造成一些麻烦，解决方案是使用。表示当前节点的所有子节点，就是返回所有子节点。属性会获取包括文本节点在呢的所有节点。选择器使用一样，这两个方法非常重要。这个属性不会获取到空文本节点的。

QT 读写xml

最新发布

QtCompany的博客

04-11

1238

pro文件里面添加QT+=xml，操作xml的头文件包含include 或include 。title元素为book元素的子元素，Harry Potter为其文本。如上第一行为xml文档的说明，version和enconding分别代表当前xml文档的版本和编码方式。xml元素：XML 元素指的是从（且包括）开始标签直到（且包括）结束标签的部分。如bookstore元素为根元素、book元素为bookstore的子元素，子元素、文本、属性。

DOM中的节点、事件操作

Darlingmi的博客

06-10

465

一、节点层级 (1)获取子节点、子元素的方式 A、childNodes属性：返回当前节点的所有子节点的集合(NodeList),返回的节点包括元素、文本和其他节点。 B、children属性：只返回子元素节点的集合(HTMLCollection)。 C、firstChild属性：返回第一个子节点(元素节点或文本节点)。 D、firstElementChild属性：返回第一个子元素。 E、lastChild属性：返回最后一个子节点(元素节点或文本节点)。 F、lastElementChild属性：返回最后一个

js foreach childNodes删除text结点

lxyxhy的博客

09-22

323

关于childNodes 删除其中的text结点 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> &lt

Xerces -C++ 使用

weixin_30682127的博客

12-08

457

　　最近做项目需要用c++解析xml文件，在c#下用5分钟搞定的活我整整扣了2天。 c++中解析xml文件的方法有很多，我选择Xerces -C++，主要是开源，也比较好用，但是由于以前没有接触过，也费了一番心思，废话不多说，进入正题。 http://www.yolinux.com/TUTORIALS/XML-Xerces-C.htmllinux中的安装使用 http://xerc...

JavaScript DOM操作：元素、属性和文本节点详解

"本文主要探讨JavaScript中的DOM节点，包括元素节点、属性节点和文本节点，旨在帮助读者理解和掌握如何在JavaScript中操作HTML元素及其属性。" 在JavaScript中，DOM（Document Object Model）是一种用于表示HTML或...