认识 HTML DOM
目录
一、HTML DOM 树
1. HTML DOM 树
2. 节点
二、常用 DOM 对象属性与方法
1. 方法
2. 属性
三、DOM操作
四、DOM事件
五、总结
一、HTML DOM 树
1. HTML DOM 树
DOM即是Document Object Model（文档对象模型）的缩写。简单地讲，HTML DOM 定义了访问和操作 HTML 文档的标准方法，DOM 将 HTML 文档表达为树结构。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
如下图1.1即为一个HTML文档的DOM结构图示。
图1.1 HTML DOM 树结构
2. 节点
在 HTML DOM 中，所有的事物都是节点。因而，上面图中，这棵树有许多的节点构成，所以也可以叫做节点树。如整个文档 Document 可以看做一个节点；HTML 元素，如 head、body、div 等也可以看做一个节点；同样，HTML 元素内的文本及 HTML 属性也可以看做文本节点与属性节点；甚至注释也可以看做注释节点。
节点树中的节点与节点之间之间拥有层级关系，如下图1.2所示。
图1.2 节点之间的关系
如下面的代码：
<!DOCTYPE html>
<head>
<title>我是标题</title>
</head>
<body>
<h1>认识 HTML DOM </h1>
<p>Hello world!</p>
</body>
</html>
从上面的 HTML 中可以看出：
- <html> 节点没有父节点；它是根节点
- <head> 和 <body> 的父节点是 <html> 节点，<html> 节点拥有两个子节点<head> 和 <body>
- 文本节点 "Hello world!" 的父节点是 < p > 节点
- < h1 > 和 < p > 节点是同胞节点，同时也是 <body> 的子节点
二、常用 DOM 对象属性与方法
1.方法
方法就是可以在节点（HTML 元素）上执行的动作。
下面是一些比较常用的 DOM 对象方法：
- getElementById(id)：返回带有指定 ID 的元素。
- getElementsByTagName(tag name)：返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
- getElementsByClassName(class name)：返回包含带有指定类名的所有元素的节点列表。
- appendChild(node)：把新的子节点添加到指定节点。
- removeChild(node)：删除子节点。
- replaceChild(node)：替换子节点。
- insertBefore(node)：在指定的子节点前面插入新的子节点。
- createAttribute()：创建属性节点。
- createElement()：创建元素节点。
- createTextNode()：创建文本节点。
- getAttribute(attribute)：返回指定的属性值。
- setAttribute(attribute,value)：把指定属性设置或修改为指定的值。
2.属性
属性是节点（HTML 元素）的值，您能够获取或设置。
下面主要介绍比较常见的几个节点属性：
(1).innerHTML：元素内容
如下面的代码可以获取类名为“intro”的节点的内容值，并将它赋给变量txt：
var txt=document.getElementById("intro").innerHTML;
(2).nodeName：节点名称
- 元素节点：标签名
- 属性节点：属性名
- 文本节点：#text
- 文档节点：#document
(3).nodeValue：节点的值
- 元素节点： undefined 或 null
- 文本节点：文本本身
- 属性节点：属性值
如下面的代码获取 ID 为 intro 的元素的文本节点的值，并将它写入文档输出流中：
document.write($("#intro").firstChild.nodeValue);
(4).nodeType：节点的类型
各种节点类型与对应的 nodeType 值为：元素：1；属性：2；文本：3；注释：8；文档：9。
(5).parentNode、firstChild、lastChild：节点之间的关系
依次为访问元素的父节点、第一个子节点、最后一个子节点。
(6).length:节点列表长度
如下面的代码，获取标签为 p 的节点组成一个节点列表，将该节点列表中的每一个元素的内容值写到文档输出流中：
x = document.getElementsByTagName("p");
for (i=0;i<x.length;i++) {
document.write(x[i].innerHTML);
document.write("<br />");
}
三、DOM操作
通过 DOM 的相关方法，可以修改 HTML，包括改变元素、属性、样式和事件等。
如：
document.getElementById("p1").innerHTML = "New text!";//修改 p1 元素文本节点的内容
document.getElementById("p2").style.color="blue";//修改 p2 元素的样式
var para = document.createElement("p");//接下来三句创建了新的元素如需向 HTML DOM 添加新元素，
var node = document.createTextNode("This is new.");//首先必须创建该元素（元素节点），
para.appendChild(node);//然后把它追加到已有的元素上。
除了 appendChild() 函数向一个父元素后面追加一个子元素之外，添加新元素也可以使用 insertBefore() 函数，直接往一个已存在的元素前面插入一个新元素：
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para,child);//将新创建的元素 para 插入到已存在的元素 child 前面，但前提是他们用共同的父元素 element
当然，通过相关方法也可以删除一个元素：
var parent=document.getElementById("div1");//要删除一个元素，首先要获取要删除元素的父元素
var child=document.getElementById("p1");
parent.removeChild(child);
最后，若将上面代码的最后一句换为下面这句，则可以实现将 child 元素替换为 para 元素的操作。
parent.replaceChild(para,child);
由此可见，通过 DOM 可以十分方便地实现对 HTML 的各种操作，显得十分强大与灵活。
四、DOM事件
当事件发生时，比如当用户点击一个 HTML 元素时，可以执行相关的 JavaScript，这时，需要把 JavaScript 代码添加到 HTML 事件属性中。
图4.1 DOM 事件触发
下面是一些常见的事件属性：
- 当用户点击鼠标时：onclick
- 当网页已加载时：onload
- 当元素获得焦点时：onfocus
- 当鼠标移动到元素上与鼠标离开时：onmouseover与onmouseout
- 鼠标按键按下与松开时：onmousedown与onmouseup
如下面的代码，点击按钮时，会执行函数 function() 里面的的 JavaScript 代码：
<button onclick = "displayDate()">显示时间</button>//鼠标点击按钮时执行displayDate() 函数
document.getElementById("myBtn").onclick = function(){……};//点击按钮执行函数 function 里面的 JavaScript 代码
五、总结
HTML DOM 可以实现在客户端使用脚本来创建动态网页，以此增强网页的交互性。上面介绍的是一些最常用的 DOM 的使用，具体的可以在实际的实践中，以及不断的查手册增强了解。
