参考资料

  1. HTML DOM删除下拉列表中的选项
  2. HTML DOM 返回一个button的value 实例
  3. HTML DOM 哪个元素被按下了？
  4. HTML DOM 返回图像映射的某个区域的target的值 实例
  5. HTML DOM改变单元格的内容
  6. HTML DOM 返回文档的完整的URL实例
  7. HTML DOM 返回图像映射的某个区域的protocol 实例
  8. HTML DOM 返回image的替代文本

HTML DOM 导航节点关系

HTML DOM 导航节点关系

详细介绍

HTML DOM (文档对象模型) 提供了多种方式来导航和访问文档中的节点。节点关系指节点之间的层级和连接方式，包括父子关系、兄弟关系等。

主要节点关系属性

父节点关系

  • parentNode - 返回节点的父节点

  • parentElement - 返回节点的父元素节点

子节点关系

  • childNodes - 返回包含所有子节点的 NodeList

  • children - 返回包含所有子元素的 HTMLCollection

  • firstChild - 返回第一个子节点

  • lastChild - 返回最后一个子节点

  • firstElementChild - 返回第一个子元素

  • lastElementChild - 返回最后一个子元素

兄弟节点关系

  • nextSibling - 返回下一个兄弟节点

  • previousSibling - 返回前一个兄弟节点

  • nextElementSibling - 返回下一个兄弟元素

  • previousElementSibling - 返回前一个兄弟元素

用法示例

基本用法

// 获取元素
const element = document.getElementById('example');

// 获取父元素
const parent = element.parentNode;

// 获取所有子元素
const children = element.children;

// 获取下一个兄弟元素
const nextSibling = element.nextElementSibling;

遍历子节点

const parent = document.getElementById('parent');
for (let i = 0; i < parent.children.length; i++) {
  console.log(parent.children[i]);
}

CSS 扩展

:first-child 伪类

选择作为其父元素的第一个子元素的元素

li:first-child {
  color: red;
}

:last-child 伪类

选择作为其父元素的最后一个子元素的元素

li:last-child {
  font-weight: bold;
}

:nth-child() 伪类

选择作为其父元素的第n个子元素的元素

li:nth-child(odd) {
  background-color: #f2f2f2;
}

综合示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .highlight {
      background-color: yellow;
    }
    li:first-child {
      color: blue;
    }
    li:nth-child(3) {
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div id="container">
    <h1>DOM 导航示例</h1>
    <ul id="list">
      <li>第一项</li>
      <li>第二项</li>
      <li>第三项</li>
      <li>第四项</li>
    </ul>
  </div>

  <script>
    const list = document.getElementById('list');
    
    // 获取父元素
    console.log(list.parentNode.id); // "container"
    
    // 获取第一个和最后一个子元素
    const firstItem = list.firstElementChild;
    const lastItem = list.lastElementChild;
    firstItem.classList.add('highlight');
    lastItem.classList.add('highlight');
    
    // 遍历所有子元素
    Array.from(list.children).forEach(item => {
      console.log(item.textContent);
    });
    
    // 使用CSS伪类选择器
    const thirdItem = document.querySelector('#list li:nth-child(3)');
    thirdItem.style.color = 'red';
  </script>
</body>
</html>

功能总结

  1. 允许在DOM树中上下左右导航

  2. 提供多种方式访问相关节点

  3. 可以与CSS选择器结合使用

  4. 支持动态修改文档结构和内容

  5. 为DOM操作和遍历提供基础功能

TAG：节点元素个子关系兄弟方式最后文档所有用法