js原生获取同胞元素

最新推荐文章于 2021-05-07 15:06:09 发布
最新推荐文章于 2021-05-07 15:06:09 发布
阅读量1.1k 收藏
点赞数
分类专栏： js 文章标签： js原生获取同胞元素 同胞元素
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/litong131219/article/details/103241538
版权
本文介绍了如何在JavaScript中获取元素的上一个或下一个同胞元素。虽然JQuery的`prev()`和`next()`方法很便利，但在原生JS中，可以使用`nextSibling`和`previousSibling`，但它们可能会返回文本节点。为了解决这个问题，现代浏览器提供了`nextElementSibling`和`previousElementSibling`，但不支持IE8。对于IE8兼容，需要自定义函数。文章还提到了元素节点和文本节点的区分，并给出了获取同胞元素的示例代码。
摘要由CSDN通过智能技术生成

父元素和子元素不需要过多的解释，同胞元素是指元素的上一个元素或者是子元素的下一个元素。

获取上一个或者下一个同胞元素，使用很多人会立马想到JQuery  prev() 和 next() 的确非常方便。那么原生的JavaScript该怎么获取 上一个 或者 下一个 同胞元素呢？

界面实际元素

<body>
<ul>1</ul>
<ul class="li2">2</ul>
<ul>3</ul>
</body>

界面元素分布如下图

页面如上所示,执行执行下面的代码返回的值是7。元素的截图也如上所示。换行也是一个元素。

document.querySelector(".li2").parentNode.childNodes.length

JavaScript 提供了原生的API nextSibling/prevSibling;

用法：ele.nextSibling

问题：在现代浏览器中&#

最低0.47元/天 解锁文章
litongjava
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery 查找同胞元素
m0_57835615的博客
06-06 970
通过 jQuery，我们可以方便的查找某个元素的同胞元素。 （1）jQuery siblings() 方法：返回被选元素的所有同胞元素。 （2）jQuery next() 方法
JS之DOM元素操作
weixin_45454695的博客
02-04 105
1.dom操作 document.getElementsByTagName document.getElementsByClassName document.querySelector("#btn"); 2.节点操作 nextSibling 下一个节点同胞元素 previousSibling 上一个节点同胞元素 nextElementSibling 下一个同胞元素 previousEleme...
原生JS查找同辈元素
yy211zhu的博客
03-31 3785
>jquery具有强大的选择器。其中siblings([expr])就是查找同辈元素。但有时没必要引入jquery库，那该如何做呢？ //取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。 siblings([expr])原生如何查找dom同辈元素 //el,要查找的dom元素 function sibilings(el
js 修改同胞元素样式
Vinci_ljl的博客
08-10 525
加粗为例： $(".class").on('click', function(){ $(this).css("fontWeight", "bold").siblings().css("fontWeight", "normal"); });
原生JavaScript 获取下一个/上一个同胞元素
weixin_30700099的博客
01-04 572
看JavaScript遇到的问题，研究了下 获取上一个或者下一个同胞元素，使用很多人会立马想到JQuery prev() 和next()的确非常方便。那么原生的JavaScript该怎么获取上一个 或者 下一个 同胞元素呢？ JavaScript 提供了原生的API nextSibling / prevSibling; 用法： ele.nextSibling 问题： ...
查找同级元素的同胞元素
轻风木竹
09-26 935
html中代码：table> tr> td> td>测试1td> td class="ca">测试2td> td>测试3td> td onclick="hehe(this.id)" id = "hehe">ceshitd> td>测试4td> tr> table>js中代码：
原生js获取所点击节点的所有兄弟节点(包括自己本身)
胡乱选一个
05-07 1522
parentNode方法详解 <div class="header-item" onclick='checked(this)'></div> function checked(even){ //获取所点击节点的父节点 const parent = even.parentNode; //获取所点击节点的父节点的所有子节点 const childrens = parent.children; //对节点进行一些操作 //给所点击节点添加样式 //event.
JavaScript原生节点操作小结
10-20
以上所述，是关于JavaScript原生节点操作的核心知识点。掌握这些操作，能够帮助我们更加灵活地控制页面上的元素，实现丰富的用户交互效果。不过，随着现代前端开发技术的不断进步，虽然原生节点操作仍然是基础，但在...
原生JS操作DOM的方法
weixin_47735939的博客
01-19 1292
前言 现在框架应用比较广泛，封装了DOM操作操作，但是DOM是前端‘攻城狮’的基础，必备的知识，只会VUE不懂得DOM操作前端‘攻城狮’，不会太长久 DOM JavaScript操作网页的接口，全称为“文档对象模型(Document Object Model)。 有这几个概念：文档、元素、节点 整个文档是一个文档节点 每个标签是一个元素节点 包含在元素中的文本是文本节点 元素上的属性是属性节点 文档中的注释是注释节点 DOM树结构 DOM树是结构，树是由DOM元素和属性节点组成的，DOM的本质是把htm
JS-dom常用的八种获取方法，属性及操作
mab_1994的博客
11-28 835
js里面dom元素操作不支持隐式迭代（js操作dom不能直接操作一堆，只能单个操作） <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <button class="btn" id="butinfo" name="an">按钮</button&
siblings()遍历同胞元素
lzf的博客
05-24 1136
siblings() 方法返回被选元素的所有同胞元素。被选元素不包含在同胞元素中 siblings()方法详情看：http://www.w3school.com.cn/jquery/traversing_siblings.asp 更多遍历同胞元素看：http://www.w3school.com.cn/jquery/jquery_traversing_siblings.asp
siblings筛选同胞元素
夏天的甲虫
05-16 845
条件筛选的时候，被选中的元素都会添加一个active样式！ 当有多个筛选分类时，点击当前筛选分类时，其他筛选分类的active样式不改变，而被点击的当前分类先移除子元素的active样式，再给被点击元素添加active样式 siblings筛选同胞元素 .list{ color: #cccccc; margin: 10px
JQuery学习之路Part8：家族树操作(查找祖先、后代、兄弟同胞、绝对查找)【完结】
"✧treasure mountain✧"
03-09 8098
一、向上寻找 获取被选元素的直接父元素 语法：parent() 例： $(document).ready(function(){ $("span").parent(); }); 获取被选元素的所有祖先元素 语法：parents() 一路向上直到文档的根元素 (<html>) 例一： 返回所有 <span> 元素的所有祖先 $(document).ready(functi...
jQuery 遍历 - 同胞
Care_about的博客
10-24 594
同胞拥有相同的父元素。 通过 jQuery，您能够在 DOM 树中遍历元素的同胞元素。在 DOM 树中水平遍历 有许多有用的方法让我们在 DOM 树进行水平遍历： siblings() next() nextAll() nextUntil() prev() prevAll() prevUntil()jQuery siblings() 方法siblings() 方法返回被选元素的所有
jQuery 遍历 - 同胞(siblings)
CodeTerminator的博客
03-12 1122
jQuery 遍历 - 同胞(siblings)同胞拥有相同的父元素有以下方法在DOM树种水平遍历：1.siblings()                      2.next()3.nextAll()4.nextUntil()水平遍历DOM树的方法1.siblings() silblings()方法返回被选元素的所有同胞元素2.next()next() 方法返回被选元素的下一个同胞元素3.n...
CSS3同胞选择器
歪脖先生的博客
12-02 2032
同胞选择器 同胞选择器（E～F），用于选择某元素后面的所有同胞元素。也就是说，E和F是同辈元素，且F在E元素的后面，它们之间可以有，也可以没有其他同胞元素。 如，在博客站中，博文标题后面的是正文，正文用段落组织。HTML 代码如下：     同胞选择器    同胞选择器，为同一个父元素下某个元素之后所有的元素应用样式…    例如，一篇文章中，可以使用同胞选择器，让一级标题后面的所有
js元素获取
刚刚好
07-12 403
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>元素获取demo</title> <meta name="description" content=""> <meta name="keywords" co
原生js如何获取当前元素的同级元素
热门推荐
滴水石穿
12-23 3万+
原生js如何获取当前元素的同级元素: 获取当前元素的同辈元素利用jquery非常容易实现，只要利用siblings()函数即可简单实现，这里不做介绍，具体可以参阅siblings()方法使用详解一章节， 下面介绍一下如何利用原生javascript实现此功能。 代码实例如下: [HTML] 纯文本查看 复制代码运行代码 01 02 03
js原生获取dom元素方法
最新发布
10-14
可以使用以下方法获取 DOM 元素： 1. document.getElementById(id)：根据元素的 id 属性获取元素。 2. document.getElementsByTagName(tagName)：根据元素的标签名获取元素，返回一个 HTMLCollection 对象。 3. document.getElementsByClassName(className)：根据元素的 class 属性获取元素，返回一个 HTMLCollection 对象。 4. document.querySelector(selector)：根据 CSS 选择器获取第一个匹配的元素。 5. document.querySelectorAll(selector)：根据 CSS 选择器获取所有匹配的元素，返回一个 NodeList 对象。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值