1. 什么是 DOM？
DOM 是一项 W3C (World Wide Web Consortium) 标准。
DOM 定义了访问文档的标准：
“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：
- Core DOM - 所有文档类型的标准模型
- XML DOM - XML 文档的标准模型
- HTML DOM - HTML 文档的标准模型
2. HTML DOM（文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被结构化为对象树：
对象的 HTML DOM 树
1. 什么是 HTML DOM？
HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：
- 作为对象的 HTML 元素
- 所有 HTML 元素的属性
- 访问所有 HTML 元素的方法
- 所有 HTML 元素的事件
换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。
innerHTML 属性
获取元素内容最简单的方法是使用 innerHTML 属性。
innerHTML 属性可用于获取或替换 HTML 元素的内容。
innerHTML 属性可用于获取或改变任何 HTML 元素，包括 <html> 和 <body>。
document.write 写入文档
2. dom选择器 (查找 HTML 元素)
| 方法 | 描述 |
|---|---|
| document.getElementById(id) | 通过元素 id 来查找元素(单个) |
| document.getElementsByTagName(name) | 通过标签名来查找元素(类数组-多个) |
| getElementsByName(name) | 通过名称获取元素（类数组-多个） |
| document.getElementsByClassName(name) | 通过类名来查找元素（类数组-多个） |
| querySelector(css) | 通过css获取元素（单一） |
| querySelectorAll(css) | 通过css获取元素（多个） |
3. 改变 HTML 元素
| 方法 | 描述 |
|---|---|
| innerText | 改变文本（不能嵌套标签） |
| element.innerHTML = new html content | 改变元素的 inner HTML(可嵌套标签) |
| element.attribute = new value | 改变 HTML 元素的属性值 |
| element.setAttribute(attribute, value) | 改变 HTML 元素的属性值 |
| element.style.property = new style | 改变 HTML 元素的样式 |
4. 添加和删除元素
| 方法 | 描述 |
|---|---|
| document.createElement(element) | 创建 HTML 元素 |
| document.removeChild(element) | 删除 HTML 元素 |
| document.appendChild(element) | 添加 HTML 元素 |
| document.replaceChild(element) | 替换 HTML 元素 |
| document.write(text) | 写入 HTML 输出流 |
5. 添加事件处理程序
| 方法 | 描述 | |
|---|---|---|
| document.getElementById(id).onclick = function(){code} | 向 onclick 事件添加事 | 件处理程序 |
6. document.write()
改变 HTML 输出流
JavaScript 能够创建动态 HTML 内容：
在 JavaScript 中，document.write() 可用于直接写入 HTML 输出流：
实例
document.write(Date());
输出：
- Thu Apr 02 2020 17:52:39 GMT+0800 (中国标准时间)
7. innerHTML
改变 HTML 内容
修改 HTML 文档内容最简单的方法是，使用 innerHTML 属性。
实例 : 修改 <p> 元素的内容
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "hello kitty!";
</script>
8. 改变属性的值
属性操作
- 获取属性 ---------- getAttribute(属性名)
- 设置属性 ---------setAttribute(属性名,属性值)
如需修改 HTML 属性的值，请使用如下语法：
实例 : JavaScript 把此元素的 src 属性从 "smiley.gif" 更改为 "landscape.jpg"
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
3. DOM CSS
1. 改变 HTML 样式
如需更改 HTML 元素的样式，请使用此语法：
document.getElementById(id).style.property = new style
下面的例子更改了 <p> 元素的样式：
实例 :段落被脚本改变
<p id="p2">Hello World!</p>
document.getElementById("p2").style.color = "blue";
4. 动画
<!DOCTYPE html>
<html>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
</style>
<body>
<p><button onclick="myMove()">单击我</button></p>
<div id ="container">
<div id ="animate"></div>
</div>
<script>
function myMove() {
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + "px";
elem.style.left = pos + "px";
}
}
}
</script>
</body>
</html>
5. DOM 事件
1. 事件类型
a . 窗口事件
| 事件 | 解释 |
|---|---|
| scroll | 滚动 |
| load | 加载完毕 |
| resize | 窗口大小发生改变 |
| onload | 当用户进入页面时，会触发 onload |
| onunload | 当用户离开页面时，onunload 事件。 |
onload 和 onunload 事件可用于处理 cookie。
b .鼠标事件
| 事件 | 解释 |
|---|---|
| onclick | 单击 |
| dblclick | 双击 |
| onmouseover | 移入 |
| onmouseout | 移除 |
| onmousemove | 移动 |
| oncontextmenu | 右键 |
| mousewheel | 鼠标滚动 |
c .鼠标之拖动事件
| 事件 | 解释 |
|---|---|
| dragstart | 开始拖动 |
| dragover | 拖动到上方 |
| drop 松开 |
d .表单事件
| 事件 | 解释 |
|---|---|
| onblur | 失去焦点 |
| onfocus | 获取焦点 |
| onsubmit | 提交 |
| onchange | 发生改变 |
change事件
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</head>
<body>
请输入您的名字：<input type="text" id="fname" onchange="myFunction()">
<p>离开输入字段时，会触发一个函数，将输入文本转换为大写。</p>
</body>
</html>
e. 键盘事件
| 事件 | 解释 |
|---|---|
| keyup | 键盘弹起 |
| keydown | 键盘按下 |
| keypress | 键盘按下* |
f .手指事件
| 事件 | 解释 |
|---|---|
| touchstart | 开始触摸 |
| touchmove | 触摸移动 |
| touchend | 结束触摸 |
2. 事件监听器
a. 事件流类型
冒泡流
最小最具体的元素得到事件，再逐级向上传递
捕获流
和冒泡相反
事件冒泡还是事件捕获？
在 HTML DOM 中有两种事件传播的方法：冒泡和捕获。
事件传播是一种定义当发生事件时元素次序的方法。假如 <div> 元素内有一个 <p>，然后用户点击了这个 <p> 元素，应该首先处理哪个元素“click”事件？
在冒泡中，最内侧元素的事件会首先被处理，然后是更外侧的：首先处理 <p> 元素的点击事件，然后是 <div> 元素的点击事件。
在捕获中，最外侧元素的事件会首先被处理，然后是更内侧的：首先处理 <div> 元素的点击事件，然后是 <p> 元素的点击事件。
在 addEventListener() 方法中，你能够通过使用“useCapture”参数来规定传播类型：
addEventListener(event, function, useCapture);
默认值是 false，将使用冒泡传播，如果该值设置为 true，则事件使用捕获传播。
实例
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
b. addEventListener() 方法
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p>此示例使用 addEventListener() 方法将 click 事件附加到按钮。</p>
<button id="myBtn">试一试</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
语法
element.addEventListener(event, function, useCapture);
- 第一个参数是事件的类型（比如 "click" 或 "mousedown"）。
- 第二个参数是当事件发生时我们需要调用的函数。
- 第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。
注意：请勿对事件使用 "on" 前缀；请使用 "click" 代替 "onclick"。
c. 向元素添加事件处理程序
实例
当用户点击某个元素时提示 "Hello World!"：
element.addEventListener("click", function(){ alert("Hello World!"); });
您也可以引用外部“命名”函数：实例
当用户点击某个元素时提示 "Hello World!"：
element.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
d. 向相同元素添加多个事件处理程序
addEventListener() 方法允许您向相同元素添加多个事件，同时不覆盖已有事件：
e. removeEventListener() 方法
removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序：
实例
element.removeEventListener("mousemove", myFunction);
