DOM(文档对象模型)

通过 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，则事件使用捕获传播。

（未完待续）