HTML DOM（文档对象模型）是浏览器用于解析和操作网页内容的接口。在网页开发中，熟练掌握DOM的遍历与搜索技巧对于操控网页元素至关重要。本文将详细介绍HTML DOM遍历与搜索的方法，帮助您轻松驾驭网页元素操控。
一、HTML DOM 遍历
1. 节点类型
在HTML DOM中，节点类型是识别元素的基础。以下是常见的节点类型：
Node.ELEMENT_NODE
：元素节点（例如
等）
Node.TEXT_NODE
：文本节点（例如元素内的文字内容）
Node.COMMENT_NODE
：注释节点（例如
）
Node.DOCUMENT_NODE
：文档节点（代表整个文档）
Node.DOCUMENT_TYPE_NODE
：文档类型节点（例如
）
Node.DOCUMENT_FRAGMENT_NODE
：文档片段节点
2. 遍历方法
（1）父节点与子节点
parentNode
：获取当前节点的父节点
childNodes
：获取当前节点的所有子节点（包括元素节点、文本节点等）
children
：获取当前节点的所有元素子节点
firstChild
：获取当前节点的第一个子节点
lastChild
：获取当前节点的最后一个子节点
（2）兄弟节点
previousSibling
：获取当前节点的前一个兄弟节点
nextSibling
：获取当前节点的后一个兄弟节点
（3）遍历所有节点
nodeIterator
：创建一个迭代器，用于遍历节点
TreeWalker
：创建一个树遍历器，用于遍历节点
二、HTML DOM 搜索
1. 查找元素
（1）
getElementById
：通过ID查找元素
var element = document.getElementById(“id”);
（2）
getElementsByClassName
：通过类名查找元素
var elements = document.getElementsByClassName(“class”);
（3）
getElementsByTagName
：通过标签名查找元素
var elements = document.getElementsByTagName(“tag”);
（4）
querySelector
：通过CSS选择器查找元素
var element = document.querySelector(“selector”);
（5）
querySelectorAll
：通过CSS选择器查找所有元素
var elements = document.querySelectorAll(“selector”);
2. 查找特定类型节点
getElementsByTagNameNS
：通过命名空间和标签名查找元素
getElementsByName
：通过name属性查找元素
3. 查找特定属性节点
getElementsByName
：通过name属性查找元素
getElementsByAttribute
：通过属性名和值查找元素
三、实例应用
以下是一个使用DOM遍历与搜索技巧的实例：
// 获取页面中所有div元素
var divs = document.getElementsByTagName(“div”);
// 遍历div元素，并设置其背景颜色
for (var i = 0; i < divs.length; i++) {
divs[i].style.backgroundColor = "red";
}
// 通过querySelector查找具有特定类名的第一个元素
var element = document.querySelector(".class");
// 通过getElementById查找ID为"id"的元素
var element = document.getElementById("id");
通过以上内容，您已经掌握了HTML DOM遍历与搜索技巧。在网页开发过程中，灵活运用这些技巧，可以帮助您轻松操控网页元素，实现丰富的交互效果。