目录
1、什么是DOM
1）是一个标准
2）是一个对象
2、原理及作用
3、Element元素的获取方法
4、方法使用举例
修改页面内容
1）获取DOM元素
2）修改元素内容
3）修改元素属性
4）添加和删除元素
5、应用举例
1、什么是DOM
DOM（Document Object Model，文档对象模型）是一个标准，同时也是基于这个标准在浏览器中实现的一个对象。
1）是一个标准
DOM是W3C（万维网联盟）定义的访问 HTML 和 XML 文档的标准。它定义了表示和修改文档所需的对象和这些对象的行为和属性，以及这些对象之间的关系。标准分为 3 个部分：
- 核心 DOM：任何结构化文档的标准模型，包含Document、Element、Attribute、Text、Comment。
- XML DOM ：XML 文档的标准模型。
- HTML DOM ：HTML 文档的标准模型。
- 在核心 DOM 基础上，对 HTML 中的每个标签都封装成了不同的对象，如<img>标签在浏览器加载到内存中时会被封装成Image对象，同时该对象也是Element对象。
- 例如：<input type='button'>标签在浏览器加载到内存中时会被封装成Button对象，同时该对象也是Element对象。
2）是一个对象
DOM是BOM中window对象的子对象，也是访问和操作HTML文档的入口。通过document对象，可以获取到HTML文档中的元素，并对其进行操作。
它将文档解析为一个由节点（Node）和对象组成的树状结构（节点树），可以使用这些对象，动态地访问和更新HTML文档的内容、结构和样式。
- Document：整个文档，是 DOM 树的根节点。
- Element：文档中的元素，如
<p>、<div>等。Element 对象可以包含其他 Element 对象、Text 对象和 Comment 对象作为子节点。- Attribute：元素的属性，如
class、id、src等，通常附属于 Element 对象。 - Text：元素节点或属性节点中的文本内容。
- Comment：文档中的注释。
- Attribute：元素的属性，如
- Element：文档中的元素，如
2、原理及作用
在浏览器端，网页加载的过程就是DOM树构建的过程：
浏览器加载：
作用：
JavaScript通过DOM对HTML进行操作：
- 改变 HTML 元素的内容
- 改变 HTML 元素的样式(CSS)
- 对 HTML DOM 事件作出反应
- 添加和删除 HTML 元素
3、Element元素的获取方法
获取：通过 Document对象获取（Document对象是通过window对象获取的）：
| 方法名 | 描述 | 示例 |
|---|---|---|
getElementById(id) | 根据元素的ID获取元素对象 | var element = document.getElementById("myId"); |
getElementsByClassName(className) | 根据元素的类名获取元素对象集合（HTMLCollection） | var elements = document.getElementsByClassName("myClass"); |
getElementsByTagName(tagName) | 根据元素的标签名获取元素对象集合（HTMLCollection） | var elements = document.getElementsByTagName("p"); |
getElementsByName(name) | 根据元素的name属性获取元素对象集合（NodeList） | var elements = document.getElementsByName("myName"); |
querySelector(selector) | 返回文档中匹配指定CSS选择器的第一个Element元素 | var element = document.querySelector(".myClass"); |
querySelectorAll(selector) | 返回文档中匹配指定CSS选择器的所有Element元素的NodeList（静态） | var elements = document.querySelectorAll(".myClass"); |
区分：
getElementsByClassName和getElementsByTagName返回的是HTMLCollection对象，而getElementsByName和querySelectorAll返回的是NodeList对象。这两者都是类似数组的对象，可以通过索引访问元素，但它们之间有一些细微的差别，例如NodeList可以通过forEach方法迭代，而HTMLCollection则不能。此外，querySelectorAll返回的NodeList是静态的，即如果后续DOM发生变化，这个列表不会自动更新。
querySelector和querySelectorAll方法使用CSS选择器来查找元素，这使得它们非常强大和灵活，可以匹配复杂的元素模式，在Web中非常常用。
4、方法使用举例
修改页面内容
1）获取DOM元素
使用document.getElementById()、document.getElementsByClassName()、document.getElementsByTagName()、document.querySelector() 或 document.querySelectorAll()等方法获取DOM元素。
var element = document.getElementById('myElement');
使所有的复选框呈现被选中的状态：
//1，获取所有的复选框元素对象
var hobbys = document.getElementsByName("hobby");
//2，遍历数组，通过将复选框元素对象的checked属性值设置为true改变复选框的选中状态
for (let i = 0; i < hobbys.length; i++) {
hobbys[i].checked = true;
}2）修改元素内容
使用.innerHTML或.textContent属性修改元素的内容。
element.innerHTML = '<p>新的段落内容</p>';
element.textContent = '新的文本内容';
3）修改元素属性
使用.setAttribute()方法设置元素的属性。
element.setAttribute('class', 'new-class');
4）添加和删除元素
使用document.createElement()创建新元素，使用.appendChild() 或.insertBefore()将其添加到DOM中，使用.removeChild()删除元素。
var newElement = document.createElement('div');
newElement.textContent = '新元素';
element.appendChild(newElement);
// 删除元素
element.removeChild(newElement);5、应用举例
JavaScript 代码必须位于 <script> 与 </script> 标签之间，在 HTML 文档中可以在任意地方、放置任意数量的<script>标签。
JS代码可以定义在HTML页面中，也可以定义在外部 JS文件中，然后引入到 HTML页面中。
有一个HTML文档，并在<script> </script> 标签中引入了外部JS文件 script.js：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM 应用举例</title>
<style>
#myImage {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h1 id="myTitle">原始标题</h1>
<p id="myParagraph">原始段落文本。</p>
<img id="myImage" src="original-image.jpg" alt="原始图片">
<button id="changeContent">修改内容</button>
<button id="changeStyle">修改样式</button>
<button id="changeAttribute">修改属性</button>
<script src="script.js"></script>
</body>
</html>script.js文件中使用DOM操作这些元素：
document.addEventListener('DOMContentLoaded', function() {
// 获取页面元素
var title = document.getElementById('myTitle');
var paragraph = document.getElementById('myParagraph');
var image = document.getElementById('myImage');
var changeContentButton = document.getElementById('changeContent');
var changeStyleButton = document.getElementById('changeStyle');
var changeAttributeButton = document.getElementById('changeAttribute');
// 修改内容
changeContentButton.addEventListener('click', function() {
title.textContent = '新标题';
paragraph.innerHTML = '<b>新段落文本。</b>';
});
// 修改样式
changeStyleButton.addEventListener('click', function() {
title.style.color = 'red';
paragraph.style.fontSize = '20px';
image.style.border = '5px solid blue';
});
// 修改属性
changeAttributeButton.addEventListener('click', function() {
image.src = 'new-image.jpg'; // 假设有一张新的图片
image.alt = '新图片';
});
});在这个例子中，先通过document.getElementById方法获取了页面上的各个元素。之后为每个按钮添加了点击事件监听器。当点击不同的按钮时，会触发相应的事件处理函数，这些函数使用DOM操作来修改页面元素的内容、样式和属性。
- 修改内容：通过修改元素的textContent和innerHTML属性来改变标题和段落文本的内容。
- 修改样式：通过修改元素的style对象来改变标题、段落和图像的样式。
- 修改属性：通过修改img元素的src和alt属性来更换图片及其描述。
当点击相应的按钮时，这些变化会立即反映在浏览器中的页面上。可见，DOM能够动态地操作网页内容，为用户提供交互式的体验。
