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 事件。
<body onload="checkCookies()">
<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
{
alert("Cookies are enabled")
}
else
{
alert("Cookies are not enabled")
}
}
</script>
onchange 事件：onchange 事件常用于输入字段的验证
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。
onmousedown、onmouseup 以及 onclick 事件
onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick 事件。