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

最新推荐文章于 2023-07-10 12:20:43 发布
最新推荐文章于 2023-07-10 12:20:43 发布
阅读量9.5k 收藏
点赞数
分类专栏： js 文章标签： html javascript class button function input
本文通过一个具体的示例展示了如何使用 JavaScript 来操作 HTML 文档对象模型 (DOM)。具体包括获取元素、读取元素属性及内容，以及访问元素的兄弟节点等基本操作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
        <title>Untitled Document</title>  
        <script language="JavaScript">  
            function test() {  
                var node = document.getElementById("li2");  
                alert(node.id+"---"+node.innerText);//li2---J2EE
                alert(node.nextSibling.id+"---"+node.nextSibling.innerText);   //Li3---Haha
                //alert(node.previousSibling.id+"---"+node.previousSibling.innerText);  //li1---Magci
               // alert(node.nextSibling.previousSibling.id+"---"+node.nextSibling.previousSibling.innerText);  //li2---J2EE
            }  
        </script>  
    </head>  
    <body>  
        <ul id="u1">  
            <li id="li1" class="li1">Magci</li>  
            <li id="li2">J2EE</li>  
            <li id="li3">Haha!</li>  
        </ul>  
        <ul id="u2">  
            <li id="li4" class="li1">Magci</li>  
            <li id="li5">J2EE</li>  
            <li id="li6">Haha!</li>  
        </ul>  
        <input type="button" value="Click Me!" onClick="test();" />  
    </body>  
</html> 

JavaScript【Text 节点、Node 节点属性（nodeName、nodeValue 、textContent、nextSibling、previousSibling）】(十二)
08-07 1455
JavaScript【Text 节点、Node 节点属性（nodeName、nodeValue 、textContent、nextSibling、previousSibling）】(十二)
js jquery获取当前元素的兄弟级 上一个 下一个元素
11-24
var chils= s.childNodes;  //得到s的全部子节点 var par=s[removed];   //得到s的父节点 var ns=s.nextSbiling;   //获得s的下一个兄弟节点 var ps=s.previousSbiling;  //得到s的上一个兄弟节点 var fc=s.firstChild;   //获得s的第一个子节点 var lc=s.lastChile;   //获得s的最后一个子节点 JS获取节点父级，子级元素 先说一下JS的获取方法，其要比JQUERY的方法麻烦很多，后面以JQUERY的方法作对比。 JS的方法会比JQUE
js nextSibling属性和previousSibling属性
热门推荐
Sux
04-30 2万+
js nextSibling属性和previousSibling属性            1：nextSibling属性        该属性表示当前节点的下一个节点（其后的节点与当前节点同属一个级别）；如果其后没有与其同级的节点，则返回null。       需要特别注意的是：该属性在不同的浏览器中的执行结果并不都相同，见下面例示：      先来看
js nextSibling函数
liangdingguo的博客
02-20 1097
<!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封装函数：获取下一个/上一个兄弟元素节点
高先生的猫
12-04 4652
要求： 获得下一个/上一个兄弟元素节点，不包括文本节点等 解决IE兼容性问题 代码实现： 获得下一个兄弟元素节点： function getNextElement(element) { var el = element; while (el = el.nextSibling) { if (el.nodeType === 1) { return el; } } return null; } ...
JQ获取上级、同级、下级元素
weixin_30470857的博客
03-10 1078
------------------------------------------------------------------------------jQuery---------------------------------------------------------------------- 1.父级： jQuery.parent(expr) 找父亲节点，可以传入expr进行...
js nextSibling属性和previousSibling属性概述及使用注意
10-27
`nextSibling`和`previousSibling`属性是DOM中的两个关键属性，它们允许开发者在文档树中移动，查找当前节点的相邻兄弟节点。 1. `nextSibling`属性 `nextSibling`属性返回当前节点的下一个同级节点。如果当前节点...
javascript中的previousSibling和nextSibling的正确用法
10-23
在JavaScript中，nextSibling和previousSibling是两个常用的DOM操作属性，它们用于访问节点树中的下一个和上一个兄弟节点。这两个属性看起来简单直观，但在实际开发中，由于浏览器之间的差异，它们的用法可能会变得...
JS获取子节点、父节点和兄弟节点的方法实例总结
10-18
1. 使用previousSibling和nextSibling属性来获取当前节点的前一个和后一个兄弟节点。 2. previousElementSibling和nextElementSibling属性也提供类似功能，但它们只返回元素节点，不会返回文本节点等非元素节点，...
javascript获取dom的下一个节点方法
10-25
在旧版的Internet Explorer浏览器中，`nextSibling`和`previousSibling`属性也被用来获取下一个和上一个节点，但它们会获取所有类型的节点，包括文本节点和注释节点。这可能导致获取到不期望的节点。为此，当需要...
js的nextSibling
weizuqing的专栏
01-13 421
nextSilbling 属性的作用是：直接返回一个节点之后的节点（其后的节点与当前节点同属一个级别）。如果不包含这类节点，那么属性将返回null[空值]。IE将跳过在节点之间产生的空格文档节点（如：换行字符），而Mozilla不会这样。知道了吧，FF会把诸如空格换行之类的排版元素视作节点读取，faint～··· 发现FF BT的地放还有对event的处理～···相当麻烦～···nextSibli...
js：nextSibling兄弟节点的使用
diancheng5132的博客
12-19 571
一，使用nextSibling可以方便的找到该节点的兄弟节点，并为其设置属性 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/...
JavaScript 兼容性获取下一个/上一个兄弟元素节点
火星基地
10-24 523
要求： 获得下一个/上一个兄弟元素节点，不包括文本节点等 解决IE兼容性问题 代码实现： 获得下一个兄弟元素节点： function getNextElement(element) { var el = element; while (el = el.nextSibling) { if (el.nodeType === 1) { return el; } } return null; } 获得上一个兄弟元素节点：
js的nextSibling属性
q285661571的专栏
04-25 570
返回当前节点的下一个同级节点
JS/JQuery获取当前元素的上一个/下一个兄弟级元素等元素的方法
weixin_38184224的博客
07-10 3669
jQuery.parent(expr)，找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class")jQuery.find()，的返回结果，不会有初始集合中的内容，比如$("p").find("span")，是从<p>元素开始找<span>，等同于$("p span")jQuery.children(expr)，返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点。//得到s的上一个兄弟节点。
javascript nextSibling属性
苦艾文艺
06-07 1288
对于nextSibling属性，在W3school中的定义为： nextSibling 属性返回指定节点之后紧跟的节点，在相同的树层级中。注意所返回的节点必须是与上一个节点是同级关系，且彼此之间不能有空格，否则将会返回：undefined<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titl
js的nextSibling和previousSibling兄弟节点 nextSibling
学习笔记
02-02 625
Untitled Document function test() { var node = document.getElementById("li2"); alert(node.id+"---"+node.innerText);//li2---J2EE alert(n
JS中的DOM查询（2）,(parentNode、previousSibling、nextSibling)
Fantasc的博客
08-02 1354
获取父节点和兄弟节点· 通过具体的节点，调用以下三个属性来对父节点和兄弟节点进行操作。 parentNode属性，获取当前节点的父节点。 previousSibling属性，获取当前节点的前一个兄弟节点。 在用previousSibling属性去元素节点的前一个兄弟节点时，如果前一个节点是空白文本，会将空白文本节点返回，而不是放回兄弟节点。可以用previousElementSibling属性来代替，用previousElementSibling属性不会将空白文本当做兄弟节点返回。但是后者不支持ie8一
原生js中nextSibling和nextElementSibling的坑
码赛客1024的博客
04-29 2650
作者：拓海老师，公众号：拓海老师 一直以来js的随性让初学者蛋疼菊紧，但是真正玩熟了之后，还是非常有意思的！ 今天拓海老师跟大家说一下原生js中获取元素的下一个直接兄弟元素的坑！ 业务场景：点击当前元素，让其下一个紧挨着的兄弟元素展现出来，类似自定义下拉菜单。如下，点击div，让ul展现出来，此时就要用到一个dom操作nextSibling获取下一个元素。 <!doctype html&...
JavaScript：深入理解lastChild与兄弟节点属性
`nextSibling` 和 `previousSibling` 属性则分别用于获取指定节点的下一个和上一个兄弟节点。在HTML表单部分，如用户名、密码输入框和选择框之间，这些属性可以帮助你遍历兄弟元素。例如，从最后一个输入框开始，`...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值