一、什么是DOM
（1）DOM的定义
? ? ? ?DOM（全称 Document Object Model），即文档对象模型。将文档抽象成一个树型结构，文档中的标签、标签属性或标签内容可以表示为树上的结点。通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
（2）DOM 分类
按照操作对象的不同，可分为Core DOM、XML DOM 和 HTML DOM。
Core Dom：核心Dom，针对任何结构化文档的标准模型。
XML DOM：用于XML文档的标准模型，对XML元素进行操作。
HTML DOM：?用于HTML文档的标准模型，对HTML元素进行操作。
（3）DOM 功能
1、查询某个元素
2、查询某个元素的祖先、兄弟以及后代元素
3、获取、修改元素的属性
4、 获取、修改元素的内容
5、 创建、插入和删除元素
（4）DOM 节点
文档中的所有内容都可表示为一个节点(node)，如：HTML里整个文档、每个标签、每个标签的属性和文本都可作为一个节点。
1、节点分类
在 HTML DOM (Document Object Model) 中 , 每一个元素都是?节点:
- 文档是一个文档节点(Document)。
- 所有的HTML元素都是元素节点(Element)。
- 所有 HTML 属性都是属性节点(Attr)。
- 文本插入到 HTML 元素是文本节点(Text)。
- 注释是注释节点(Comment)。
2、HTML DOM 节点层次
节点彼此都有等级关系：父节点、兄弟节点、子节点等等。
HTML文档转换为HTML DOM节点树
1) <head>元素和<body>元素的父节点为<html>元素。
2) <head>元素和<body>元素为兄弟节点。
3) <title>元素为<head>元素的子节点。
?3、?HTML DOM 节点属性
HTML DOM节点属性，如：innerHTML、innerText、nodeName、nodeValue以及nodeType等。
1、?innerHTML：以HTML代码格式获取或设置节点的内容
2、innerText：获取或设置节点的文本内容
3、nodeName：获取节点名称，只读属性
4、nodeValue：获取或设置节点的值
5、?nodeType：返回节点类型，只读属性
4、获取 HTML 元素节点方法
文档节点(document)、元素节点可以通过getElementById、getElementsByName、getElementsByClassName以及getElementsByTagName方法获取元素节点。
1、getElementById(id) ：获取指定ID的元素
2、getElementsByName(name) ：返回一个包含指定name名称的的元素数组
3、getElementsByClassName(className) ：返回一个包含指定class名称的的元素数组
4、getElementsByTagName(elementName) ：返回一个指定标签名称的的元素数组?
二、?HTML DOM?
（1）查找 HTML 元素
通过 JavaScript，我们可以操作 HTML 元素。
1、通过 id 找到 HTML 元素
在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。
例子（查找 id="intro" 元素）：
var x=document.getElementById("intro");
如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。
如果未找到该元素，则 x 将包含 null。
2、通过标签名找到 HTML 元素
例子（查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素）：
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");3、通过类名找到 HTML 元素
例子（通过?getElementsByClassName函数来查找 class="intro" 的元素）：
var x=document.getElementsByClassName("intro");
（2）改变 ?HTML 元素的内容
1、改变 HTML 输出流
JavaScript 能够创建动态的 HTML 内容：
今天的日期是：?Sun Oct 03 2021 23:31:06 GMT+0800 (中国标准时间)
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>2、改变 HTML 内容
使用?innerHTML 属性可以直接修改内容，语法为document.getElementById(id).innerHTML=新内容
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
</body>
</html>?输出应为“新文本!”
3、改变 HTML 属性
?用document.getElementByID(id).attribute=新属性? ?可以改变 HTML 元素的属性
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>改程序会将属性 "smiley.gif" 改为 "landscape.jpg"
（3）HTML DOM - 改变CSS
1、改变 HTML 样式
?用document.getElementByID(id).style.property=新样式? ?可以改变 HTML 元素的样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
</body>
</html>（4）HTML DOM 事件
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
（5）HTML DOM EventListener
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。
你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。
当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。
你可以使用 removeEventListener() 方法来移除事件的监听。