参考资料

  1. HTML DOM 返回一个button的name 实例
  2. HTML DOM 返回文档中的链接数
  3. HTML DOM弹出下拉列表中所有选项
  4. HTML DOM 访问
  5. HTML DOM 方法
  6. HTML DOM 返回一个表单target属性的值
  7. HTML DOM对单个单元格的内容垂直对齐
  8. HTML DOM 返回一个button的value 实例

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操作和遍历提供基础功能