HTML DOM

1.什么是DOM

DOM (Document Object Model)是 W3C（万维网联盟）的标准。DOM 标准被分为 3 个不同的部分：

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

2.HTML DOM

<html>
<head>
<title>HTML DOM</title>
</head>
<body>
<h1>DOM</h1>
<p>Hello world!</p>

</body>
</html>

请看上面的 HTML 片段，最简单的HTML形式：

<html> 节点没有父节点；它是根节点
<head> 和 <body> 的父节点是 <html> 节点
文本节点 "Hello world!" 的父节点是 <p> 节点

并且：

<html> 节点拥有两个子节点：<head> 和 <body>
<head> 节点拥有一个子节点：<title> 节点
<title> 节点也拥有一个子节点：文本节点 "DOM 教程"
<h1> 和 <p> 节点是同胞节点，同时也是 <body> 的子节点

并且：

<head> 元素是 <html> 元素的首个子节点
<body> 元素是 <html> 元素的最后一个子节点
<h1> 元素是 <body> 元素的首个子节点
<p> 元素是 <body> 元素的最后一个子节点

简而言之，HTML文档中的所有内容都是节点DOM,

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

3.HTML DOM 应用

<html>
<head>
<title>HTML DOM</title>
</head>
<body>
<p id="div">Hello World!</p>
<TABLE>
<tr>
<td >
<input name="query" type="button" onClick="doQuery()" class="button" value="query">
</td>
</tr>
</TABLE>
<script>

function doQuery(btn) {
//下面的内容在这加

}
</script>
</body>
</html>

可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。

一些常用的 HTML DOM 方法：

getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：

innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点

访问：

var id=document.getElementById("id").innerHTML;
alert(id);

var id2=document.getElementsByTagName("p");
alert( id2[0].innerHTML);

修改：

document.getElementById("id").innerHTML="New Hello World!";
document.getElementById("id").style.color="blue";

创建：

var para=document.createElement("p");
var node=document.createTextNode("This is new");
para.appendChild(node);

var element=document.getElementById("div");
element.appendChild(para);

getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

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

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

onmouseover 和 onmouseout 事件

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

onmousedown、onmouseup 以及 onclick 事件

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