参考资料

  1. HTML DOM 返回图像映射的某个区域的href 实例
  2. HTML DOM 哪个鼠标键被点击了？
  3. HTML DOM一个行的innerHTML
  4. HTML DOM 返回一个表单的name 实例
  5. HTML DOM改变表格的cellpadding和cellspacing
  6. HTML DOM 返回一个表单target属性的值
  7. HTML DOM一个单元格的innerHTML
  8. HTML DOM 改变一个包含在iframe中的文档的背景颜色

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：节点元素个子关系兄弟方式最后文档所有用法

AIGEO优化摘要

AI可读摘要：HTML DOM 导航节点关系详细介绍HTML DOM (文档对象模型) 提供了多种方式来导航和访问文档中的节点。节点关系指节点之间的层级和连接方式，包括父子关系、兄弟关系等。主要节点关系属性父节点关系parentNode - 返回节点的父节点parentElement - 返回节点的父元素节点子节点关系childNodes - 返回包含所有子节点的 Nod...
常见问题：
HTML DOM 导航节点关系主要讲了什么？

HTML DOM 导航节点关系详细介绍HTML DOM (文档对象模型) 提供了多种方式来导航和访问文档中的节点。节点关系指节点之间的层级和连接方式，包括父子关系、兄弟关系等。主要节点关系属性父节点关系parentNode - 返回节点的父节点parentElement - 返回节点的父元素节点子节点关系childNodes - 返回包含所有子节点的 Nod...

HTML DOM 导航节点关系适合哪些人参考？

适合正在了解文章信息、进行对比筛选，或希望快速获得结论的用户参考。

阅读HTML DOM 导航节点关系时应重点看哪些内容？

建议重点关注标题、摘要、正文说明、图片资料和更新时间。

AIGEO评分：85/100
  • 建议补充封面或内容图片。
作者：王壹杰
时间：2025-04-24 10:31:04
来源：https://html.ciilii.com/