HTML DOM（文档对象模型）是用于HTML和XML文档的编程接口，它允许开发者动态地访问和修改文档内容。DOM提供了丰富的API来查询文档状态，这对于构建交互式网页至关重要。本文将详细介绍HTML DOM中用于查询文档状态的技巧，帮助您轻松掌握这些技能。
一、认识DOM
在开始查询DOM之前，了解DOM的基本概念是必要的。DOM将HTML或XML文档视为一个树形结构，每个节点（Node）代表文档中的一个实体，如元素、文本或属性。DOM节点包括：
元素节点（Element Node）
：代表HTML标签，如
等。
文本节点（Text Node）
：包含元素或属性中的文本内容。
属性节点（Attribute Node）
：代表元素的属性，如
class
、
id
等。
注释节点（Comment Node）
：包含注释内容。
二、查询文档状态的基本方法
1. 获取元素节点
要查询DOM状态，首先需要获取对应的元素节点。以下是一些常用的方法：
getElementById()
：通过ID获取单个元素节点。
var element = document.getElementById(“elementId”);
getElementsByClassName()
：通过类名获取多个元素节点。
var elements = document.getElementsByClassName(“className”);
getElementsByTagName()
：通过标签名获取多个元素节点。
var elements = document.getElementsByTagName(“tagName”);
querySelector()
：通过CSS选择器获取单个元素节点。
var element = document.querySelector(“CSS选择器”);
querySelectorAll()
：通过CSS选择器获取多个元素节点。
var elements = document.querySelectorAll(“CSS选择器”);
2. 查询元素属性
获取元素节点后，可以查询其属性，如：
getElementById(“elementId”).getAttribute(“attributeName”)
：获取指定属性的值。
var value = document.getElementById(“elementId”).getAttribute(“attributeName”);
getElementById(“elementId”).setAttribute(“attributeName”, “newValue”)
：设置指定属性的值。
document.getElementById(“elementId”).setAttribute(“attributeName”, “newValue”);
3. 查询元素内容
除了属性，还可以查询元素的内容：
getElementById(“elementId”).innerHTML
：获取元素内部的HTML内容。
var content = document.getElementById(“elementId”).innerHTML;
getElementById(“elementId”).textContent
：获取元素内部的文本内容。
var content = document.getElementById(“elementId”).textContent;
4. 查询元素样式
DOM还允许查询元素的样式：
getElementById(“elementId”).style.propertyName
：获取元素样式的值。
var value = document.getElementById(“elementId”).style.propertyName;
getElementById(“elementId”).style.propertyName = “newValue”
：设置元素样式的值。
document.getElementById(“elementId”).style.propertyName = “newValue”;
三、实例演示
以下是一个简单的实例，演示如何使用DOM查询文档状态：
在这个例子中，我们使用
getElementById()
获取
innerHTML
属性修改其内容。同时，我们使用了
querySelector()
获取