【DOM】遍历

最新推荐文章于 2025-03-20 12:59:32 发布

一颗去去

最新推荐文章于 2025-03-20 12:59:32 发布

阅读量510

点赞数 1

分类专栏： HTML 文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/liuxiaoqi_123/article/details/143176446

版权

HTML 专栏收录该内容

8 篇文章

订阅专栏

🌳使用 JavaScript 遍历 DOM

DOM（Document Object Model，文档对象模型）遍历是指在网页的文档结构中，按照一定的顺序访问或搜索DOM树中的节点。DOM树是由HTML或XML文档中的元素、属性和文本组成的树状结构，它允许编程语言如JavaScript来动态地访问和修改文档的内容、结构和样式。

一些常见的 DOM 遍历方法有：

parentNode：访问节点的父节点。
childNodes：访问元素的所有子节点。
firstChild和lastChild：获取元素的第一个和最后一个子元素。
nextSibling和previousSibling：导航到相邻节点（兄弟元素）。

HTML 结构

<!DOCTYPE html>
<html>
  <head>
    <title>My Sample Web Page</title>
    <meta charset="UTF-8">
    <style>
      body { font-family: Arial, sans-serif; }
      .container { padding: 20px; border: 1px solid #ddd; }
      .important { color: red; font-weight: bold; }
    </style>
  </head>
  <body>
    <header>
      <h1>Welcome to My Web Page</h1>
      <nav>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>
    
    <section class="container">
      <h2 class="important">About This Page</h2>
      <p>This is a sample page to demonstrate DOM traversal in JavaScript.</p>
      <div class="info">
        <p>This section contains <span>important</span> information.</p>
      </div>
      <ul>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
      </ul>
      <!-- Comment: This is a DOM comment node -->
    </section>
    
    <footer>
      <p>&copy; 2024 My Web Page</p>
    </footer>
  </body>
</html>

DOM 树

html (DOCUMENT_NODE)
└── head
    ├── title
    ├── meta
    ├── style
└── body
    ├── header
    │   ├── h1
    │   └── nav
    │       └── ul
    │           ├── li
    │           ├── li
    │           └── li
    ├── section
    │   ├── h2
    │   ├── p
    │   ├── div
    │   │   └── p
    │   │       └── span
    │   └── ul
    │       ├── li
    │       ├── li
    │       └── li
    └── footer
        └── p

🌳使用 JavaScript 遍历 DOM

1. 访问父节点（`parentNode`）

const navElement = document.querySelector('nav');
const parentOfNav = navElement.parentNode;
console.log(parentOfNav);

2. 访问子节点（`childNodes`）

const section = document.querySelector('section');
const childrenOfSection = section.childNodes;
console.log(childrenOfSection);

3. 第一个和最后一个节点

const firstChildOfSection = section.firstChild;
const lastChildOfSection = section.lastChild;
console.log(lastChildOfSection);

4. 导航兄弟节点

const firstListItem = document.querySelector('ul li');
const nextSiblingOfFirstItem = firstListItem.nextSibling;
console.log(nextSiblingOfFirstItem);

5. 访问特定后代

const pInDiv = section.querySelector('div p');
const ulElement = document.querySelector('ul');
const ulChildren = ulElement.children;
console.log(ulChildren);

🌳示例

// Step 1: 选择第一个列表项
const firstItem = document.querySelector('ul li');
// Step 2: 使用nextSibling或nextElementSibling导航到第二项
const secondItem = firstItem.nextElementSibling;
// Step 3: 更改第二项的文本
secondItem.textContent = 'Updated Second Item';
// Step 4: 应用新样式来突出显示它
secondItem.style.color = 'blue';
secondItem.style.fontWeight = 'bold';
console.log(secondItem);  // 输出更新的第二个< li >元素

🌳DOM 遍历的要点

DOM树表示 HTML 文档的层次结构，可以使用JavaScript遍历每个节点。
使用parentNode、childNodes、firstChild、lastChild、nextSibling和等属性previousSibling在节点之间导航。
遍历 DOM 时要注意文本节点和注释节点，因为它们可能会影响导航。
DOM 遍历功能强大，可以响应用户交互来动态访问、操作和更新文档。