精辟剖析 DOM 节点元素：深入掌握父元素、子元素、兄弟元素

2023-10-29 04:51:05

DOM 元素的亲密关系：父元素、子元素、兄弟元素

在 DOM 中，元素之间存在着一种亲密的关系，主要包括父元素、子元素和兄弟元素。父元素是指包含其他元素的元素，子元素是指被其他元素包含的元素，而兄弟元素是指具有相同父元素的元素。了解这些元素之间的关系对于理解和操作 DOM 至关重要。

parentNode：追溯元素的父级

parentNode 属性可用于获取元素的父元素。它返回一个指向父元素的引用，如果元素没有父元素，则返回 null。

<div id="parent">
  <p id="child">我是子元素</p>
</div>

<script>
  const child = document.getElementById('child');
  const parent = child.parentNode;

  console.log(parent); // 输出: <div id="parent">...</div>
</script>

firstChild 和 lastChild：定位元素的第一个和最后一个子元素

firstChild 和 lastChild 属性分别可用于获取元素的第一个和最后一个子元素。它们返回一个指向第一个或最后一个子元素的引用，如果元素没有子元素，则返回 null。

<ul id="list">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

<script>
  const list = document.getElementById('list');

  const firstItem = list.firstChild;
  const lastItem = list.lastChild;

  console.log(firstItem); // 输出: <li>第一项</li>
  console.log(lastItem); // 输出: <li>第三项</li>
</script>

firstElementChild 和 lastElementChild：精准定位元素的第一个和最后一个元素子节点

firstElementChild 和 lastElementChild 属性与 firstChild 和 lastChild 类似，但它们只返回元素的第一个和最后一个元素子节点，而忽略文本节点和其他非元素节点。

<div id="container">
  <p>文本段落</p>
  <ul>
    <li>第一项</li>
    <li>第二项</li>
  </ul>
</div>

<script>
  const container = document.getElementById('container');

  const firstElementChild = container.firstElementChild;
  const lastElementChild = container.lastElementChild;

  console.log(firstElementChild); // 输出: <p>文本段落</p>
  console.log(lastElementChild); // 输出: <ul>...</ul>
</script>

nextSibling 和 previousSibling：探索元素的兄弟姐妹

nextSibling 和 previousSibling 属性可用于获取元素的下一个和上一个兄弟元素。它们返回一个指向下一个或上一个兄弟元素的引用，如果元素没有兄弟元素，则返回 null。

<ul id="list">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

<script>
  const secondItem = document.getElementById('list').children[1];

  const nextItem = secondItem.nextSibling;
  const previousItem = secondItem.previousSibling;

  console.log(nextItem); // 输出: <li>第三项</li>
  console.log(previousItem); // 输出: <li>第一项</li>
</script>

实际案例与代码示例

动态添加和删除元素

<ul id="list"></ul>

<button id="add-button">添加元素</button>
<button id="remove-button">删除元素</button>

<script>
  const list = document.getElementById('list');
  const addButton = document.getElementById('add-button');
  const removeButton = document.getElementById('remove-button');

  addButton.addEventListener('click', () => {
    const newItem = document.createElement('li');
    newItem.textContent = '新元素';

    list.appendChild(newItem);
  });

  removeButton.addEventListener('click', () => {
    const lastItem = list.lastChild;

    list.removeChild(lastItem);
  });
</script>

遍历元素及其子元素

<ul id="list">
  <li>第一项</li>
  <li>
    第二项
    <ul>
      <li>子项 1</li>
      <li>子项 2</li>
    </ul>
  </li>
  <li>第三项</li>
</ul>

<script>
  const list = document.getElementById('list');

  function traverseElement(element) {
    console.log(element.tagName);

    for (const child of element.children) {
      traverseElement(child);
    }
  }

  traverseElement(list);
</script>