JS获取同级元素|极客笔记

JS获取同级元素

在JavaScript中，我们经常会遇到需要获取同级元素的情况，比如我们需要通过DOM操作来对同级元素进行样式改变、事件绑定等操作。本文将详细介绍如何使用JavaScript获取同级元素的方法。

1. 使用父元素的childNodes属性获取同级元素

在DOM中，每个元素都有一个childNodes属性，它返回一个代表所有子节点的NodeList对象，包括元素节点、文本节点、注释等。我们可以通过这个属性来获取同级元素。

// HTML结构
<div id="parent">
    <div class="sibling"></div>
    <div class="sibling"></div>
    <div class="sibling"></div>
</div>

// JavaScript代码
var parent = document.getElementById('parent');
var siblings = Array.from(parent.childNodes).filter(node => node.nodeType === 1 && node !== parent);

console.log(siblings);  // 输出所有同级元素

上面的代码首先通过getElementById方法获取父元素，然后通过childNodes属性得到所有子节点，最后通过filter方法筛选出元素节点并排除自身，从而获取所有同级元素。

2. 使用nextSibling和previousSibling属性获取相邻同级元素

除了通过父元素的childNodes属性获取同级元素外，我们还可以通过nextSibling和previousSibling属性获取相邻的同级元素。这两个属性分别表示下一个同级元素和上一个同级元素。

// HTML结构
<div>
    <div class="sibling first"></div>
    <div class="sibling"></div>
    <div class="sibling"></div>
</div>

// JavaScript代码
var firstSibling = document.querySelector('.first');
var nextSibling = firstSibling.nextSibling;
var previousSibling = firstSibling.previousSibling;

console.log(previousSibling); // 输出上一个同级元素
console.log(nextSibling); // 输出下一个同级元素

上面的代码通过querySelector方法获取第一个同级元素，并分别使用nextSibling和previousSibling属性来获取相邻的同级元素。

需要注意的是，这两个属性获取的是所有节点，包括文本节点、元素节点等，需要根据实际情况进行判断和筛选。

3. 使用querySelectorAll方法获取多个同级元素

除了以上方法，我们还可以使用querySelectorAll方法来获取多个同级元素，这样可以更加灵活地选择元素。querySelectorAll方法返回一个静态的NodeList对象，包含所有符合选择器的元素。

// HTML结构
<div>
    <div class="sibling"></div>
    <div class="sibling"></div>
    <div class="sibling"></div>
</div>

// JavaScript代码
var siblings = document.querySelectorAll('.sibling');

console.log(siblings); // 输出所有同级元素

上面的代码通过querySelectorAll方法选择所有class为”sibling”的元素，得到一个包含所有同级元素的NodeList对象。

4. 使用CSS选择器获取同级元素

除了以上方法外，我们还可以通过CSS选择器来获取同级元素，这样可以更加方便地选择元素，同时也可以结合CSS样式一起使用。

// HTML结构
<div>
    <div class="sibling"></div>
    <div class="sibling"></div>
    <div class="sibling"></div>
</div>

// JavaScript代码
var siblings = document.querySelectorAll('div > .sibling');

console.log(siblings); // 输出所有同级元素

上面的代码通过CSS选择器div > .sibling选择所有class为”sibling”的元素，>表示选择直接子元素，从而获取所有同级元素。

总结

通过以上方法，我们可以在JavaScript中轻松地获取同级元素，并进行相应的DOM操作。无论是通过父元素的childNodes属性、nextSibling和previousSibling属性、querySelectorAll方法还是CSS选择器，都可以实现对同级元素的选择和操作。在实际开发中，根据具体情况选择合适的方法来获取同级元素，从而实现所需的功能。