引言
HTML DOM（文档对象模型）是现代网页编程的核心，它允许开发者通过JavaScript动态地查询、修改和操作网页上的元素。掌握HTML DOM，对于提升网页开发效率至关重要。本文将详细介绍如何查询与修改元素属性，帮助读者解锁网页编程的高效技巧。
HTML DOM基础
什么是HTML DOM？
HTML DOM是一个模型，它将HTML文档描述为一个由节点组成的树状结构。每个节点代表HTML文档中的一个元素，如
、
等。通过DOM，开发者可以轻松地访问和操作这些节点。
DOM节点类型
在HTML DOM中，节点主要有以下几种类型：
元素节点
：代表HTML元素，如
、
等。
文本节点
：代表元素中的文本内容。
属性节点
：代表元素的属性，如
中的
id
属性。
注释节点
：代表HTML文档中的注释。
查询元素
查询元素是DOM操作的基础，以下是一些常用的查询方法：
1. 通过ID查询
var element = document.getElementById(“elementId”);
通过元素的ID查询，返回第一个匹配的元素。
2. 通过标签名查询
var elements = document.getElementsByTagName(“tagName”);
通过标签名查询，返回所有匹配的元素集合。
3. 通过类名查询
var elements = document.getElementsByClassName(“className”);
通过类名查询，返回所有匹配的元素集合。
4. 通过CSS选择器查询
var element = document.querySelector(“CSS选择器”);
通过CSS选择器查询，返回第一个匹配的元素。
修改元素属性
1. 修改元素属性
element.setAttribute(“属性名”, “属性值”);
通过
setAttribute
方法可以修改元素的属性。
2. 获取元素属性
var attributeValue = element.getAttribute(“属性名”);
通过
getAttribute
方法可以获取元素的属性值。
3. 修改元素内容
element.innerHTML = “新内容”;
通过
innerHTML
属性可以修改元素的内容。
element.innerText = “新内容”;
通过
innerText
属性可以修改元素的内容（不包含HTML标签）。
实例
以下是一个修改元素属性的实例：
修改元素属性实例
id
属性。
注释节点
：代表HTML文档中的注释。
查询元素
查询元素是DOM操作的基础，以下是一些常用的查询方法：
1. 通过ID查询
var element = document.getElementById(“elementId”);
通过元素的ID查询，返回第一个匹配的元素。
2. 通过标签名查询
var elements = document.getElementsByTagName(“tagName”);
通过标签名查询，返回所有匹配的元素集合。
3. 通过类名查询
var elements = document.getElementsByClassName(“className”);
通过类名查询，返回所有匹配的元素集合。
4. 通过CSS选择器查询
var element = document.querySelector(“CSS选择器”);
通过CSS选择器查询，返回第一个匹配的元素。
修改元素属性
1. 修改元素属性
element.setAttribute(“属性名”, “属性值”);
通过
setAttribute
方法可以修改元素的属性。
2. 获取元素属性
var attributeValue = element.getAttribute(“属性名”);
通过
getAttribute
方法可以获取元素的属性值。
3. 修改元素内容
element.innerHTML = “新内容”;
通过
innerHTML
属性可以修改元素的内容。
element.innerText = “新内容”;
通过
innerText
属性可以修改元素的内容（不包含HTML标签）。
实例
以下是一个修改元素属性的实例：
原始内容
在这个例子中，点击按钮后，
myDiv
元素的文本颜色和字体大小会发生变化。
总结
掌握HTML DOM，可以帮助开发者轻松查询与修改元素属性，从而提高网页编程的效率。本文介绍了DOM的基础知识、查询元素的方法以及修改元素属性的方法，希望对读者有所帮助。