JS_HTML_DOM

原文链接

什么是 DOM

DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：

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

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

核心 DOM - 针对任何结构化文档的标准模型

XML DOM - 针对 XML 文档的标准模型

HTML DOM - 针对 HTML 文档的标准模型

注意：DOM 是 Document Object Model（文档对象模型）的缩写

什么是 HTML DOM

HTML DOM 是：

HTML 的标准对象模型；HTML 的标准编程接口；W3C 标准

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准

HTML DOM(文档对象模型)

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素

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

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML

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

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

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

JavaScript 能够对页面中的所有事件做出反应

DOM Nodes

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点。每个 HTML 元素是元素节点。HTML 元素内的文本是文本节点。每个 HTML 属性是属性节点。注释是注释节点

节点父、子和同胞

节点树中的节点彼此拥有层级关系。父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）。每个节点都有父节点、除了根（它没有父节点）。一个节点可拥有任意数量的子。同胞是拥有相同父节点的节点

这里有两个特殊的属性，可以访问全部文档：

document.documentElement - 全部文档

document.body - 文档的主体

查找 HTML 元素

通常，通过JavaScript，您需要操作 HTML 元素。为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

1.通过 id 找到 HTML 元素

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

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

如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。如果未找到该元素，则 x 将包含 null

2.通过标签名找到 HTML 元素

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

3.通过类名找到 HTML 元素

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

HTML DOM 改变 HTML 内容

HTML DOM 允许 JavaScript 改变 HTML 元素的内容

改变 HTML 输出流

JavaScript 能够创建动态的 HTML 内容：

document.write(Date());//显示今天的日期

绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档

改变 HTML 内容