DOM 简介学习笔记
什么是DOM？
DOM（文档对象模型）是用来表示和操作HTML、XML文档的API。它将文档视为一个节点树，每个节点都表示文档中的一个元素、属性或文本。
在浏览器中，DOM是由HTML解析器生成的，因此，它反映了当前网页的状态。程序员可以使用DOM API来查询和修改文档内容，例如添加、删除和更改元素。
DOM 树
DOM树是一种层次结构，用于描述HTML文档的结构。每个元素都是一个节点，其中包含子节点（元素或文本）。根据HTML文档的结构，DOM树包含多个层次，使程序员能够方便地访问和操作文档元素。
DOM 操作
通过使用DOM API，可以轻松地访问和操作文档元素。下面是一些常见的DOM操作：
访问元素
Copy Codevar elem = document.getElementById('myElement');
上述代码使用getElementById方法获取id为"myElement" 的元素，并将其存储在变量elem中。
添加元素
Copy Codevar newElem = document.createElement('div');
newElem.innerHTML = 'New Element';
document.body.appendChild(newElem);
上述代码使用createElement方法创建一个新的div元素，并设置其innerHTML为"New Element"。然后，它将新元素添加到文档的body元素中。
删除元素
Copy Codevar elem = document.getElementById('myElement');
elem.parentNode.removeChild(elem);
上述代码使用parentNode和removeChild方法来删除id为"myElement"的元素。
实例
以下是一个使用DOM操作的实例。该实例创建了一个包含3个按钮的HTML文档。当用户单击任何一个按钮时，它将修改文档中的标题。
Copy Code<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1 id="myTitle">Initial Title</h1>
<button id="button1">Button 1</button>
<button id="button2">Button 2</button>
<button id="button3">Button 3</button>
<script type="text/javascript">
// 获取标题元素
var title = document.getElementById('myTitle');
// 获取按钮元素并添加单击事件
document.getElementById('button1').onclick = function() {
title.innerHTML = 'Button 1 Clicked';
};
document.getElementById('button2').onclick = function() {
title.innerHTML = 'Button 2 Clicked';
};
document.getElementById('button3').onclick = function() {
title.innerHTML = 'Button 3 Clicked';
};
</script>
</body>
</html>
上述代码创建了一个初始标题为"Initial Title"的H1元素，并在其下方添加了3个按钮。当用户单击这些按钮中的任何一个时，它将修改标题元素的innerHTML，从而更改文档标题。