javascript中的nextSibling陷(da)阱(keng)

最新推荐文章于 2022-11-12 10:25:59 发布
最新推荐文章于 2022-11-12 10:25:59 发布
阅读量765 收藏
点赞数 1
分类专栏： java学习 web学习 html学习 javascript学习 文章标签： html 学习 日志 javascript jave web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/betofly/article/details/25005647
版权

今天写js的时候遇到了一个陷(da)阱(keng)

关于HTML/XML节点的问题

据说在IE中nextSibling不会返回文本节点，而chrome或者firefox等会返回文本节点……

这个我的工作带来了很严重的问题

在网上搜到了很多处理方法，都是给js添加各种封装的函数……

后来我发现有个nextElementSibling方法……

这个不会返回文本节点，不管是什么浏览器……

╮(╯▽╰)╭

真是大坑

同样，对于fistChild有对应的firstElementChild。其他的选择节点的函数应该也有对应的Element方法，不过还没试过……

然后我突然发现了个fistChildElement()……⊙﹏⊙b汗，我猜这是c++里面的……

╮(╯▽╰)╭

betofly
关注
专栏目录
一文搞定JS中的DOM基础与进阶
记录博主学到的点滴
06-22 5051
1.DOM简介 2.获取元素 3.创建元素 4.插入元素 5.删除元素 6.复制元素 7.替换元素 8.HTML属性操作(对象属性) 9.HTML属性操作(对象方法) 10.CSS属性操作 11.DOM遍历 12.innerHTML和innerText 1.DOM简介 节点和元素的概念解析: 每一个元素是一个节点，每一个节点看成一个对象 我们操作元素的时候实际上是把元素看成一个对象，然后对这个对象的属性和方法进行相关的操作 节点是包含元素的 每一个元素是一个节点，这个节点称为元素.
原生js中nextSibling和nextElementSibling的坑
码赛客1024的博客
04-29 2525
作者：拓海老师，公众号：拓海老师 一直以来js的随性让初学者蛋疼菊紧，但是真正玩熟了之后，还是非常有意思的！ 今天拓海老师跟大家说一下原生js中获取元素的下一个直接兄弟元素的坑！ 业务场景：点击当前元素，让其下一个紧挨着的兄弟元素展现出来，类似自定义下拉菜单。如下，点击div，让ul展现出来，此时就要用到一个dom操作nextSibling获取下一个元素。 <!doctype html&...
nextSibling.focus()报错的问题
weixin_30315723的博客
03-13 266
<body> <div> <input type="button" tabindex="-1" value="点点点点点" id="btn"> <input type="text" placeholder="1"> <input type...
搭建vue3项目时出现Cannot read property ‘nextSibling‘ of null报错
weixin_45142089的博客
10-25 6638
vue3项目搭建时，出现Cannot read property 'nextSibling' of null报错的解决方法
nextSibling和nextElementSilbing使用以及解决兼容性问题
cccccl的博客
03-03 1561
nextSibling和nextElementSilbing使用以及解决兼容性问题 1、今天学习了 获取兄弟节点 的方法 – nextSibling（获取下一个兄弟节点）、previousSibling(获取上一个兄弟节点) Node.nextSibling 是一个只读属性，返回其父节点的 childNodes 列表中紧跟在其后面的节点，如果指定的节点为最后一个节点，则返回 null。 <body> <div>啦啦啦</div> <div>我是
javascript 中的nextSibling和previousSibling使用注意事项
Kuroko's Development Notes
03-21 1159
  firstChild,lastChild,nextSibling,previousSibling都会将空格或者换行当做节点处理，但是有代替属性 所以为了准确地找到相应的元素，会用firstElementChild, lastElementChild, nextElementSibling, previousElementSibling 兼容的写法，这是JavaScript自带的属性。 但坏消...
javascript nextSibling属性
苦艾文艺
06-07 1228
对于nextSibling属性，在W3school中的定义为： nextSibling 属性返回指定节点之后紧跟的节点，在相同的树层级中。注意所返回的节点必须是与上一个节点是同级关系，且彼此之间不能有空格，否则将会返回：undefined<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titl
JavaScript中的previousSibling和nextSibling使用注意事项
热门推荐
04-30 3万+
JavaScript中的previousSibling和nextSibling使用注意事项 JavaScript中的previousSibling和nextSibling是获取上一个、下一个同胞元素，如果上一个或下一个同级节不存在，则此属性返回值是null。如果不注意,就会引起错误。 HTML结构中的各种空格、换行符都可...
javascript中的nextSibling使用陷(da)阱(keng)
12-10
今天写js的时候遇到了一个陷(da)阱(keng) 关于HTML/XML节点的问题 据说在IE中nextSibling不会返回文本节点，而chrome或者firefox等会返回文本节点…… 这个我的工作带来了很严重的问题 在网上搜到了很多处理方法，都...
javascript中的previousSibling和nextSibling的正确用法
10-23
在JavaScript中，nextSibling和previousSibling是两个常用的DOM操作属性，它们用于访问节点树中的下一个和上一个兄弟节点。这两个属性看起来简单直观，但在实际开发中，由于浏览器之间的差异，它们的用法可能会变得...
javascript nextSibling 与 getNextElement(node) 使用介绍
10-28
在JavaScript中，`nextSibling` 和 `getNextElement(node)` 是两个用于遍历DOM（文档对象模型）树的重要方法。它们都是用来查找当前节点之后的节点，但有着不同的使用场景和特性。 1. `nextSibling` 属性： `...
一文吃透JavaScript中的DOM知识及用法
不迁怒，不贰过。小知识，大智慧。
11-12 4204
一文带你吃透DOM的知识和用法，绝对实用。 DOM是网页的核心结构，无论是HTML、CSS还是JavaScript，都和DOM 密切相关。HTML的作用是构建DOM结构，CSS的作用是设定样式，JavaScript的作用是读取以及控制、修改DOM。 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
java 获取当前路径下的所有xml文档
betofly的专栏
03-21 1048
import java.io.File; public class ShowAllXML { public static void main(String[] args) { File file = new File("").getAbsoluteFile(); String[] dir; dir = file.list(); for (int i = 0; i < file.
日志
betofly的专栏
04-10 521
之前的目标已经大体完成了； 下一个目标是用java写一个2
Javascript中DOM
最新发布
03-31
DOM（Document Object Model）是JavaScript中的一个重要概念，它是指浏览器将HTML或XML文档解析成一个树形结构的对象模型，提供了访问和操作文档的接口。 在JavaScript中，可以使用DOM API来访问和操作文档的各个部分，包括元素、属性、样式、事件等。常见的DOM操作包括： 1. 获取元素：通过getElementById、getElementsByClassName、getElementsByTagName等方法获取文档中的元素。 2. 修改元素：使用innerHTML、setAttribute、style等方法修改元素的内容、属性、样式等。 3. 创建元素：使用createElement、appendChild等方法创建新的元素并添加到文档中。 4. 删除元素：使用removeChild、parentNode等方法删除元素。 5. 监听事件：使用addEventListener、removeEventListener等方法监听和移除事件。 6. 查询和修改文档结构：使用parentNode、previousSibling、nextSibling、childNodes等属性和方法查询和修改文档结构。 DOM的优点是可以动态地修改文档结构和样式，使得网页具有更加丰富的交互性和可操作性。但同时也需要注意性能问题，因为频繁的DOM操作会导致浏览器的重排和重绘，影响页面的性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值