通过 HTML DOM,JavaScript 能够访问和改变 HTML 文档的所有元素
HTML DOM (文档对象模型)
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)
HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了:
- 作为对象的 HTML 元素
- 所有 HTML 元素的属性
- 访问所有 HTML 元素的方法
- 所有 HTML 元素的事件
换言之:HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。
HTML DOM模型被结构化为对象树
通过这个对象模型,JavaScript 获得创建动态 HTML 的所有力量:
- JavaScript 能改变页面中的所有 HTML 元素
- JavaScript 能改变页面中的所有 HTML 属性
- JavaScript 能改变页面中的所有 CSS 样式
- JavaScript 能删除已有的 HTML 元素和属性
- JavaScript 能添加新的 HTML 元素和属性
- JavaScript 能对页面中所有已有的 HTML 事件作出反应
- JavaScript 能在页面中创建新的 HTML 事件
HTML DOM Document 对象
文档对象代表网页,要访问HTML页面中的任何元素,总是从访问document对象开始
查找HTML元素
- 通过 id 查找 HTML 元素
- 通过标签名查找 HTML 元素
- 通过类名查找 HTML 元素
- 通过 CSS 选择器查找 HTML 元素
- 通过 HTML 对象集合查找 HTML 元素
改变HTML元素的内容
-
改变HTML输出流 —— document.write()
注意:千万不要在文档加载后使用 document.write(),因为这么做会覆盖文档
-
改变HTML内容 —— innerHTML属性
-
改变属性的值
document.getElementById(id).attribute = new_value;
更改HTML元素的样式
document.getElementById(id).style.property = new_style;
// 例如:
document.getElementById("p2").style.color = "blue";
事件监听之参数的传递
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
});
function myFunction(a, b) {
var result = a * b;
document.getElementById("demo").innerHTML = result;
}
事件冒泡还是事件捕获
在 HTML DOM 中有两种事件传播的方法:冒泡和捕获。
事件传播是一种定义当发生事件时元素次序的方法。假如 <div>
元素内有一个 <p>
,然后用户点击了这个 <p>
元素,应该首先处理哪个元素“click”事件?
-
在冒泡中,最内侧元素的事件会首先被处理,然后是更外侧的:首先处理
<p>
元素的点击事件,然后是<div>
元素的点击事件 -
在捕获中,最外侧元素的事件会首先被处理,然后是更内侧的:首先处理
<div>
元素的点击事件,然后是<p>
元素的点击事件
在 addEventListener() 方法中,能够通过使用“useCapture”参数来规定传播类型
addEventListener(event, function, useCapture);
// 默认值是 false,将使用冒泡传播,如果该值设置为 true,则事件使用捕获传播。
(未完待续)