JavaScript教程：深入理解DOM导航与遍历-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00066/article/details/148416583

JavaScript教程：深入理解DOM导航与遍历

zh.javascript.info 现代 JavaScript 教程（The Modern JavaScript Tutorial），以最新的 ECMAScript 规范为基准，通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript 相关知识。项目地址: https://gitcode.com/gh_mirrors/zh/zh.javascript.info

前言

DOM（文档对象模型）是JavaScript与网页交互的核心。理解如何高效地遍历和导航DOM树，是每个前端开发者必备的基础技能。本文将全面介绍DOM导航的各种方法和技巧，帮助你掌握在DOM树中自由移动的能力。

DOM基础结构

DOM将HTML文档表示为节点树，其中每个HTML元素、属性和文本都是树中的一个节点。理解DOM结构是导航的前提：

文档节点：整个文档的根节点
元素节点：HTML标签
文本节点：元素中的文本内容
属性节点：元素的属性

顶层节点访问

在DOM中，有几个顶层节点可以直接通过document对象访问：

// 获取<html>元素
const htmlElement = document.documentElement;

// 获取<body>元素
const bodyElement = document.body;

// 获取<head>元素
const headElement = document.head;

重要提示：document.body在脚本位于<head>中时可能为null，因为此时浏览器尚未解析到<body>标签。

子节点导航

childNodes集合

childNodes返回指定节点的所有子节点，包括元素节点、文本节点和注释节点：

// 遍历body的所有子节点
for (let node of document.body.childNodes) {
    console.log(node);
}

firstChild和lastChild

这两个属性提供了快速访问首尾子节点的方式：

const firstChild = document.body.firstChild;
const lastChild = document.body.lastChild;

hasChildNodes方法

检查节点是否有子节点：

if (document.body.hasChildNodes()) {
    console.log('body有子节点');
}

兄弟节点和父节点

兄弟节点访问

// 下一个兄弟节点
const nextSibling = document.head.nextSibling;

// 上一个兄弟节点
const prevSibling = document.body.previousSibling;

父节点访问

const parent = document.body.parentNode; // 通常是html元素

纯元素导航

有时我们只需要处理元素节点，忽略文本和注释节点：

// 只获取元素子节点
const children = document.body.children;

// 第一个元素子节点
const firstElement = document.body.firstElementChild;

// 最后一个元素子节点
const lastElement = document.body.lastElementChild;

// 前一个兄弟元素
const prevElement = document.body.previousElementSibling;

// 下一个兄弟元素
const nextElement = document.body.nextElementSibling;

// 父元素
const parentElement = document.body.parentElement;

注意：parentElement与parentNode的区别在于前者只返回元素节点，而后者返回任何类型的父节点。

特殊元素的导航

表格导航

表格元素提供了专门的导航属性：

const table = document.getElementById('myTable');

// 获取所有行
const rows = table.rows;

// 获取表头
const thead = table.tHead;

// 获取表尾
const tfoot = table.tFoot;

// 获取所有tbody
const tbodies = table.tBodies;

// 获取tbody中的行
const tbodyRows = table.tBodies[0].rows;

// 获取行中的单元格
const cells = rows[0].cells;

// 获取单元格在行中的索引
const cellIndex = cells[0].cellIndex;

集合特性

DOM集合有几个重要特性需要了解：

实时性：大多数DOM集合是实时的，会反映DOM的当前状态
只读性：不能直接修改集合，需要通过专门的方法操作DOM
类数组：可以使用Array.from()转换为真正的数组

// 将childNodes转换为数组
const nodesArray = Array.from(document.body.childNodes);

最佳实践

优先使用元素导航：当只需要处理元素时，使用children而非childNodes
注意null检查：在访问可能不存在的节点前进行检查
缓存DOM引用：频繁访问的节点应该缓存引用以提高性能
避免深度嵌套遍历：复杂的DOM遍历会影响性能

总结

DOM导航是JavaScript操作网页的基础，掌握各种导航方法和属性对于高效开发至关重要。记住：

了解不同类型的节点和它们的访问方式
区分包含所有节点的导航和只包含元素的导航
熟悉特殊元素如表格的专用导航方法
理解DOM集合的特性及其限制

通过合理运用这些导航技术，你将能够在DOM树中自由移动，精确地定位和操作任何需要的元素。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考