📌  相关文章
📜  JavaScript-文档对象模型或DOM(1)

📅  最后修改于: 2023-12-03 15:16:16.742000             🧑  作者: Mango

JavaScript文档对象模型或DOM

JavaScript文档对象模型或DOM（Document Object Model）是一种将 HTML 和 XML 文档作为树结构表示的方式。通过 DOM，开发人员可以轻松地与文档进行交互，并可以使用 JavaScript 动态地修改文档的内容、结构和样式。

定义

DOM 是一组结构化的 HTML 或 XML 标记，这些标记以树形结构排列，表示文档的层次结构。DOM 不仅可以操作已经加载到浏览器中的文档，还可以创建新的文档，同时也可以操作文档的样式和布局。

如何使用 DOM？

DOM 可以使用 JavaScript 来访问和修改 HTML 或 XML 元素和属性。通过使用 DOM，您可以轻松地添加、删除、修改和移动文档中的任何元素。

在 JavaScript 中，可以通过 document 对象来访问 DOM。document 对象表示当前页面的整个文档，可以轻松地使用它来查找和更改文档的元素和属性。

下面是一个例子，通过 document.getElementById() 方法，使用 JavaScript 查找并更改元素的文本内容：

<!DOCTYPE html>
<html>
<head>
	<title>DOM Example</title>
	<script>
		function changeText() {
			document.getElementById("example").innerHTML = "Hello, JavaScript!";
		}
	</script>
</head>
<body>
	<p id="example">This is an example.</p>
	<button onclick="changeText()">Click Me!</button>
</body>
</html>

在这个例子中，我们定义了一个名为 changeText() 的函数，该函数使用 document.getElementById() 方法查找 ID 为 example 的元素，并使用 .innerHTML 属性修改该元素的文本内容为 “Hello, JavaScript!”。按钮和函数的关联通过 onclick 属性实现。

DOM 树结构

DOM 表示文档的树结构，具体来说，DOM 树包括以下几个层次：

  1. 文档节点（document）：即整个文档，是 DOM 树的根节点；
  2. 元素节点（element）：表示 HTML 或 XML 元素；
  3. 属性节点（attribute）：表示 HTML 或 XML 元素的属性；
  4. 文本节点（text）：表示 HTML 或 XML 元素的文本内容；
  5. 注释节点（comment）：表示 HTML 或 XML 中的注释内容。

下面是一个简单的 HTML 文档示例，其 DOM 树结构如下图所示：

<!DOCTYPE html>
<html>
<head>
	<title>DOM Example</title>
</head>
<body>
	<h1>This is a heading</h1>
	<p>This is a paragraph.</p>
</body>
</html>

DOM 树结构示例

DOM 方法和属性

DOM 提供了许多方法和属性，使得开发人员可以方便地操作 HTML 或 XML 元素和属性。

以下是一些 DOM 常用的方法和属性：

  • document.getElementById(id)：通过元素 ID 查找元素；
  • element.innerHTML：获取或设置元素的 HTML 内容；
  • element.style.property：获取或设置元素的样式属性，例如 element.style.width = "100px"；
  • element.setAttribute(attribute, value)：设置元素的属性；
  • element.getAttribute(attribute)：获取元素的属性；
  • event.preventDefault()：阻止事件默认行为；
  • event.stopPropagation()：阻止事件冒泡；
  • element.addEventListener(type, listener)：给元素添加事件监听器；
  • element.removeChild(child)：从元素中删除子元素。
总结

DOM 是 JavaScript 操作 HTML 或 XML 文档的标准方式，它可以将文档表示为树形结构，使得开发人员可以方便地查找和修改文档中的元素和属性。DOM 提供了许多方法和属性，使得开发人员可以轻松地控制文档的内容、样式和行为。