标签：
HTML DOM （文档对象模型）
什么是DOM？
DOM 是 W3C（万维网联盟）的标准。
DOM 定义了访问 HTML 和 XML 文档的标准。
W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
W3C DOM 标准被分为 3 个不同的部分：
访问浏览器，加载网页的同时，浏览器会创建页面的文档对象模型（Document Object Model）。
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
在HTML DOM中，所有事物都是节点,DOM是被视为节点树的HTML,方法是在节点上执行的操作。
可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。方法是您能够执行的动作（比如添加或修改元素）。属性是您能够获取或设置的值（比如节点的名称或内容）。
一些常用的 HTML DOM 属性：
一些常用的HTML DOM方法：
| 方法 | 描述 |
|---|---|
| getElementById() | 返回带有指定 ID 的元素。 |
| getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 |
| getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
| appendChild() | 把新的子节点添加到指定节点。 |
| removeChild() | 删除子节点。 |
| replaceChild() | 替换子节点。 |
| insertBefore() | 在指定的子节点前面插入新的子节点。 |
| createAttribute() | 创建属性节点。 |
| createElement() | 创建元素节点。 |
| createTextNode() | 创建文本节点。 |
| getAttribute() | 返回指定的属性值。 |
| setAttribute() | 把指定属性设置或修改为指定的值。 |
方法（一）在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。
查找 id="intro" 的元素
var x=document.getElementById("intro");
如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素，如果未找到该元素，则 x 将包含 null。
方法（二）在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id通过标签名查找 HTML 元素
查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素：
var x=document.getElementById("main"); var y=x.getElementsByTagName("p");
提示：通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
document.write(Date());
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
document.getElementById("p1").innerHTML="New text!";
改变 HTML 属性
如需改变 HTML 元素的属性，请使用这个语法：document.getElementById(id).attribute=new value
document.getElementById("image").src="landscape.jpg";
如需改变 HTML 元素的样式，请使用这个语法：document.getElementById(id).style.property=new style
document.getElementById("p2").style.color="blue";
我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
HTML 事件的例子：
<h1 onclick="this.innerHTML=‘谢谢!‘">请点击该文本</h1>
HTML DOM 允许通过使用 JavaScript 来向 HTML 元素分配事件：
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
onchange 事件常结合对输入字段的验证来使用。
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
添加和删除节点（HTML 元素）。
如需向 HTML DOM 添加新元素，就必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
1 <div id="div1"> 2 <p id="p1">这是一个段落</p> 3 <p id="p2">这是另一个段落</p> 4 </div> 5 6 <script> 7 var para=document.createElement("p"); 8 var node=document.createTextNode("这是新段落。"); 9 para.appendChild(node); 10 var element=document.getElementById("div1"); 11 element.appendChild(para); 12 </script>
如需删除 HTML 元素，必须首先获得该元素的父元素：
1 <div id="div1"> 2 <p id="p1">这是一个段落。</p> 3 <p id="p2">这是另一个段落。</p> 4 </div> 5 6 <script> 7 var parent=document.getElementById("div1"); 8 var child=document.getElementById("p1"); 9 parent.removeChild(child); 10 </script>
提示：如果能够在不引用父元素的情况下删除某个元素，就太好了。不过很遗憾。DOM 需要清楚需要删除的元素，以及它的父元素。
这是常用的解决方案：找到希望删除的子元素，然后使用其 parentNode 属性来找到父元素：
1 var child=document.getElementById("p1"); 2 child.parentNode.removeChild(child);
标签：
原文地址：http://www.cnblogs.com/tongx123/p/5092284.html
