本文整理自《高级javascript程序设计》
DOM(文档对象模型)是针对HTML和XML文档的一个API（应用程序编程接口）
DOM描述了一个层次化的节点树，允许开发人员添加、移除、和修改页面的某一部分。
1998年10月DOM1级规范成为W3C的推荐标准，为基本的文档结构及查询提供了接口
文档节点是每个文档的根节点。
文档元素是文档最外层元素，文档中的其他所有元素都包含在文档元素中。每个文档只能有一个文档元素
在html页面中，文档元素始终都是元素
hasChildNodes()方法：这个方法在节点包含一个或多个子节点的情况下返回true
所有节点都有的最后一个属性是ownerDocument，该属性指向表示整个文档的文档节点。通过这个属性，可以不必再节点层次中通过层层回溯到达顶端，而是可以直接访问文档节点。
操作节点
-- someNode.appendChild(),向childNodes列表的末尾添加一个节点
-- someNode.insertBefore(newNode,参照节点),向特定位置插入一个节点。如果参照节点是null，作用和appendChild()相同
-- someNode.replaceNode(要插入的节点，要替换的节点)，作用是替换节点
-- someNode.removeNode(要移除的节点),删除节点
-- someNode.cloneNode() 用于创建调用这个方法的节点的一个完全相同的副本。
--cloneNode()接受一个布尔值参数，表示是否执行深复制。true执行深复制，false执行签复制
深复制即复制节点及整个子节点树，浅复制即复制节点本身。克隆后的节点是个孤儿，要配合appendchild，insertBefore，replaceNode这样的方法插入节点树
--normalize(),这个方法唯一的作用就是处理文档树中的文本节点。后面会讨论
Document类型
Document类型可以表示HTML页面或者其他基于XML的文档。最常见的应用还是作为HTMLDocument实例的document对象。通过这个文档对象，可以取得与页面有关的信息，还能操作页面的外观及其底层结构。
所有浏览器都支持document.documentElement和document.body属性
document.documentElement指向元素
document.body指向body元素
Document的另一个子节点DocumentType
var doctype = document.doctype; //取得对的引用
由于浏览器对document.doctype的支持不一致，因此这个属性的用处很有限
文档信息
document.title //取得文档标题，也可设置文档标题
document.URL //取得URL
document.domain //取得域名。。可设置
将页面的document.domain设置为相同的值，这些页面就可以互相访问对方包含的javascript对象。
查找元素
document.getElementById()
document.getElementsByTagName() //这个方法返回一个HTMLCollection对象，该对象类似NodeList，可以用[0]，item(0)这样来访问对象中的项，也可以用length取得对象中元素的个数
HTMLCollection对象还有一个方法，叫做namedItem()用于通过元素的name属性取得集合中的项
var imgs = images.namedItem('myimage');
var imgs_ = images['myimages'];
document.getElementByName('');
IE8及更低版本不区分ID的大小写
IE7及更低版本中，name属性与给定ID匹配的表单元素也会被该方法返回
为了避免IE中存在的这个问题，最好的办法是不让表单字段的name特性与其他元素的ID相同
document.referrer //取得来源页面的URL
特殊集合
document.anchors 包含文档中所有带name属性的a元素
document.forms
document.images
document.links
DOM一致性检测
由于DOM分为多个级别，也包含多个部分，因此检测浏览器实现了DOM的哪些部分就十分必要
document.implementation属性为此提供相应信息和功能的对象，与浏览器与DOM的实现直接对应。
DOM1级只为document.implemetation提供了一个方法：hasFeature()
这个方法接受两个参数，要检测的DOM功能的名称和版本号,如果浏览器支持则返回true
var hasXmlDom = document.implementation.hasFeature('XML','1.0');
建议在使用DOM的某些特殊的功能之前，最好除了检测hasFeature()之外，还同时使用能力检测
文档写入
将输入流写入到网页中
write() 原样写入
writeln() 会在字符串的末尾添加一个换行符(\n)
open() 打开输入流,打开新页面
close() 关闭输入流
严格型XHTML文档不支持文档写入
Element类型
在HTML中，标签名始终都是以大写表示，在XML，XHTML中，标签名则始终会与源代码中的保持一致。
如果不确定js用在哪里，那么取得标签名后转换下toLowerCase
HTML元素
所有HTML元素都由HTMLElement类型表示，不是通过这个类型，也是通过它的子类型。
HTMLElement类型直接继承自Element并添加了一些属性
id
title
lang
dir 语言的方向，很少使用
className
var div = document.getElementById('myDiv');
alert(div.id); //myDiv
alert(div.className); //'bd'
取得属性
div.getAttribute('id');
div.getAttribute('class'); //注意区别于上面的className
设置特性
div.setAttribute('id','aaaa');
从元素中完全删除特性
div.removeAttribute('id');
创建元素
document.createElemennt()
var div = document.createElement('div');
');
div.id = 'myDiv';
div.className = 'divName';
var div_ = document.createElement('
Text类型
创建文本节点
document.createTextNode()
var element = document.createElement('div');
var textNode = document.createTextNode('this is a textNode');
element.appendChild(textNode);
document.body.appendChild(element);
规范化文本节点
DOM文档中出现相邻文本节点的情况不在少数，于是就催生了一个能够将相邻文本节点合并的方法。
这个方法由Node类型定义，名叫normalize()
--分割文本节点 splitText()
var element = document.createElement('div');
element.className = 'myDiv';
var textNode = document.createTextNode('Hello world!');
element.appendChild(textNode);
document.body.appengChild(element);
var newNode = element.firstChild.splitText(5);
alert(newNode.nodeValue); //world!
alert(element.childNodes.length); //2
Comment类型
注释在DOM中是通过Comment类型来表示的
nodeType是8
Comment类型和Text类型继承自相同的基类，它拥有除了splitText()之外的所有字符串操作方法
可以通过nodeValue或data属性来取得注释内容
CDATASection类型
DocumentType类型
不常用，只有FF，Safari，opera支持
DocumentFragment类型
Attr类型
元素的特性在DOM中以Attr类型来表示。
特性，attribute不被认为是文档树的一部分
Attr对象有三个属性：name，value，specified
specified是个布尔值，用以区别特性是在代码中指定的还是默认的。
document.createAttribute()并传入特性的名称可以创建新的特性节点
var attr = document.createAttribute('align');
attr.value = 'left';
element.setAttributeNode(attr);
alert(element.attributes['align].value);//'left'
alert(element.getAttribute('align').value); //'left'
不建议直接访问特性节点，使用getAttribute(),setAttribute(),removeAttribute()方法远比操作特性节点更为方便
DOM操作技术
动态脚本
动态加载脚本文件
function loadScript(url){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.body.appendChild(script);
}
动态加载行内脚本
var script = document.createElement('script');
script.type = 'text/javascript';
script.text = "function sayHi(){alert('hi')}";
document.body.appendChild(script);
下面的这种写法，不兼容IE，因为IE奖
专有扩展
浏览器开发商在发现功能缺失的时候，向DOM中添加专有扩展，弥补功能不足。有些扩展最后可能会变成标准。但是仍有大量的DOM专有扩展无法标准化
文档模式
IE8引入了一个新的概念“文档模式”。文档模式决定了页面可以使用什么功能。比如，可以使用哪个级别的css，可以使用javascript中的哪些API，以及如何对待文档类型。
children属性
看下IE9之前浏览器在处理文本节点的空白符时的差异。
childNodes会把空白字符当做子节点，children不会。其他的和childNodes没什么区别。
IE8之前的children属性中会包含注释节点，IE9之后的只返回元素节点
contains()方法
祖先节点调用contains()方法，接受一个参数，即要检测的后代节点。如果被检测的节点是后代节点，该方法返回true，否则返回false。
alert(document.documentElement.contains(document.body));//true
插入文本
innerText属性和outerHTML属性还没有被HTML5纳入规范
outerText属性会导致调用它的元素不存在，建议尽可能不要用这个属性
滚动
scrollIntoViewIfNeeded(参数)
参数为true或者不传参数，元素滚动到视口垂直方向中部
参数为false，元素跟视口底部对齐，当元素不可见的时候这个方法才执行。这个方法只有safari和chrome支持。
scrollByLines(lineCount)将元素的内容滚动指定行数。这个方法只有safari和chrome支持。
element.scrollByLines(5);
scrollByPages(pageCount)，将指定元素的内容滚动指定页数，这个方法只有safari和chrome支持。
elemenet.scrollByPages(2);