HTML DOM 对象学习笔记
什么是 HTML DOM？
HTML DOM（文档对象模型）是一种用于访问 HTML 文档中各种元素的标准化编程接口。它允许开发人员使用编程语言（如 JavaScript）来修改、添加、删除 HTML 元素。
如何访问 DOM？
要访问 DOM，可以使用 JavaScript 的 document 对象。该对象表示当前加载的 HTML 页面。可以使用各种属性和方法来访问页面中的各个元素。
javascriptCopy Code// 访问页面标题
var title = document.title;
// 访问 ID 为 element 的元素
var element = document.getElementById("element");
// 访问标记名为 tag 的所有元素
var elements = document.getElementsByTagName("tag");
// 访问类名为 className 的所有元素
var elements = document.getElementsByClassName("className");
如何操作 DOM？
可以使用 DOM 提供的各种属性和方法来操作 HTML 元素。下面是一些常见的示例：
修改 HTML 元素
javascriptCopy Code// 修改元素内容
element.innerHTML = "新内容";
// 修改元素属性
element.setAttribute("属性名", "属性值");
添加 HTML 元素
javascriptCopy Code// 创建新元素
var newElement = document.createElement("tag");
// 将新元素添加到现有元素中
element.appendChild(newElement);
删除 HTML 元素
javascriptCopy Code// 删除元素
element.parentNode.removeChild(element);
实例演示
下面是一个简单的示例，演示如何使用 JavaScript 操作 DOM 元素。该示例包括一个 HTML 文件和一个 JavaScript 文件。
HTML 文件
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<title>DOM 示例</title>
</head>
<body>
<h1 id="title">原始标题</h1>
<p id="content">原始内容</p>
<script src="dom.js"></script>
</body>
</html>
JavaScript 文件
javascriptCopy Code// 获取页面元素
var title = document.getElementById("title");
var content = document.getElementById("content");
// 修改元素内容
title.innerHTML = "新标题";
content.innerHTML = "新内容";
在上述示例中，JavaScript 文件使用 getElementById() 方法获取页面中的两个元素，并使用 innerHTML 属性将它们的内容修改为新值。
总结
HTML DOM 可以让开发人员使用 JavaScript 访问和操作 HTML 页面中的各种元素。使用 DOM 提供的属性和方法，可以轻松地创建、修改和删除 HTML 元素。