DOM 导航学习笔记

一、DOM 节点的类型

在 JavaScript 中，每个 HTML 元素、属性、文本内容都被表示为一个独立的节点，这些节点按照其关系构成了一个树形结构，我们称之为 DOM 树。

在 DOM 树中，节点分为以下几种类型：

• 元素节点（Element）
• 属性节点（Attribute）
• 文本节点（Text）
• 注释节点（Comment）

二、访问子节点

我们可以通过以下两种方式来访问一个元素节点下的子节点：

1. childNodes 属性

   childNodes 属性返回一个包含该元素节点所有子节点的数组。

   javascriptCopy Code
   const element = document.querySelector('#parent-element');
   const childNodes = element.childNodes;
   

2. children 属性

   children 属性返回一个包含该元素节点所有子元素节点的数组。

   javascriptCopy Code
   const element = document.querySelector('#parent-element');
   const children = element.children;
   

三、访问父节点

我们可以通过以下方式来访问一个元素节点的父节点：

1. parentNode 属性

   parentNode 属性返回该元素节点的父节点。

   javascriptCopy Code
   const element = document.querySelector('#child-element');
   const parentNode = element.parentNode;
   

四、访问兄弟节点

我们可以通过以下方式来访问一个元素节点的兄弟节点：

1. previousSibling 属性

   previousSibling 属性返回该元素节点的前一个兄弟节点。

   javascriptCopy Code
   const element = document.querySelector('#child-element');
   const previousSibling = element.previousSibling;
   

2. nextSibling 属性

   nextSibling 属性返回该元素节点的后一个兄弟节点。

   javascriptCopy Code
   const element = document.querySelector('#child-element');
   const nextSibling = element.nextSibling;
   

五、实例展示

htmlCopy Code
<div id="parent-element">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

<script>
  const parentElement = document.querySelector('#parent-element');
  
  // 访问子节点
  const childNodes = parentElement.childNodes;
  const children = parentElement.children;
  
  // 访问父节点
  const ulElement = document.querySelector('ul');
  const parentNode = ulElement.parentNode;
  
  // 访问兄弟节点
  const firstLi = document.querySelector('li:first-child');
  const previousSibling = firstLi.previousSibling;
  const nextSibling = firstLi.nextSibling;
</script>