DOM（文档对象模子）是针对HTML 和XML 文档的一个API（应用顺序编程接口）。DOM描,绘了一个条理化的节点树，许可开发人员增加、移除和修正页面的某一部份
节点条理
DOM 能够将任何HTML 或XML 文档描绘成一个由多层节点组成的构造。节点分为几种差别的类
型，每种范例离别示意文档中差别的信息及（或）标记。每一个节点都具有各自的特征、数据和要领，另
外也与其他节点存在某种关联
节点的公共属和要领
childNodes
猎取子节点
var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length;parentNode
猎取父节点
firstNode
猎取第一个子节点
lastNode
猎取末了一个子节点
nextSibling
猎取下一个兄弟节点
previousSibling
猎取上一个兄弟节点
ownerDocument
猎取文档节点
hasChildNodes()
推断是不是有子节点
appendChild()
增加子节点,吸收一个参数示意要增加的节点,返回增加的节点.
var returnedNode = someNode.appendChild(newNode);
alert(returnedNode == newNode); //true
alert(someNode.lastChild == newNode); //trueinsertBefore()
在参考节点前增加子节点,吸收两个参数,第一个参数示意要增加的节点,第二个参数示意参考节点,返回增加的节点.
//插进去后成为第一个子节点
var returnedNode = someNode.insertBefore(newNode, someNode.firstChild);
alert(returnedNode == newNode); //truereplaceChild()
替代子节点,吸收两个参数,第一个参数示意要增加的节点,第二个参数示意被替代的节点,返回被替代的节点.
//替代第一个子节点
var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);removeChild()
移除子节点,这个要领接收一个参数，即要移除的节点。被移除的节点将成为要领的返回值
//移除第一个子节点
var formerFirstChild = someNode.removeChild(someNode.firstChild);cloneNode()
克隆节点,吸收一个boolean范例的参数,当参数为true时实行深复制,意即复制内容包括其子节点.
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>var deepList = myList.cloneNode(true);
alert(deepList.childNodes.length); //3（IE < 9）或7（其他浏览器）
var shallowList = myList.cloneNode(false);
alert(shallowList.childNodes.length); //0deepList.childNodes.length 中的差别重要是因为IE8 及更早版本与其他浏览器处置惩罚空缺字符的体式格局不一样。IE9 之前的版本不会为空缺符建立节点。cloneNode()要领不会复制增加到DOM 节点中的JavaScript 属性，比方事宜处
理顺序等。这个要领只复制特征、（在明白指定的情况下也复制）子节点，其他统统
都不会复制。IE 在此存在一个bug，即它会复制事宜处置惩罚顺序，所以我们发起在复制
之前最好先移除事宜处置惩罚顺序。
Doucment范例
JavaScript 经由过程Document 范例示意文档。在浏览器中，document 对象是HTMLDocument（继续
自Document 范例）的一个实例，示意全部HTML 页面。而且，document 对象是window 对象的一个
属性，因而能够将其作为全局对象来接见
document对象的属性和要领
documentElement
猎取html节点元素
var html = document.documentElement; //获得对<html>的援用
alert(html === document.childNodes[0]); //true
alert(html === document.firstChild); //truebody
猎取body节点元素
title
猎取title笔墨节点元素
//获得文档题目
var originalTitle = document.title;
//设置文档题目
document.title = "New page title";URL
获得完全的URL
domain
获得域名
referrer
获得泉源页面的URL
//获得完全的URL
var url = document.URL;
//获得域名
var domain = document.domain;
//获得泉源页面的URL
var referrer = document.referrer;getElementById()
经由过程id属性猎取元素
getElementsByTagName()
经由过程元素名猎取元素
var div = document.getElementById("myDiv"); //获得id='myDiv'元素的援用
var images = document.getElementsByTagName("img"); //获得img元素的援用
var allElements = document.getElementsByTagName("*"); //猎取文档中一切的元素IE7及较低版本还为此要领增加了一个有意思的“怪癖”：name特征与给定ID婚配的表单元素也会被该要领返回
document.anchors
包括文档中一切带name 特征的元素
document.forms
包括文档中一切的<form>元素，与document.getElementsByTagName(“form”)获得的效果雷同
document.images
包括文档中一切的<img>元素，与document.getElementsByTagName(“img”)获得的效果雷同；
document.links
包括文档中一切带href 特征的元素。
DOM一致性检测
因为 DOM 分为多个级别，也包括多个部份，因而检测浏览器完成了DOM的哪些部份就十分必要
了。document.implementation 属性就是为此供应响应信息和功用的对象，与浏览器对DOM的完成
直接对应。DOM1 级只为document.implementation 划定了一个要领，即hasFeature()。这个方
法接收两个参数：要检测的DOM功用的称号及版本号。假如浏览器支撑给定称号和版本的功用，则该
要领返回true
var hasXmlDom = document.implementation.hasFeature("XML", "1.0");以下为列出了能够检测的差别的值及版本号
Core 1.0、2.0、3.0 基础的DOM，用于形貌表现文档的节点树
XML 1.0、2.0、3.0 Core的XML扩大，增加了对CDATA、处置惩罚指令及实体的支撑
HTML 1.0、2.0 XML的HTML扩大，增加了对HTML特有元素及实体的支撑
Views 2.0 基于某些款式完成文档的格式化
StyleSheets 2.0 将款式表关联到文档
CSS 2.0 对层叠款式表1级的支撑
CSS2 2.0 对层叠款式表2级的支撑
Events 2.0，3.0 通例的DOM事宜
UIEvents 2.0，3.0 用户界面事宜
MouseEvents 2.0，3.0 由鼠标激发的事宜（click、mouseover等）
MutationEvents 2.0，3.0 DOM树变化时激发的事宜
HTMLEvents 2.0 HTML4.01事宜
Range 2.0 用于操纵DOM树中某个局限的对象和要领
Traversal 2.0 遍历DOM树的要领
LS 3.0 文件与DOM树之间的同步加载和保留
LS-Async 3.0 文件与DOM树之间的异步加载和保留
Validation 3.0 在确保有用的前提下修正DOM树的要领
Element范例
HTML元素
一切 HTML 元素都由HTMLElement 范例示意，不是直接经由过程这个范例，也是经由过程它的子范例来表
示。HTMLElement 范例直接继续自Element 并增加了一些属性。增加的这些属性离别对应于每一个HTML
元素中都存在的以下规范特征。
id，元素在文档中的唯一标识符。
title，有关元素的附加申明信息，平常经由过程东西提示条显示出来。
lang，元素内容的言语代码，很少运用。
dir，言语的方向，值为”ltr”（left-to-right，从左至右）或”rtl”（right-to-left，从右至左），也很少运用。
className，与元素的class 特征对应，即为元素指定的CSS类。没有将这个属性命名为class，是因为class 是ECMAScript 的保留字
<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div>var div = document.getElementById("myDiv");
alert(div.id); //"myDiv""
alert(div.className); //"bd"
alert(div.title); //"Body text"
alert(div.lang); //"en"
alert(div.dir); //"ltr"
div.id = "someOtherId";
div.className = "ft";
div.title = "Some other text";
div.lang = "fr";
div.dir ="rtl";特征操纵
有三个要领能够操纵元素的特征,getAttribute() setAttribute() removeAttribute()
var div = document.getElementById("myDiv");
alert(div.getAttribute("id")); //"myDiv"
alert(div.getAttribute("class")); //"bd"
div.setAttribute("id", "someOtherId");
div.setAttribute("class", "ft");
div.setAttribute("title", "Some other text");
div.removeAttribute("class");有两类特别的特征，它们虽然有对应的属性名，但属性的值与经由过程getAttribute()返回的值并不
雷同。第一类特征就是style，用于经由过程CSS 为元素指定款式。在经由过程getAttribute()接见时，返
回的style 特征值中包括的是CSS 文本，而经由过程属性来接见它则会返回一个对象。
第二类异乎寻常的特征是onclick 如许的事宜处置惩罚顺序。当在元素上运用时，onclick 特征中包
含的是JavaScript 代码，假如经由过程getAttribute()接见，则会返回响应代码的字符串.
IE6 及之前版本不支撑removeAttribute()。
attributes 属性
Element范例是运用attributes属性的唯一一个DOM节点范例,attributes属性是NamedNodeMap范例的对象,它有以下几个要领
getNamedItem(name)：返回nodeName 属性即是name 的节点；
removeNamedItem(name)：从列表中移除nodeName 属性即是name 的节点；
setNamedItem(node)：向列表中增加节点，以节点的nodeName 属性为索引；
item(pos)：返回位于数字pos 位置处的节点。
var id = element.attributes.getNamedItem("id").nodeValue;
var id = element.attributes["id"].nodeValue;
element.attributes["id"].nodeValue = "someOtherId";因为attributes的要领不够轻易，因而开发人员更多的会运用getAttribute()、removeAttribute()和setAttribute()要领。
建立元素
运用 document.createElement()要领能够建立新元素。这个要领只接收一个参数，即要建立元素的标署名。
var div = document.createElement('div');
div.id = 'myDiv';
div.className = 'box';
document.appendChild(div);在 IE 中能够以另一种体式格局运用createElement()，即为这个要领传入完全的元素标签，也能够包括属性，以下面的例子所示。
var div = document.createElement("<div id=\"myNewDiv\" class=\"box\"></div >");这类体式格局有助于避开在IE7 及更早版本中动态建立元素的某些题目。下面是已知的一些这类题目。
不能设置动态建立的
<iframe>元素的name 特征不能经由过程表单的
reset()要领重设动态建立的<input>元素动态建立的 type 特征值为”reset”的
<buttou>元素重设不了表单动态建立的一批name 雷同的单选按钮相互毫无关联。name 值雷同的一组单选按钮原本应当用于示意统一选项的差别值，但动态建立的一批这类单选按钮之间却没有这类关联
上述一切题目都能够经由过程在 createElement()中指定完全的HTML标签来处理，以下面的例子所示。
if (client.browser.ie && client.browser.ie <=7){
//建立一个带name 特征的iframe 元素
var iframe = document.createElement("<iframe name=\"myframe\"></iframe>");
//建立input 元素
var input = document.createElement("<input type=\"checkbox\">");
//建立button 元素
var button = document.createElement("<button type=\"reset\"></button>");
//建立单选按钮
var radio1 = document.createElement("<input type=\"radio\" name=\"choice\" "＋
"value=\"1\">");
var radio2 = document.createElement("<input type=\"radio\" name=\"choice\" "＋
"value=\"2\">");
}Text范例
文本节点由 Text 范例示意，包括的是能够照字面诠释的纯文本内容。纯文本中能够包括转义后的HTML 字符，但不能包括HTML代码。
运用以下要领能够操纵节点中的文本
appendData(text)：将text 增加到节点的末端。
deleteData(offset, count)：从offset 指定的位置最先删除count 个字符。
insertData(offset, text)：在offset 指定的位置插进去text。
replaceData(offset, count, text)：用text 替代从offset 指定的位置最先到offset+count为止处的文本
splitText(offset)：从offset 指定的位置将当前文本节点分红两个文本节点
substringData(offset, count)：提取从offset 指定的位置最先到offset+count 为止处的字符串
建立文本节点
经由过程createTextNode()能够建立文本节点.
var textNode = document.createTextNode("<strong>Hello</strong> world!");下面展现如何将一个文本节点增加到文档中
var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
document.body.appendChild(element);兼并文本节点
一个元素可能会存在多个文本节点,然则文本节点之间也没有空格,因而没法辨别哪一个节点对应的是哪一个文本,经由过程下面的要领能够将element元素的文本节点兼并.
element.normalize();固然也能够支解文本节点,运用splitText(index),index示意字符索引.
var newNode = element.firstChild.splitText(5);从位置5 最先。位置5是"Hello"和"world!"之间的空格
alert(element.firstChild.nodeValue); //"Hello"
alert(newNode.nodeValue); //" world!"
alert(element.childNodes.length); //2