正文

学会原生JS轻松找兄弟元素，实用技巧大揭秘！

/0 浏览量
0418

在JavaScript中，有时候我们需要找到某个元素的兄弟元素，比如要获取一个元素的下一个兄弟元素或者前一个兄弟元素。掌握这些技巧，可以让你的JavaScript代码更加高效和简洁。下面，我将为你揭秘一些实用的原生JS技巧，帮助你轻松找到兄弟元素。

一、使用previousElementSibling和nextElementSibling

这两个属性是DOM API中用来获取兄弟元素的利器。previousElementSibling属性可以获取当前元素的相邻的前一个兄弟元素，而nextElementSibling属性则用来获取相邻的后一个兄弟元素。

示例代码：

// 假设有一个HTML结构如下：
// <div id="parent">
//   <div id="child1"></div>
//   <div id="child2"></div>
// </div>

// 获取child1的下一个兄弟元素
var nextSibling = document.getElementById('child1').nextElementSibling;
console.log(nextSibling.id); // 输出: child2

// 获取child2的前一个兄弟元素
var previousSibling = document.getElementById('child2').previousElementSibling;
console.log(previousSibling.id); // 输出: child1

二、使用children属性

如果你需要获取一个父元素下的所有子元素，包括兄弟元素，可以使用children属性。这个属性返回一个HTMLCollection，包含了父元素下所有的子元素。

示例代码：

// 假设有一个HTML结构如下：
// <div id="parent">
//   <div id="child1"></div>
//   <div id="child2"></div>
// </div>

// 获取parent下的所有子元素
var children = document.getElementById('parent').children;
console.log(children.length); // 输出: 2
console.log(children[0].id); // 输出: child1
console.log(children[1].id); // 输出: child2

三、使用querySelectorAll和:nth-child伪类

如果你需要获取特定位置上的兄弟元素，可以使用querySelectorAll结合:nth-child伪类来实现。

示例代码：

// 假设有一个HTML结构如下：
// <div id="parent">
//   <div id="child1"></div>
//   <div id="child2"></div>
//   <div id="child3"></div>
// </div>

// 获取parent下的第二个子元素
var secondChild = document.querySelector('#parent > div:nth-child(2)');
console.log(secondChild.id); // 输出: child2

四、注意事项

  1. 这些方法返回的是元素节点，如果存在文本节点或者注释节点，它们不会被包含在内。
  2. 使用children属性时，返回的是HTMLCollection，而不是NodeList，因此不支持forEach等ES6方法。
  3. 使用:nth-child伪类时，索引是从1开始的。

通过以上技巧，相信你已经能够轻松地在原生JS中找到兄弟元素了。这些技巧在日常开发中非常实用，希望对你有所帮助！

-- 展开阅读全文 --