HTML DOM 访问学习笔记

什么是HTML DOM？

HTML DOM(Document Object Model)是一种表示HTML文档的标准对象模型。通过HTML DOM，您可以访问和操作HTML文档的所有元素。

如何访问HTML DOM？

访问HTML DOM的最简单方法是使用JavaScript。以下是访问HTML DOM中元素的一些常用方法：

1. getElementById()

此方法返回具有指定ID的元素。

例如，如果我们想要获取具有"example" ID的元素，我们可以使用以下代码：

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

2. getElementsByClassName()

此方法返回具有指定类名的元素的集合。

例如，如果我们想要获取类名为"example"的所有元素，我们可以使用以下代码：

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

3. getElementsByTagName()

此方法返回具有指定标签名称的元素的集合。

例如，如果我们想要获取所有段落元素，我们可以使用以下代码：

javascriptCopy Code
var paragraphs = document.getElementsByTagName("p");

HTML DOM 实例

以下是一个HTML文档，以及如何使用JavaScript访问和操作HTML DOM元素的一些示例：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
	<title>HTML DOM 示例</title>
</head>
<body>

	<h1>这是一个标题</h1>

	<p>这是一个段落。</p>
	<p>这是另一个段落。</p>

	<button onclick="changeText()">点击这里</button>

	<script>
		function changeText() {
			document.getElementById("demo").innerHTML = "Hello World!";
		}
	</script>

	<p id="demo">JavaScript 可以改变 HTML 元素的内容。</p>

</body>
</html>

在上面的示例中，我们使用了以下方法：

getElementById()：用于获取具有"demo" ID的段落元素。
innerHTML：用于设置元素的文本内容。
onclick：用于指定按钮被点击时要调用的函数。

当用户单击按钮时，changeText() 函数将被调用，并将"demo"元素的内容更改为"Hello World!"。

以上就是HTML DOM访问学习笔记的一些基本内容和实例。希望对您有所帮助！