js怎么获取同级的其他标签

在JavaScript中，可以通过多种方式获取同级的其他标签，主要方法包括：使用previousElementSibling和nextElementSibling、使用parentNode结合children属性、使用querySelectorAll等。 其中，最常用的是通过parentNode结合children属性获取所有同级元素，然后过滤掉目标元素。以下详细介绍这种方法。

假设我们有一个简单的HTML结构：

<ul id="list">

  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
  <li class="item">Item 4</li>
</ul>

如果我们想获取某个<li>元素的所有同级元素，最直接的方法是通过获取其父元素的所有子元素，然后移除目标元素自身。这种方法不仅简单直接，还能保证我们获取到的是所有同级元素，而不会遗漏或多余。下面将详细介绍具体步骤和代码示例。

一、通过parentNode和children属性获取同级元素

1. 获取目标元素的父元素

首先，我们需要获取目标元素的父元素。可以通过parentNode属性来实现：

let targetElement = document.querySelector('.item:nth-child(2)');

let parentElement = targetElement.parentNode;

2. 获取父元素的所有子元素

接下来，通过父元素的children属性获取所有子元素：

let allSiblings = parentElement.children;

3. 过滤掉目标元素

最后，通过Array.prototype.filter方法过滤掉目标元素自身：

let siblingsArray = Array.prototype.filter.call(allSiblings, function(child) {

    return child !== targetElement;
});

完整代码示例如下：

let targetElement = document.querySelector('.item:nth-child(2)');

let parentElement = targetElement.parentNode;
let allSiblings = parentElement.children;
let siblingsArray = Array.prototype.filter.call(allSiblings, function(child) {
    return child !== targetElement;
});
console.log(siblingsArray); // 输出同级的其他<li>元素

二、使用previousElementSibling和nextElementSibling遍历同级元素

1. 使用previousElementSibling遍历前面的同级元素

通过previousElementSibling属性，可以遍历目标元素前面的所有同级元素：

let previousSiblings = [];

let prev = targetElement.previousElementSibling;
while (prev) {
    previousSiblings.push(prev);
    prev = prev.previousElementSibling;
}

2. 使用nextElementSibling遍历后面的同级元素

同样，通过nextElementSibling属性，可以遍历目标元素后面的所有同级元素：

let nextSiblings = [];

let next = targetElement.nextElementSibling;
while (next) {
    nextSiblings.push(next);
    next = next.nextElementSibling;
}

3. 合并前后同级元素数组

最后，将前面的同级元素数组和后面的同级元素数组合并：

let allSiblings = previousSiblings.concat(nextSiblings);

console.log(allSiblings); // 输出同级的其他<li>元素

完整代码示例如下：

let targetElement = document.querySelector('.item:nth-child(2)');

let previousSiblings = [];
let prev = targetElement.previousElementSibling;
while (prev) {
    previousSiblings.push(prev);
    prev = prev.previousElementSibling;
}
let nextSiblings = [];
let next = targetElement.nextElementSibling;
while (next) {
    nextSiblings.push(next);
    next = next.nextElementSibling;
}
let allSiblings = previousSiblings.concat(nextSiblings);
console.log(allSiblings); // 输出同级的其他<li>元素

三、使用querySelectorAll获取同级元素

1. 获取父元素

首先，获取目标元素的父元素：

let parentElement = targetElement.parentNode;

2. 使用querySelectorAll获取同级元素

接下来，使用querySelectorAll方法获取父元素下的所有子元素：

let allSiblings = parentElement.querySelectorAll('.item');

3. 过滤掉目标元素

最后，通过Array.prototype.filter方法过滤掉目标元素自身：

let siblingsArray = Array.prototype.filter.call(allSiblings, function(child) {

    return child !== targetElement;
});
console.log(siblingsArray); // 输出同级的其他<li>元素

完整代码示例如下：

let targetElement = document.querySelector('.item:nth-child(2)');

let parentElement = targetElement.parentNode;
let allSiblings = parentElement.querySelectorAll('.item');
let siblingsArray = Array.prototype.filter.call(allSiblings, function(child) {
    return child !== targetElement;
});
console.log(siblingsArray); // 输出同级的其他<li>元素

四、综合比较

在实际开发中，选择哪种方法取决于具体需求和代码的上下文。通过parentNode结合children属性获取同级元素的方法最为简单直接，适合大多数场景；使用previousElementSibling和nextElementSibling遍历同级元素的方法更为灵活，可以根据需要选择遍历方向；使用querySelectorAll获取同级元素的方法则适合在已知同级元素具有相同类名或其他属性时使用。

无论选择哪种方法，核心都是通过获取父元素的子元素或遍历兄弟节点来实现。在复杂的DOM结构中，合理选择和组合这些方法，可以高效地获取同级的其他标签。希望这篇文章能对你在实际项目中的开发有所帮助。如果你需要一个高效的项目管理工具，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，它们可以帮助你更好地管理和协作项目。

相关问答FAQs：

1. 如何使用JavaScript获取同级的其他标签？
JavaScript提供了多种方法来获取同级的其他标签。以下是一些常用的方法：

• 使用document.querySelector()方法：该方法可以通过CSS选择器选择同级的其他标签。例如，要获取同级的第一个<div>标签，可以使用document.querySelector('div')。
• 使用document.getElementsByClassName()方法：该方法可以通过类名选择同级的其他标签。例如，要获取所有类名为example的同级标签，可以使用document.getElementsByClassName('example')。
• 使用document.getElementsByTagName()方法：该方法可以通过标签名选择同级的其他标签。例如，要获取所有<p>标签的同级标签，可以使用document.getElementsByTagName('p')。

2. 如何使用JavaScript获取同级的下一个标签？
要获取同级的下一个标签，可以使用nextElementSibling属性。例如，要获取同级的下一个<div>标签，可以使用element.nextElementSibling，其中element是当前标签的引用。如果没有下一个同级标签，则该属性返回null。

3. 如何使用JavaScript获取同级的前一个标签？
要获取同级的前一个标签，可以使用previousElementSibling属性。例如，要获取同级的前一个<div>标签，可以使用element.previousElementSibling，其中element是当前标签的引用。如果没有前一个同级标签，则该属性返回null。