DOM 参考手册学习笔记

什么是DOM？

DOM（文档对象模型）是一种用于表示和操作HTML和XML文档的API（应用程序接口）。DOM以树形结构表示文档，使开发人员可以轻松地选择、访问、添加或删除文档中的元素和内容。

HTML DOM

HTML DOM 是针对 HTML 文档的标准，它定义了：

所有 HTML 元素的对象和属性
所有 HTML 事件的对象和属性
所有 HTML 方法的对象和属性
以及更多！

例如，要通过ID获取HTML元素，可以使用以下代码：

javascriptCopy Code
var element = document.getElementById("myId");

CSS DOM

CSS DOM 是针对 CSS 文档的标准，它定义了：

所有样式表的对象和属性
所有样式规则的对象和属性
以及更多！

例如，要通过类名获取所有具有类名“myClass”的元素，可以使用以下代码：

javascriptCopy Code
var elements = document.getElementsByClassName("myClass");

示例

以下是一个简单的示例，演示如何使用DOM API向HTML文档中添加新元素：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
	<title>DOM Example</title>
</head>
<body>
	<div id="myDiv">
		<p>这是一个段落。</p>
	</div>

	<script>
		var newElement = document.createElement("h1");
		var textNode = document.createTextNode("这是一个标题。");
		newElement.appendChild(textNode);
		document.getElementById("myDiv").appendChild(newElement);
	</script>
</body>
</html>

这段代码创建了一个新的 <h1> 元素，添加了一个文本节点，并将其作为子元素添加到具有ID“myDiv”的 <div> 元素中。

结论

DOM是Web开发的重要组成部分，它使我们能够轻松地操作HTML和XML文档的内容和结构。学习DOM API的使用方法可以使我们更有效地开发网页和应用程序。