js相邻的同胞节点

// 假设我们有一个HTML结构如下：
// <div id="parent">
//   <p id="first">First paragraph.</p>
//   <p id="second">Second paragraph.</p>
// </div>

// 获取第一个段落元素
const firstParagraph = document.getElementById('first');

// 获取第一个段落的下一个同胞元素节点（即第二个段落）
const secondParagraph = firstParagraph.nextElementSibling;

// 输出第二个段落的文本内容
console.log(secondParagraph.textContent); // 输出 "Second paragraph."

// 同样地，我们也可以获取第一个段落的上一个同胞元素节点（在这个例子中是null，因为它是第一个子节点）
const previousParagraph = firstParagraph.previousElementSibling;
console.log(previousParagraph); // 输出 null

// 假设我们有一个HTML结构如下：
// <ul>
//   <li>Item 1</li>
//   <li>Item 2</li>
//   <li>Item 3</li>
// </ul>

// 获取第一个列表项元素
const firstListItem = document.querySelector('ul > li');

// 遍历所有的相邻同胞节点
let currentItem = firstListItem;
while (currentItem) {
  console.log(currentItem.textContent);
  currentItem = currentItem.nextElementSibling; // 移动到下一个同胞节点
}
// 输出：
// Item 1
// Item 2
// Item 3