看不见的关系：JavaScript 节点关系

在实际业务开发中，很多场景下，我们需要通过节点之间的关系进行DOM操作，尽管有时候我们使用的是被封装好的库，但是针对不同场景下的DOM操作，了解DOM是如何建立的以及节点与节点之间是怎么组织起来的是很有必要的。

父节点和子节点

父节点是包含另一个节点的节点，子节点是被包含在父节点中的节点。例如，以下HTML代码中，<ul>元素是<li>元素的父节点，而<li>元素是<ul>元素的子节点：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

在JavaScript中，我们可以使用parentNode属性来获取一个节点的父节点，使用childNodes属性来获取一个节点的所有子节点。例如，以下代码获取<li>元素的父节点：

const liElement = document.querySelector('li');
const ulElement = liElement.parentNode;

兄弟节点

兄弟节点是具有相同父节点的节点。例如，以下HTML代码中，<li>元素是彼此的兄弟节点：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

在JavaScript中，我们可以使用previousSibling和nextSibling属性来获取一个节点的兄弟节点。例如，以下代码获取<li>元素的下一个兄弟节点：

const liElement = document.querySelector('li');
const nextLiElement = liElement.nextSibling;

使用节点关系进行DOM操作

了解了节点关系之后，我们就可以使用它们来进行DOM操作。例如，我们可以使用insertBefore()方法将一个节点插入到另一个节点之前，使用appendChild()方法将一个节点追加到另一个节点的末尾，使用removeChild()方法删除一个节点。

以下代码将一个<li>元素插入到另一个<li>元素之前：

const newLiElement = document.createElement('li');
newLiElement.textContent = 'Item 4';

const existingLiElement = document.querySelector('li');
existingLiElement.parentNode.insertBefore(newLiElement, existingLiElement);

总结

JavaScript中的节点关系是DOM操作的基础，了解了节点关系之后，我们就可以轻松地对DOM进行操作，构建出复杂的Web应用程序。