js 怎么获取同级元素

如何在 JavaScript 中获取同级元素

在 JavaScript 中，获取同级元素是一项常见的任务，尤其是在需要进行DOM操作和动态内容更新的场景中。可以使用parentNode、children、nextElementSibling、previousElementSibling等方法来获取同级元素。其中，parentNode是最常用的方法之一，因为它允许你访问父节点并获取其所有子节点。接下来，我们将详细介绍这些方法，并给出具体的代码示例。

一、使用 `parentNode` 和 `children`

1.1 获取父节点

使用 parentNode 可以轻松获取当前元素的父节点。通过父节点，我们可以访问该父节点的所有子节点，从而实现获取同级元素的目的。

let currentElement = document.querySelector('.current'); // 获取当前元素
let parentElement = currentElement.parentNode; // 获取父节点

1.2 获取所有子节点

通过获取父节点的 children 属性，我们可以得到一个包含所有子节点的 HTMLCollection。

let siblings = parentElement.children; // 获取所有子节点

1.3 排除当前元素

在获取所有子节点后，我们可以通过循环遍历排除当前元素本身，从而得到所有的同级元素。

let sameLevelElements = [];
for (let i = 0; i < siblings.length; i++) {
    if (siblings[i] !== currentElement) {
        sameLevelElements.push(siblings[i]);
    }
}
console.log(sameLevelElements); // 输出所有同级元素

二、使用 `nextElementSibling` 和 `previousElementSibling`

2.1 获取下一个同级元素

nextElementSibling 属性可以获取当前元素的下一个同级元素。

let nextSibling = currentElement.nextElementSibling;
console.log(nextSibling); // 输出下一个同级元素

2.2 获取上一个同级元素

previousElementSibling 属性可以获取当前元素的上一个同级元素。

let previousSibling = currentElement.previousElementSibling;
console.log(previousSibling); // 输出上一个同级元素

三、结合多种方法获取所有同级元素

通过结合使用 nextElementSibling 和 previousElementSibling，我们可以获取当前元素的所有同级元素。

3.1 获取前面的同级元素

let previousSiblings = [];
let prev = currentElement.previousElementSibling;
while (prev) {
    previousSiblings.push(prev);
    prev = prev.previousElementSibling;
}
previousSiblings.reverse(); // 反转数组，使顺序与DOM中的顺序一致

3.2 获取后面的同级元素

let nextSiblings = [];
let next = currentElement.nextElementSibling;
while (next) {
    nextSiblings.push(next);
    next = next.nextElementSibling;
}

3.3 合并结果

let allSiblings = previousSiblings.concat(nextSiblings);
console.log(allSiblings); // 输出所有同级元素

四、应用场景

4.1 动态更新导航菜单

在动态更新导航菜单时，我们常常需要获取当前选中项的同级元素，以便进行样式更新。

let currentNavItem = document.querySelector('.nav-item.active');
let siblingNavItems = currentNavItem.parentNode.children;
for (let i = 0; i < siblingNavItems.length; i++) {
    siblingNavItems[i].classList.remove('active');
}
currentNavItem.classList.add('active');

4.2 表单验证

在表单验证中，我们可能需要获取当前输入字段的同级元素，以便显示或隐藏错误信息。

let currentInput = document.querySelector('.form-input');
let siblingElements = currentInput.parentNode.children;
for (let i = 0; i < siblingElements.length; i++) {
    if (siblingElements[i].classList.contains('error-message')) {
        siblingElements[i].style.display = 'none';
    }
}

五、总结

通过本文的介绍，我们了解了如何在 JavaScript 中获取同级元素的多种方法，包括使用 parentNode、children、nextElementSibling 和 previousElementSibling 等方法。这些方法各有优劣，具体选择哪种方法取决于具体的应用场景。掌握这些方法可以帮助我们在进行DOM操作时更加灵活和高效。