HTML DOM 定义了访问和操作 HTML 文档的标准。

什么是 HTML DOM？

HTML DOM 是：

HTML 的标准对象模型

HTML 的标准编程接口

W3C 标准

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

DOM 节点

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

DOM 节点

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

整个文档是一个文档节点

每个 HTML 元素是元素节点

HTML 元素内的文本是文本节点

每个 HTML 属性是属性节点

注释是注释节点

HTML DOM 节点树

)2MK5SCU1~XW2P~7_EOO%4Q.png

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素(节点)均可被修改，也可以创建或删除节点。

节点父、子和同胞

Paste_Image.png

HTML DOM 示例

Hello world!

上面的 HTML 中：

html节点没有父节点；它是根节点

head 和

文本节点 "Hello world!" 的父节点是 p节点

html 节点拥有两个子节点：

head节点拥有一个子节点：

title 节点也拥有一个子节点：文本节点 "DOM 教程"

head 元素是 元素的首个子节点

body 元素是 元素的最后一个子节点

p 元素是

HTML DOM方法

方法是我们可以在节点(HTML 元素)上执行的动作。

HTML DOM 对象 - 方法和属性：

一些常用的 HTML DOM 方法：

getElementById(id) - 获取带有指定 id 的节点(元素)

appendChild(node) - 插入新的子节点(元素)

removeChild(node) - 删除子节点(元素)

一些常用的 HTML DOM 属性：

innerHTML - 节点(元素)的文本值

parentNode - 节点(元素)的父节点

childNodes - 节点(元素)的子节点

attributes - 节点(元素)的属性节点

1.png

HTML DOM属性

属性是节点(HTML 元素)的值，您能够获取或设置。

innerHTML属性

获取或替换HTML元素的值

nodeName属性

规定节点的名称

nodeName 是只读的

元素节点的 nodeName 与标签名相同

属性节点的 nodeName 与属性名相同

文本节点的 nodeName 始终是 #text

文档节点的 nodeName 始终是 #document

nodeValue属性

规定节点的值

元素节点的 nodeValue值为unfined或者null

文本节点的 nodeValue 是文本本身

属性节点的 nodeValue 是属性值

nodeType属性

返回节点的类型，nodeType是只读的

2.png

HTML DOM 访问

访问 HTML DOM - 查找 HTML 元素。

访问HTML元素

访问 HTML 元素等同于访问节点

通过使用 getElementById() 方法

通过使用 getElementsByTagName() 方法

通过使用 getElementsByClassName() 方法

getElementByld()方法

返回带有指定ID的元素

document.getElementByld("intro");

getElementByTagName()方法

返回带有指定标签名的所有元素

x = document.getElementByTagName("p");

document.write(x[0].innerHTML);

getElementsByClassName()方法

查找带有相同类名的所有HTML元素

document.getElementsByClassName("intro");

HTML DOM 修改

修改 HTML = 改变元素、属性、样式和事件。

修改HTML元素

改变 HTML 内容

改变 CSS 样式

改变 HTML 属性

创建新的 HTML 元素

删除已有的 HTML 元素

改变事件(处理程序)

改变 HTML 内容 innerHTML

改变元素内容的最简答的方法是使用 innerHTML 属性。

document.getElementById("p1").innerHTML="New text!";

改变CSS样式

访问 HTML 元素的样式对象

document.getElementById("p2").style.color="blue";

document.getElementById("p2").style.fontFamily="Arial";

document.getElementById("p2").style.fontSize="larger";

改变HTML属性

如需向 HTML DOM 添加新元素，您首先必须创建该元素(元素节点)，然后把它追加到已有的元素上。

var para=document.createElement("p");

var node=document.createTextNode("This is new.");

para.appendChild(node);

var element=document.getElementById("div1");

element.appendChild(para);

使用事件

当 HTML 元素”有事情发生“时，浏览器就会生成事件：

在元素上点击

加载页面

改变输入字段

DOM 元素

添加、删除和替换 HTML 元素。

创建新的 HTML 元素 - appendChild()

如需向 HTML DOM 添加新元素，您首先必须创建该元素，然后把它追加到已有的元素上。

var para=document.createElement("p"); //创建文本节点

var node=document.createTextNode("This is new."); //向 p 元素追加文本节点

para.appendChild(node); //向已有元素追加这个新元素

创建新的HTML元素 - insertBefore()

appendChild() 方法，将新元素作为父元素的最后一个子元素进行添加。

如果不希望如此，您可以使用 insertBefore() 方法。

删除已有的元素

如需删除 HTML 元素，您必须清楚该元素的父元素

var parent=document.getElementById("div1");

var child=document.getElementById("p1");

parent.removeChild(child);

当想要删除一个子元素但是不知道他的父元素的时候，可以用parentNode来查找他的父元素。

var child=document.getElementById("p1");

child.parentNode.removeChild(child);

替换HTML元素

var parent=document.getElementById("div1");

var child=document.getElementById("p1");

var para=document.createElement("p");

var node=document.createTextNode("This is new.");

para.appendChild(node);

parent.replaceChild(para,child);

HTML DOM 事件

HTML DOM 允许 JavaScript 对 HTML 事件作出反应

对事件作出反应

当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。

HTML 事件的例子：

当用户点击鼠标时

当网页已加载时

当图片已加载时

当鼠标移动到元素上时

当输入字段被改变时

当 HTML 表单被提交时

当用户触发按键时

举例:当鼠标点击文本时h1的内容改变

请点击这段文本！

HTML事件属性

如需向 HTML 元素分配事件，可以使用事件属性

使用 HTML DOM 来分配事件

HTML DOM 允许使用 JavaScript 向 HTML 元素分配事件

举例：为 button 元素分配 onclick 事件：

document.getElementById("myBtn").οnclick=function(){displayDate()};

onload 和 onunload事件

当用户进入或离开页面时，会触发 onload 和 onunload 事件。

onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。

onload 和 onunload 事件可用于处理 cookies。

onchange事件

onchange 事件常用于输入字段的验证。

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。

onmousedown、onmouseup 以及 onclick 事件

onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick 事件。

HTML DOM导航

通过 HTML DOM，您能够使用节点关系在节点树中导航。

HTML DOM 节点列表

getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。

注释：下标号从 0 开始。

HTML DOM 节点列表长度

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

导航节点关系

您能够使用三个节点属性：parentNode、firstChild 以及 lastChild ，在文档结构中进行导航

DOM 根节点

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

document.documentElement - 全部文档

document.body - 文档的主体

childNodes 和 nodeValue

除了 innerHTML 属性，您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。