js nextSibling函数

最新推荐文章于 2025-09-30 12:55:47 发布
原创 最新推荐文章于 2025-09-30 12:55:47 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文档展示了一个使用jQuery实现的简单交互示例，通过点击带有特定类名的div元素，可以显示或隐藏其相邻的兄弟元素。此功能适用于创建可折叠的菜单或其他需要隐藏和显示内容的场景。

<!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">
</script>
</head>
<body>

<p>返回相邻的同胞元素</p>
<div class="query-set" onclick="rptOpenSelectWindow(this)">
        第一个  <i class="icon-caret-down"/>
  </div>
<div class="query-field" style="background-color:red">
      第二个 <ul id="rpt_setting_2"/>
</div>

<script>
 function rptOpenSelectWindow(_this) {
                var w = _this.nextSibling;
                if (w.style.display != 'block') {
                    w.style.display = 'block';
                } else {
                    w.style.display = 'none';
                }
        }
</script>
</body>
</html>

点击第一个会显示 或者隐藏

18. `bs对象.节点名.next_sibling` previous_sibling 获取兄弟节点
weixin_63986098的博客
06-28 1288
获取兄弟节点
节点操作之兄弟节点和留言板案例
m0_72313625的博客
08-25 629
兄弟节点：nextSibling nextSibling 获取的是下一个兄弟节点 包含元素节点或者 文本节点等等 previousSibling 获得的是上一个兄弟节点，它里面包含文本节点和元素节点
js nextSibling属性和previousSibling属性概述及使用注意
10-27
nextSibling属性:该属性表示当前节点的下一个节点；如果其后没有与其同级的节点，则返回null;previousSibling属性:该属性与nextSibling属性的作用正好相反,接下来将详细介绍下，感兴趣的你不妨了解下哦，或许对你有所帮助
javascript获取兄弟元素
最新发布
weixin_42017221的博客
09-30 320
在DOM树中，兄弟元素是指具有相同父节点的元素。例如，<div>元素下的所有<p>元素都是兄弟元素。理解兄弟元素的概念对于有效操控DOM至关重要。
js nextSibling属性和previousSibling属性
热门推荐
Sux
04-30 2万+
js nextSibling属性和previousSibling属性            1：nextSibling属性        该属性表示当前节点的下一个节点（其后的节点与当前节点同属一个级别）；如果其后没有与其同级的节点，则返回null。       需要特别注意的是：该属性在不同的浏览器中的执行结果并不都相同，见下面例示：      先来看
javascript nextSibling属性
苦艾文艺
06-07 1308
对于nextSibling属性，在W3school中的定义为： nextSibling 属性返回指定节点之后紧跟的节点，在相同的树层级中。注意所返回的节点必须是与上一个节点是同级关系，且彼此之间不能有空格，否则将会返回：undefined<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titl
javascript nextSibling 与 getNextElement(node) 使用介绍
10-28
在JavaScript中，`nextSibling` 和 `getNextElement(node)` 是两个用于遍历DOM（文档对象模型）树的重要方法。它们都是用来查找当前节点之后的节点，但有着不同的使用场景和特性。 1. `nextSibling` 属性： `...
javascript中的nextSibling使用陷(da)阱(keng)
12-10
关于HTML/XML节点的问题 据说在IE中nextSibling不会返回文本节点，而chrome或者firefox等会返回文本节点…… 这个我的工作带来了很严重的问题 在网上搜到了很多处理方法，都是给js添加各种封装的函数…… ...
js 获取子节点函数 (兼容FF与IE)
12-12
result.tagName) { result = result.nextSibling; } return result; } function getNextChild(obj) { var result = obj.nextSibling; while (!result.tagName) { result = result.nextSibling; } return result; }
javascript中的previousSibling和nextSibling的正确用法
11-22
在JavaScript中，`previousSibling` 和 `nextSibling` 是用于遍历DOM树中元素节点的重要属性。它们允许开发者获取一个元素的前一个或后一个同级元素。在处理动态生成或者无唯一ID的元素时，这两个属性尤其有用。在...
js form 验证函数 当前比较流行的错误提示
10-29
在JavaScript中，表单验证是网页交互中不可或缺的一部分，它确保用户输入的数据符合预期格式和...通过结合各种验证函数和错误提示方法，可以构建一个完整的JavaScript表单验证框架，有效地处理各种类型的输入验证需求。
js的nextSibling
weizuqing的专栏
01-13 434
nextSilbling 属性的作用是：直接返回一个节点之后的节点（其后的节点与当前节点同属一个级别）。如果不包含这类节点，那么属性将返回null[空值]。IE将跳过在节点之间产生的空格文档节点（如：换行字符），而Mozilla不会这样。知道了吧，FF会把诸如空格换行之类的排版元素视作节点读取，faint～··· 发现FF BT的地放还有对event的处理～···相当麻烦～···nextSibli...
js的nextSibling属性
q285661571的专栏
04-25 590
返回当前节点的下一个同级节点
js：nextSibling兄弟节点的使用
diancheng5132的博客
12-19 590
一，使用nextSibling可以方便的找到该节点的兄弟节点，并为其设置属性 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/...
js的nextSibling和previousSibling兄弟节点 nextSibling：取得下一个兄弟节点；
蜗牛天堂
11-13 9521
Untitled Document                         function test() {                   var node = document.getElementById("li2");                   alert(node.id+"---"+node.innerText);//li2---J2EE
nextSibling
weixin_33701294的博客
12-19 133
JQuery中next()方法是取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。 /** * 得到下一个元素 * @param {Object} elem */function next(elem){    do{        elem = elem.nextSibling;    } while(elem &amp;&amp; elem.nodeType != 1);  ...
js的 nextsibling 和previousSibling
Undefineddd的博客
05-07 1793
二者获取的是节点 而节点在js中有三种 元素节点 属性节点 文本节点 若两个标签之间存在空格，如 空格 则使用该方法获取的节点会获取到文本节点 为什么？ 因为空格算是文本节点。 原因是 nextsibling 和previousSibling获取的是节点！！！！
next_siblings()函数介绍
weixin_43765541的博客
04-17 612
是一个 BeautifulSoup 库中的函数，用于在 HTML 或 XML 文档中查找当前节点之后的所有兄弟节点。它返回一个生成器对象，可以用于迭代获取当前节点之后的所有兄弟节点。这个函数对于在解析 HTML 或 XML 文档时查找特定节点之后的相关内容非常有用。标签后的所有兄弟节点，即第二个和第三个。
JS与JQuery的语法注意问题，siblings与nextSibling
weixin_44019016的博客
04-11 1322
JS与JQuery的语法注意问题，siblings与nextSibling， 前两天，在做一些选择，改变一些样式 。 发觉用siblings可以用attr,removeAttr等方法。 但是nextSibling确不能用attr,removeAttr方法，只能用style去改变样式。 弄来弄去的， 最后才发觉原来，siblings是JQUERY的语法 ...
javascript dom函数大全
03-16
### JavaScript DOM 操作函数全集 以下是 JavaScript 中常见的 DOM 操作函数列表，涵盖了获取、创建、修改和删除 DOM 节点的相关方法： #### 获取 DOM 元素 - `document.getElementById(id)`：通过 ID 属性值返回单个元素[^2]。 - `document.getElementsByClassName(name)`：通过类名返回一组元素集合。 - `document.getElementsByTagName(tagName)`：通过标签名称返回一组元素集合。 - `document.querySelector(selector)`：基于 CSS 选择器返回第一个匹配的元素[^4]。 - `document.querySelectorAll(selector)`：基于 CSS 选择器返回所有匹配的元素集合。 #### 创建 DOM 元素 - `document.createElement(tagName)`：创建一个新的 HTML 元素节点[^3]。 - `document.createTextNode(text)`：创建一个新的文本节点。 #### 修改 DOM 元素 - `.innerHTML`：设置或返回指定元素的内容（HTML 或纯文本）。 - `.innerText`：仅用于设置或返回可见文本内容。 - `.setAttribute(attribute, value)`：为指定元素设置属性及其值。 - `.removeAttribute(attribute)`：移除指定元素的某个属性。 - `.appendChild(node)`：向父节点追加子节点。 - `.insertBefore(newNode, referenceNode)`：在参考节点前插入新节点。 - `.replaceChild(newNode, oldNode)`：替换旧节点为新节点。 #### 删除 DOM 元素 - `.removeChild(childNode)`：从父节点中移除指定子节点。 #### 遍历 DOM 结构 - `.parentNode`：返回当前节点的父节点。 - `.childNodes`：返回当前节点的所有子节点集合。 - `.firstChild` 和 `.lastChild`：分别返回当前节点的第一个和最后一个子节点。 - `.nextSibling` 和 `.previousSibling`：分别返回下一个兄弟节点和上一个兄弟节点。 #### 样式操作 - `.style.property`：直接访问并修改样式中的具体属性[^1]。 - `window.getComputedStyle(element, pseudoElt).property`：读取计算后的样式属性。 - `.currentStyle`：IE 浏览器特有的方式，用于获取样式的兼容性处理。 #### 事件绑定 - `element.addEventListener(event, function, useCapture)`：为指定元素绑定多个事件监听器[^5]。 - `object.onclick = function()`：传统的方式为特定事件绑定单一响应函数。 #### 示例代码 以下是一个综合示例，展示如何使用部分 DOM 操作函数： ```javascript // 获取元素 var element = document.getElementById("example"); // 设置样式 element.style.color = "red"; // 添加子节点 var newElement = document.createElement("p"); newElement.textContent = "这是一个新的段落"; element.appendChild(newElement); // 绑定点击事件 element.addEventListener("click", function() { console.log("元素被点击！"); }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值