HTML DOM 导航

HTML DOM（文档对象模型）是一种对 HTML 文档进行访问和操作的标准。在 HTML DOM 中，所有的 HTML 元素都被定义为对象。通过 JavaScript，开发者可以使用 HTML DOM 中的方法和属性来访问网页上的元素，以实现动态效果、数据交互等功能。进行 HTML DOM 导航时，我们需要了解以下几个基本概念。

节点

在 HTML DOM 中，HTML 文档中的每个部分都是一个节点。节点的类型有多种，包括元素节点、文本节点、注释节点等。元素节点是 HTML 文档中的标签，我们可以对它进行增、删、改等操作。文本节点是元素节点的内容，我们也可以对它进行访问和修改。注释节点是以 “” 结束，不会被浏览器渲染的注释内容。

节点关系

在 HTML DOM 树中，每个节点都有父节点、子节点和兄弟节点。父节点就是包含该节点的节点，子节点是该节点的直接下级节点，同级节点是指与该节点同级的所有节点。节点关系可以用如下常用属性来访问：

• parentNode：获取父节点。
• childNodes：获取所有子节点。
• firstChild：获取第一个子节点。
• lastChild：获取最后一个子节点。
• nextSibling：获取下一个兄弟节点。
• previousSibling：获取上一个兄弟节点。

导航方法

在 HTML DOM 中，我们还有一些现成的方法来快速地进行节点访问和操作。以下是一些常用的导航方法。

getElementById

该方法用于获取元素节点的 id 属性值等于指定值的节点。参数为 id 值，返回值为元素节点对象。

var node = document.getElementById("myDiv");

getElementsByTagName

该方法用于获取页面中指定标签名的元素节点。参数为标签名，返回值为对象数组。

var nodes = document.getElementsByTagName("p");

getElementsByClassName

该方法用于获取页面中指定 class 名称的元素节点。参数为 class 名称，返回值为对象数组。

var nodes = document.getElementsByClassName("myClass");

querySelector 和 querySelectorAll

这两个方法是浏览器提供的基于 CSS 选择器的节点访问方法。querySelector 方法用于获取页面中第一个符合选择器的元素节点，返回值为对象。querySelectorAll 方法用于获取页面中所有符合选择器的元素节点，返回值为对象数组。

var node = document.querySelector("#myDiv p:first-child");
var nodes = document.querySelectorAll(".myClass");

HTML DOM 导航是 web 前端开发中的基本技能之一，掌握好节点关系和常用的导航方法，可以帮助我们更加高效地进行网页开发。