正文

轻松掌握原生JS：教你一招精准选中页面中的兄弟元素

/0 浏览量
0404

在JavaScript中，有时候我们需要操作页面中的兄弟元素，比如一个按钮的下一个兄弟元素是一个段落，我们需要对段落进行某些操作。那么，如何精确地选中这些兄弟元素呢？今天，我就来教大家一招！

1. 使用 nextElementSibling 属性

nextElementSibling 属性可以用来获取当前元素的下一个兄弟元素。它返回一个元素节点，如果没有下一个兄弟元素，则返回 null。

示例代码：

// 假设有一个按钮元素和一个段落元素
// 按钮的id为 'myButton'
// 段落的id为 'myParagraph'

// 获取按钮元素
var button = document.getElementById('myButton');

// 使用 nextElementSibling 获取下一个兄弟元素（即段落）
var paragraph = button.nextElementSibling;

// 对段落进行操作
paragraph.style.color = 'red';

注意事项：

  • nextElementSibling 只会获取到紧挨着当前元素的下一个兄弟元素。
  • 如果当前元素是最后一个元素，或者下一个兄弟元素不是元素节点，那么 nextElementSibling 会返回 null。

2. 使用 previousElementSibling 属性

与 nextElementSibling 类似，previousElementSibling 属性可以用来获取当前元素的前一个兄弟元素。

示例代码：

// 假设有一个段落元素和一个按钮元素
// 段落的id为 'myParagraph'
// 按钮的id为 'myButton'

// 获取段落元素
var paragraph = document.getElementById('myParagraph');

// 使用 previousElementSibling 获取前一个兄弟元素（即按钮）
var button = paragraph.previousElementSibling;

// 对按钮进行操作
button.style.color = 'blue';

注意事项：

  • 与 nextElementSibling 类似，previousElementSibling 只会获取到紧挨着当前元素的前一个兄弟元素。
  • 如果当前元素是第一个元素，或者前一个兄弟元素不是元素节点，那么 previousElementSibling 会返回 null。

3. 使用 children 属性和索引

有时候，我们需要获取一个父元素下的所有子元素，并对其中的某个兄弟元素进行操作。这时，我们可以使用 children 属性和索引来实现。

示例代码：

// 假设有一个父元素，包含三个子元素：两个段落和一个按钮
// 父元素的id为 'myParent'
// 第一个段落的id为 'paragraph1'
// 第二个段落的id为 'paragraph2'
// 按钮的id为 'myButton'

// 获取父元素
var parent = document.getElementById('myParent');

// 使用 children 属性获取所有子元素
var children = parent.children;

// 获取第二个子元素（即第二个段落）
var secondParagraph = children[1];

// 对第二个段落进行操作
secondParagraph.style.color = 'green';

注意事项：

  • children 属性返回的是一个 HTMLCollection 对象，可以通过索引来访问其中的元素。
  • children 属性只会获取到元素节点，不会获取到文本节点或其他类型的节点。

通过以上三种方法，我们可以轻松地选中页面中的兄弟元素，并对它们进行各种操作。希望这篇文章能帮助你更好地掌握原生JavaScript！

-- 展开阅读全文 --