JavaScript DOM(Document Object Model)是一种表示文档结构的对象模型,它将文档表示为树状结构,并且可以使用 JavaScript 来操作和修改这个结构。
DOM 将整个 HTML 或 XML 文档表示为一个树状结构,其中树的每个节点表示一个文档的元素、属性、文本等。通过使用 JavaScript,可以使用 DOM 操作来访问、添加、修改或删除树中的节点和属性。
DOM 结构中的每个节点都有不同的属性和方法,用于访问和操作节点的信息。下面是一些常用的 DOM 属性和方法:
- document.getElementById(id):通过元素的 id 属性获取一个元素节点。
- document.getElementsByClassName(className):通过元素的 class 属性获取一组元素节点。
- document.getElementsByTagName(tagName):通过元素的标签名获取一组元素节点。
- element.parentNode:获取一个元素节点的父节点。
- element.childNodes:获取一个元素节点的所有子节点。
- element.firstChild:获取一个元素节点的第一个子节点。
- element.lastChild:获取一个元素节点的最后一个子节点。
- element.nextSibling:获取一个元素节点的下一个兄弟节点。
- element.previousSibling:获取一个元素节点的上一个兄弟节点。
- element.innerHTML:获取或设置一个元素节点的 HTML 内容。
下面是一个使用 JavaScript DOM 操作的示例:
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1 id="heading">Hello, World!</h1>
<p class="content">This is a paragraph.</p>
<script>
// 获取元素节点并修改内容
var heading = document