Js获取下一个兄弟元素

在JavaScript中，可以使用 `nextElementSibling` 属性来获取下一个兄弟元素。该属性返回下一个兄弟元素节点（不包括文本节点和注释节点）。

例如，如果有一个元素节点和一个文本节点相邻，使用 `nextElementSibling` 属性则会返回下一个元素节点，而不是文本节点。

下面是一个例子：

<div id="parent">
  <div class="sibling1"></div>
  <p class="sibling2"></p>
  <span class="sibling3"></span>
</div>

var sibling1 = document.querySelector('.sibling1');
var sibling2 = sibling1.nextElementSibling;
var sibling3 = sibling2.nextElementSibling;

console.log(sibling2); // <p class="sibling2"></p>
console.log(sibling3); // <span class="sibling3"></span>

相关问题

js 获取某个元素的上一个兄弟元素

可以使用 JavaScript 中的 `previousSibling` 属性来获取某个元素的上一个兄弟元素，但该属性会把空白符也算作兄弟元素，需要注意。如果要获取上一个非空白符兄弟元素，可以使用 `previousElementSibling` 属性。

例如，假设 HTML 代码如下：

<div class="wrapper">
  <h1>标题1</h1>
  <p>段落1</p>
  <p>段落2</p>
  <h2>标题2</h2>
</div>

如果要获取第二个段落元素的上一个兄弟元素，可以使用以下代码：

const paragraph2 = document.querySelector('.wrapper').querySelectorAll('p')[1];
const previousSibling = paragraph2.previousElementSibling;
console.log(previousSibling);

上述代码中，`querySelector` 方法用于获取包含段落元素的父元素 `.wrapper`，`querySelectorAll` 方法用于获取所有的段落元素，并从中选取第二个元素。最后，使用 `previousElementSibling` 属性获取第二个段落元素的上一个兄弟元素，即第一个段落元素。

html获取上一个兄弟元素

在HTML中，如果你想获取某个元素的上一个同级兄弟元素，你可以直接通过JavaScript的DOM（Document Object Model）方法来操作。例如，假设有一个`<div>`元素，你可以使用`previousElementSibling`属性来获取它前面的兄弟元素。如果该元素是第一个兄弟元素，这个属性将返回`null`。

下面是一个简单的示例：

// 假设我们有以下HTML结构：
// <ul>
//   <li id="item1">Item 1</li>
//   <li id="item2">Item 2</li>
// </ul>

var currentItem = document.getElementById('item2'); // 获取id为"item2"的元素

var previousItem = currentItem.previousElementSibling; // 获取上一个兄弟元素

if (previousItem) {
    console.log(previousItem.textContent); // 输出 "Item 1"
} else {
    console.log("这是列表的第一个元素");
}