JavaScript实现获取某个元素相邻兄弟节点的prev与next方法

要实现获取某个元素的相邻兄弟节点，我们可以使用JavaScript提供的DOM API来实现。可以通过元素节点的 previousSibling 和 nextSibling 方法来获取相邻的兄弟节点。

以下是实现获取某个元素相邻兄弟节点的完整攻略：

步骤一：获取元素节点

首先，我们需要获取要查找相邻兄弟节点的元素节点。可以使用 document.getElementById、document.querySelector 等方法获取指定元素节点。

const element = document.getElementById('example');

步骤二：获取相邻兄弟节点

接着，我们可以使用 previousSibling 和 nextSibling 方法获取相邻兄弟节点。需要注意的是，previousSibling 和 nextSibling 所返回的节点可能是空文本节点或注释节点，因此需要使用 nodeType 属性判断。

// 获取前一个相邻兄弟节点
const prevSibling = element.previousSibling;
if (prevSibling && prevSibling.nodeType === 1) {
  console.log(prevSibling);
}

// 获取后一个相邻兄弟节点
const nextSibling = element.nextSibling;
if (nextSibling && nextSibling.nodeType === 1) {
  console.log(nextSibling);
}

示例一：获取某个ul列表项的相邻兄弟节点

假设有如下HTML代码：

<ul>
  <li id="item1">列表项1</li>
  <li id="item2">列表项2</li>
  <li id="item3">列表项3</li>
</ul>

要获取 id 为 item2 的 li 元素节点的前一个和后一个兄弟节点，可以使用以下代码：

const element = document.getElementById('item2');
const prevSibling = element.previousSibling;
const nextSibling = element.nextSibling;

if (prevSibling && prevSibling.nodeType === 1) {
  console.log(prevSibling);
}

if (nextSibling && nextSibling.nodeType === 1) {
  console.log(nextSibling);
}

运行结果会输出 li 元素节点的前一个和后一个兄弟节点。

示例二：获取相邻兄弟节点中的文本内容

假设有如下HTML代码：

<p>前面的文本<span>红色文本</span>后面的文本</p>

要获取 span 元素节点的前一个和后一个兄弟节点中的文本内容，可以使用以下代码：

const element = document.querySelector('span');
const prevSibling = element.previousSibling;
const nextSibling = element.nextSibling;

if (prevSibling && prevSibling.nodeType === 3) {
  console.log(prevSibling.textContent);
}

if (nextSibling && nextSibling.nodeType === 3) {
  console.log(nextSibling.textContent);
}

运行结果会输出 前面的文本 和 后面的文本。