JavaScript HTML DOM学习笔记

一、简介JavaScript HTML DOM

JavaScript HTML DOM

通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。

HTML DOM（文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被结构化为对象树：

对象的 HTML DOM 树

通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：

• JavaScript 能改变页面中的所有 HTML 元素

• JavaScript 能改变页面中的所有 HTML 属性

• JavaScript 能改变页面中的所有 CSS 样式

• JavaScript 能删除已有的 HTML 元素和属性

• JavaScript 能添加新的 HTML 元素和属性

• JavaScript 能对页面中所有已有的 HTML 事件作出反应

• JavaScript 能在页面中创建新的 HTML 事件

什么是 DOM？

DOM 是一项 W3C (World Wide Web Consortium) 标准。

DOM 定义了访问文档的标准：

“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分：

• Core DOM - 所有文档类型的标准模型

• XML DOM - XML 文档的标准模型

• HTML DOM - HTML 文档的标准模型

什么是 HTML DOM？

HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：

• 作为对象的 HTML 元素

• 所有 HTML 元素的属性

• 访问所有 HTML 元素的方法

• 所有 HTML 元素的事件

换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

二、JavaScript - HTML DOM 方法

JavaScript - HTML DOM 方法

三、JavaScript HTML DOM 文档

JavaScript HTML DOM 文档

HTML DOM 文档对象是您的网页中所有其他对象的拥有者。

HTML DOM Document 对象

文档对象代表您的网页。

如果您希望访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始。

下面是一些如何使用 document 对象来访问和操作 HTML 的实例。

查找 HTML 元素

方法	描述
document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素

改变 HTML 元素

方法	描述
element.innerHTML = new html content	改变元素的 inner HTML
element.attribute = new value	改变 HTML 元素的属性值
element.setAttribute(attribute, value)	改变 HTML 元素的属性值
element.style.property = new style	改变 HTML 元素的样式

添加和删除元素

方法	描述
document.createElement(element)	创建 HTML 元素
document.removeChild(element)	删除 HTML 元素
document.appendChild(element)	添加 HTML 元素
document.replaceChild(element)	替换 HTML 元素
document.write(text)	写入 HTML 输出流

添加事件处理程序

方法	描述
document.getElementById(id).onclick = function(){code}	向 onclick 事件添加事件处理程序

四、JavaScript HTML DOM 元素

JavaScript HTML DOM 元素

查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了达成此目的，您需要首先找到这些元素。有好几种完成此任务的方法：

• 通过 id 查找 HTML 元素

• 通过标签名查找 HTML 元素

• 通过类名查找 HTML 元素

• 通过 CSS 选择器查找 HTML 元素

• 通过 HTML 对象集合查找 HTML 元素

通过 id 查找 HTML 元素

DOM 中查找 HTML 元素最简单的方法是，使用元素的 id。

本例查找 id="intro" 的元素：

实例

var myElement = document.getElementById("intro");

如果元素被找到，此方法会以对象返回该元素（在 myElement 中）。

如果未找到元素，myElement 将包含 null。

通过标签名查找 HTML 元素

本例查找所有 <p> 元素：

实例

var x = document.getElementsByTagName("p");

本例查找 id="main" 的元素，然后查找 "main" 中所有 <p> 元素：

实例

var x = document.getElementById("main");var y = x.getElementsByTagName("p");

通过类名查找 HTML 元素

如果您需要找到拥有相同类名的所有 HTML 元素，请使用 getElementsByClassName()。

本例返回包含 class="intro" 的所有元素的列表：

实例

var x = document.getElementsByClassName("intro");

通过类名查找元素不适用于 Internet Explorer 8 及其更早版本。

通过 CSS 选择器查找 HTML 元素

如果您需要查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素，请使用 querySelectorAll() 方法。

本例返回 class="intro" 的所有 <p> 元素列表：

实例

var x = document.querySelectorAll("p.intro");

querySelectorAll() 不适用于 Internet Explorer 8 及其更早版本。

通过 HTML 对象选择器查找 HTML 对象

本例查找 id="frm1" 的 form 元素，在 forms 集合中，然后显示所有元素值：

实例

var x = document.forms["frm1"];var text = ""; var i;for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

五、JavaScript HTML DOM 集合

JavaScript HTML DOM 集合

HTMLCollection 对象

getElementsByTagName() 方法返回 HTMLCollection 对象。

HTMLCollection 对象是类数组的 HTML 元素列表（集合）。

下面的代码选取文档中的所有 <p> 元素：

实例

var x = document.getElementsByTagName("p");

该集合中的元素可通过索引号进行访问。

如需访问第二个 <p> 元素，您可以这样写：

y = x[1];

注释：索引从 0 开始。

HTML HTMLCollection 长度

length 属性定义了 HTMLCollection 中元素的数量：

实例

var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myCollection.length;

实例解释：

• 创建所有 <p> 元素的集合

• 显示集合的长度

length 属性在您需要遍历集合中元素时是有用的：

实例

改变所有 <p> 元素的背景色：

var myCollection = document.getElementsByTagName("p");var i;for (i = 0; i < myCollection.length; i++) {
    myCollection[i].style.backgroundColor = "red";
}

注意：HTMLCollection 并非数组！

HTMLCollection 也许看起来像数组，但并非数组。

您能够遍历列表并通过数字引用元素（就像数组那样）。

不过，您无法对 HTMLCollection 使用数组方法，比如 valueOf()、pop()、push() 或 join()。

六、JavaScript HTML DOM 节点列表

JavaScript HTML DOM 节点列表

HTML DOM NodeList 对象

NodeList 对象是从文档中提取的节点列表（集合）。

NodeList 对象与 HTMLCollection 对象几乎相同。

如使用 getElementsByClassName() 方法，某些（老的）浏览器会返回 NodeList 对象而不是 HTMLCollection。

所有浏览器都会为 childNodes 属性返回 NodeList 对象。

大多数浏览器会为 querySelectorAll() 方法返回 NodeList 对象。

下面的代码选取文档中的所有 <p> 节点：

实例

var myNodeList = document.querySelectorAll("p");

NodeList 中的元素可通过索引号进行访问。

如需访问第二个 <p> 节点，您可以这样写：

y = myNodeList[1];

注释：索引从 0 开始。

HTML DOM Node List 长度

length 属性定义节点列表中的节点数：

实例

var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = myNodelist.length;

例子解释：

• 创建所有 <p> 元素的列表

• 显示该列表的长度

length 属性在您希望遍历节点列表中的节点时很有用：

实例

改变节点列表中所有 <p> 元素的背景色：

var myNodelist = document.querySelectorAll("p");var i;for (i = 0; i < myNodelist.length; i++) {
    myNodelist[i].style.backgroundColor = "red";
}

HTMLCollection 与 NodeList 的区别

HTMLCollection（前一章）是 HTML 元素的集合。

NodeList 是文档节点的集合。

NodeList 和 HTML 集合几乎完全相同。

HTMLCollection 和 NodeList 对象都是类数组的对象列表（集合）。

它们都有定义列表（集合）中项目数的 length 属性。

它们都可以通过索引 (0, 1, 2, 3, 4, ...) 像数组那样访问每个项目。

访问 HTMLCollection 项目，可以通过它们的名称、id 或索引号。

访问 NodeList 项目，只能通过它们的索引号。

只有 NodeList 对象能包含属性节点和文本节点。

节点列表不是数组！

节点数组看起来像数组，但并不是。

您能够遍历节点列表并像数组那样引用其节点。

不过，您无法对节点列表使用数组方法，比如 valueOf()、push()、pop() 或 join()。