HTML DOM 教程

HTML DOM (Document Object Model) 教程

HTML DOM 代表 Document Object Model (文档对象模型) ，它定义了 HTML 页面上所有元素的对象及属性，并规定了访问和操作这些对象的方法。HTML DOM 是一种从程序中访问 HTML 元素的标准方法。

HTML DOM 遵循树状模型，可以通过 DOM 树上的父、子、兄弟等关系，找到任何一个节点（节点可以是元素节点、文本节点或属性节点）。

我们可以使用 JavaScript 来操作 HTML DOM 中的元素及属性，例如文本、标签、属性等，从而实现对页面的自由控制。

HTML DOM 树状结构

HTML DOM 模型中的最高层是 Document 对象，即文档对象，它代表整个 HTML 文档，这个文档对象也是 DOM 树的根节点。

HTML DOM 属性

使用 HTML DOM，您可以更改 HTML 元素的样式、属性和内容。

以下是一些可以使用 HTML DOM 改变的 HTML 属性：

改变 HTML 内容
改变 HTML 属性
改变 CSS 样式
改变 HTML 事件

下面是一些示例：

// 改变 HTML 内容
document.getElementById("myID").innerHTML="hello world!";

// 改变 HTML 属性
document.getElementById("myID").src="newimage.gif";

// 改变 CSS 样式
document.getElementById("myID").style.color="blue";

// 改变 HTML 事件
document.getElementById("myID").onclick=function(){alert('Hello World!');}

HTML DOM 事件

HTML DOM 模型中的事件是用户和浏览器之间的交互，也是用户和网页之间的交互。

例如，当用户单击按钮时，就会发生 “click” 事件。它是浏览器检测到的，它会出发一个 JavaScript 函数并执行这个函数。

以下是 HTML DOM 中一些常用的事件：

onclick - 当用户点击时触发
onchange - 当元素改变时触发
onmouseover - 当鼠标移动到元素上时触发
onmouseout - 当鼠标移动到元素外时触发
onkeydown - 当用户在触发元素上按下键时触发

例如：

<!DOCTYPE html>
<html>
<head>
	<title>HTML DOM 事件</title>
	<script>
		function myFunction() {
			document.getElementById("demo").innerHTML = "Hello World!";
		}
	</script>
</head>
<body>

	<button onclick="myFunction()">点击我</button>

	<p id="demo"></p>

</body>
</html>

DOM 遍历和查询

我们可以使用 DOM 方法来查询和拖动元素。以下是一些例子：

// 获取元素
document.getElementById("myID"); // 通过 id 获取
document.getElementsByTagName("p"); // 通过标签名获取
document.getElementsByClassName("myClass"); // 通过类名获取

// 改变元素
document.getElementById("myID").innerHTML = "Hello World!"; // 改变元素内容
document.getElementById("myID").style.color = "red"; // 改变元素颜色

总结

HTML DOM 提供了一种以编程方式访问 HTML 元素的方法，使得 JavaScript 能够与 HTML 标记交互，从而通过编程实现对文档的控制。您可以使用它来改变网页的样式、结构、内容、事件等。同时，您也可以使用它来动态地生成 HTML 或 XML，以及通过 AJAX 技术向服务器发送和接收数据。

HTML DOM 属性 HTML DOM 方法