DOM遍历元素节点时忽略空格文本节点的方法

最新推荐文章于 2021-06-19 02:48:41 发布
最新推荐文章于 2021-06-19 02:48:41 发布
阅读量2.1k 收藏
点赞数
分类专栏： Web Design 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jarniyy/article/details/62422448
版权

元素节点之间的空格在浏览器中会被解释为文本节点给父节点操作子节点方法带来困扰，DOM中扩展了方法解决

A.childElementCount--->返回子元素(不包括文本节点和注释)的个数

B.firstElementChild--->指向第一个子元素(不包括文本节点和注释)

C.lastElementChild--->指向最后一个子元素(不包括文本节点和注释)

D.previousElementSibling--->指向前一个同辈元素(不包括文本节点和注释)

E.nextElementSibling--->指向前一个同辈元素(不包括文本节点和注释)

F.children--->返回子元素(不包括文本节点和注释)的HTMLCollection集合

ashui811
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript遍历DOM元素的常见方式示例
12-12
对于元素之间的空格，IE9以及之前的版本不会返回文本节点，，其他的浏览器会返回文本节点，所以我们在使用firstChild,lastChild时会导致行为不一致。 DOM中为元素新增了下面几个属性： childElementCount：返回子...
html仅空白的文本节点,Chrome忽略空白文本节点
weixin_42638139的博客
07-09 265
1、node[1].previousSibling.innerHTML：这里获得的是第一个后面的空白符(nodeType=3,innerHTML=undefined)，也即node[1]的上一个兄弟元素。2、若想跳过空白文本：function get_previousSibling(n){var x=n.previousSibling;//首先取得n的上一个兄弟xwhile(x&&...
JS DOM 中的空白节点的过滤
超越梦想的专栏
08-07 6488
看如下HTML代码 DOM Test <!-- var td = document.getElementById("TEST"); alert(td.childNodes.length); //结果为4 -->         由于DOM中，空白也是作为一个文本节点，而两个input元素后面都有空白（回车、空格、制表符），所以结果为4
javascript之解决dom中存在的空白节点问题
zz410675629的专栏
08-14 4243
下面有一段html文档 Introduction to the DOM There are a number of reasons why the DOM is awesome, here are some: It can be found everywhere. It's easy to use. It can
js处理去掉富文本编辑的html，样式，只显示纯文字内容，以供列表页使用
热门推荐
昔人'
01-02 1万+
var description = ' 1.国际保险经纪行业收入分析 2010年全球保险经纪行业市场规模为437.56亿美元，2015年增长至581.3亿美元。 2010-2015年国际保险经纪行业市场规模：亿美元 2.国际保险经纪行业并购分析 保险经纪公司并购较为频繁，2011年并购数量为351件，且呈现增长趋势。一股保险行业的并购风潮正席卷全球各个市场。如意大利投资集团Exor收购
javascript之解决DOM中存在的空白节点问题
weixin_34364135的博客
11-29 301
[html]view plaincopy<body><h1>IntroductiontotheDOM</h1><pclass="test">ThereareanumberofreasonswhytheDOMisawesome,herearesome:</p>...
js Element Traversal规范中的元素遍历方法
12-10
对于元素间的空格，在IE9之前，都不会返回文档节点，其它的所有浏览器都会返回文档节点。 为了兼容浏览器这间的差异，又不更改已有的DOM 标准，所以有了 Element Traversal 规范。 这个规范为 元素增加了 5 个 属性 ...
九宫格案列.html对应的js代码
02-13
九宫格的js dom操作，点击按钮，让其变成3列，4列，5列九宫格布局，js里面封装一了一个可以常用的js放的方法，只需传入九宫格需要的间距，列数，还有需要操作的盒子box，，将按钮的节点遍历出来，在节点内可以调用。
JQuery权威指南源代码
04-01
动态创建节点元素 动态插入节点方法 动态插入节点方法 复制元素节点 替换元素节点 包裹元素节点 遍历元素 删除元素 数据管理 第4章 事件中的冒泡现象 bind方法绑定事件 映射方式绑定不同的事件 切换事件...
关于DOM节点操作
CJHJK的博客
03-15 200
关于DOM节点的操作 DOM就是我们html中一个个节点构成的，我们的标签、文本内容、注释、包括空格都是节点 DOM的节点也分三种： 元素节点、文本节点、属性节点 那么关于关于节点的几个操作有哪些呢？ 创建节点 document.createElement(元素标签) //创建元素节点（创建标签） document.createAttribute(元素属性) //创建属性节点（创建...
JavaScript之DOM节点类型 、遍历节点、节点的属性以及节点方法
M_DREAMER的博客
06-11 1万+
先介绍一下节点类型都有哪些：一、节点类型节点类型    属性nodeType返回值    元素节点1属性节点2文本节点3注释节点（comment）8document9DocumentFragment11所以一般我们获取节点类型用  nodeType二、遍历节点树这种遍历可以遍历  文本类节点、注释节点、元素节点等。  任何浏览器都好使。&lt;div &gt; &lt;strong&gt;...
仅空白的文本节点解决
u012148262的博客
02-01 2965
今天用em做点的时候，换行产生了，仅空白的文本节点。 解决方法： 1.margin-left = -5； 2.代码不要换行。
html节点判断,关于dom判断空白节点
weixin_30334411的博客
06-19 199
nextSiblingjavascriptjqueryhtmlcss3phpjavafunction get_nextSibling(n){var x=n.nextSibling;while (x && x.nodeType!=1){x=x.nextSibling;}return x;}var x=document.getElementsByTagName("li")[0];doc...
DOM解析xml文档节点下的所有子节点，怎么样只输出标签名而没有<#text>标签
Hi,印象钟情
10-31 4853
XML文档： 现在我要遍历根节点matchineroot节点下所有子节点并获得节点名，如果直接用DOM遍历节点的方法输出的节点名不仅包含文档中所有子节点名，还会输出很多，事实上node instanceof Text的场合：输出是：#text，node instanceof Element的场合：输出是：标签
DOM 某节点的添加或移除
追梦者的博客
07-26 424
节点移除 HTML DOM中 removechild()方法： removechild()方法可以从子节点列表中删除某个节点。如果删除成功，便可以返回被删除的节点，如果删除失败，则返回NULL。 参数：node 类型：节点对象 语法：node.removeChild(node) 返回值类型：节点对象 节点添加 HTML DOM中 appendChild()方法： appendChild() 方法可以向某一节点的子节点列表的末尾处添加新的子节点。 注意：如果文档树中已经存在了 newchild，它将从文档树中
JavaScript去除空白节点和忽略空白节点
weixin_30646505的博客
05-12 124
移除空白节点 function removeWhiteNode(node) { for (var i = 0; i < node.length; i ++) { if (node[i].nodeType === 3 && /^\s+$/.test(node[i].nodeValue)) { node[i].parentNode.removeChild(node[...
遍历同辈节点的方法_JQuery遍历DOM节点的方法
最新发布
05-26
在 jQuery 中，可以使用以下方法来遍历同辈节点： 1. `next()`：返回当前元素的下一个同辈元素。 2. `prev()`：返回当前元素的上一个同辈元素。 3. `nextAll()`：返回当前元素之后所有的同辈元素。 4. `prevAll()`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值