原生js中nextSibling和nextElementSibling的坑

最新推荐文章于 2024-05-23 21:34:36 发布

码赛客1024

最新推荐文章于 2024-05-23 21:34:36 发布

阅读量2.5k

点赞数

分类专栏： 05-web前端文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_45691611/article/details/105834786

版权

本文由拓海老师分享，讨论了在原生JavaScript中使用nextSibling和nextElementSibling获取元素下一个直接兄弟元素时遇到的问题。在尝试实现点击元素显示其下个兄弟元素（如自定义下拉菜单）的场景中，nextSibling会返回包含的文本节点，而nextElementSibling则能正确获取Element节点。解决方案是使用nextElementSibling来避免文本节点的干扰。

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

作者：拓海老师，公众号：拓海老师

一直以来js的随性让初学者蛋疼菊紧，但是真正玩熟了之后，还是非常有意思的！

今天拓海老师跟大家说一下原生js中获取元素的下一个直接兄弟元素的坑！
业务场景：点击当前元素，让其下一个紧挨着的兄弟元素展现出来，类似自定义下拉菜单。如下，点击div，让ul展现出来，此时就要用到一个dom操作nextSibling获取下一个元素。

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>测试</title>
 </head>
 <body>
	<div onclick="show(this)">列表名

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

码赛客1024

关注关注

0
点赞
踩
3

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

JS中的DOM查询（2）,(parentNode、previousSibling、nextSibling)

Fantasc的博客

08-02

1233

获取父节点和兄弟节点· 通过具体的节点，调用以下三个属性来对父节点和兄弟节点进行操作。 parentNode属性，获取当前节点的父节点。 previousSibling属性，获取当前节点的前一个兄弟节点。在用previousSibling属性去元素节点的前一个兄弟节点时，如果前一个节点是空白文本，会将空白文本节点返回，而不是放回兄弟节点。可以用previousElementSibling属性来代替，用previousElementSibling属性不会将空白文本当做兄弟节点返回。但是后者不支持ie8一

js nextSibling属性和previousSibling属性

最新发布

2301_80448468的博客

05-23

379

在JavaScript中，特别是当处理DOM（文档对象模型）时，和是两个常见的属性，但它们的用途和行为有所不同。

js的nextSibling

weizuqing的专栏

01-13

376

nextSilbling 属性的作用是：直接返回一个节点之后的节点（其后的节点与当前节点同属一个级别）。如果不包含这类节点，那么属性将返回null[空值]。IE将跳过在节点之间产生的空格文档节点（如：换行字符），而Mozilla不会这样。知道了吧，FF会把诸如空格换行之类的排版元素视作节点读取，faint～··· 发现FF BT的地放还有对event的处理～···相当麻烦～···nextSibli...

原生JS之lastChild和lastElementChild、childNodes和children区别

骆小胖~

12-22

6153

（1）原生JS遍历时操作如下 childNodes 获取所有子节点（包括包括文本节点、注释节点即回车、换行、空格、文本等等） firstChild 获取第一个子节点（可以为注释节点） lastChild 获取最后一个子节点（与firstChild类似） parentNode 返回给定节点的父级节点 nextSibling 返回给定节点的下一个节点 previousSibling 返回给定节点的上一个节点注意：上面写法是IE8之前旧版本写法，也可以在I

js原生后代选择器_原生 JS 汇总

weixin_39825045的博客

12-19

1627

JS选取DOM元素的方法注意：原生JS选取DOM元素比使用jQuery类库选取要快很多1、通过ID选取元素 document.getElementById('myid');2、通过CLASS选取元素 document.getElementsByClassName('myclass')[0];3、通过标签选取元素 document.getElementsByTagName('mydiv')[0];...

原生JS操作DOM的方法

weixin_47735939的博客

01-19

1304

前言现在框架应用比较广泛，封装了DOM操作操作，但是DOM是前端‘攻城狮’的基础，必备的知识，只会VUE不懂得DOM操作前端‘攻城狮’，不会太长久 DOM JavaScript操作网页的接口，全称为“文档对象模型(Document Object Model)。有这几个概念：文档、元素、节点整个文档是一个文档节点每个标签是一个元素节点包含在元素中的文本是文本节点元素上的属性是属性节点文档中的注释是注释节点 DOM树结构 DOM树是结构，树是由DOM元素和属性节点组成的，DOM的本质是把htm

原生js实现各种案例

yjyxw的博客

06-15

1318

html文件： <html> <head> <meta charset="utf-8"> <title></title>  <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="layui-v2.5.6/layui/css/layui.css"> </he

js nextSibling属性和previousSibling属性概述及使用注意

10-27

nextSibling属性:该属性表示当前节点的下一个节点；如果其后没有与其同级的节点，则返回null;previousSibling属性:该属性与nextSibling属性的作用正好相反,接下来将详细介绍下，感兴趣的你不妨了解下哦，或许对你有所帮助

js nextSibling函数

liangdingguo的博客

02-20

1034

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> &...

js的nextSibling属性

q285661571的专栏

04-25

530

返回当前节点的下一个同级节点

js的 nextsibling 和previousSibling

Undefineddd的博客

05-07

1718

二者获取的是节点而节点在js中有三种元素节点属性节点文本节点若两个标签之间存在空格，如空格则使用该方法获取的节点会获取到文本节点为什么？因为空格算是文本节点。原因是 nextsibling 和previousSibling获取的是节点！！！！

JS，nextSibling,nextElementSibling 下一个兄弟,previousSibling previousElementSibling 上一个兄弟节点

sunling的专栏

11-21

1万+

234 234 234 234 234 234 234 234 var div1 = document.getElementById("div1"); // div1.nextSibling.style.color="red"; 获取下一个兄弟节点只有IE 6 7 8兼容 // div1.nextElementSibling.style.color="red"; 其

js的nextSibling和previousSibling兄弟节点 nextSibling：取得下一个兄弟节点；

蜗牛天堂

11-13

9447

Untitled Document function test() { var node = document.getElementById("li2"); alert(node.id+"---"+node.innerText);//li2---J2EE

原生js获取元素的兄弟节点（previousSibling、nextSibling）、兄弟元素（nextElementSibling、previousElementSibling）

u010234868的专栏

06-18

1万+

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="box"> <div>1</div> <div id="second">2</div> <div>3&.

Javascript nextElementSibling和nextSibling

weixin_30388677的博客

08-03

157

function next(ele) { if (typeof ele.nextElementSibling == 'object') { return ele.nextElementSibling; } var n = ele.nextSibling; ...

js：nextSibling兄弟节点的使用

diancheng5132的博客

12-19

514

一，使用nextSibling可以方便的找到该节点的兄弟节点，并为其设置属性 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/...

JavaScript分层概念与原生JS实践

"本资源主要探讨了原生JavaScript中的分层概念，以及JavaScript在实际应用中可能遇到的问题，如变量冲突和DOM操作的浏览器兼容性问题。通过示例代码，展示了如何使用原生JavaScript进行事件处理和DOM操作，并提到了...