Dom(文档对象模型)，是针对html和xml文档的一个API(应用程序接口)。它可以将任何html和xml文档描绘成一个层次化的节点树。

1、节点的层次

<html>
    <head>test page</head>
    <body>
        <p>hello</p>
    </body>
</html>

文档节点: 只有一个根节点，为<html>元素，也称作文档元素。html页面中文档元素始终都是<html>元素；但是在xml中，没有预定定义的元素，任何元素都可能成为文档元素。

每一段标记都可以通过树中的一个节点表示，一共有12种节点类型。

2、Node类型

js中所有的节点类型都继承自Node类型，所有节点类型都共享相同的基本属性和方法。

1 Node.ELEMENT_NODE
2 Node.ATTRIBUTE_NODE
3 Node.TEXT_NODE
4 Node.CDATA_SECTION_NODE
5 Node.ENTITY_REFERENCE_NODE
6 Node.ENTITY_NODE
7 Node.PROCESSING_INSTRUCTION_NODE
8 Node.COMMENT_NODE
9 Node.DOCUMENT_NODE
10 Node.DOCUMENT_TYPE_NODE
11 Node.DOCUMENT_FRAGMENT_NODE
12 Node.NOTATION_NODE

注：ie没有公开节点类型的常量

属性

someNode.nodeType //上面1-12
someNode.nodeName
someNode.nodeValue//对于元素节点为null

someNode.childNodes//得到NodeList对象
someNode.parentNode

someNode.previousSibling
someNode.nextSibling
someNode.previousElementSibling
someNode.nextElementSibling

someNode.firstChild
someNode.lastChild
someNode.firstElementChild
someNode.lastElementChild

someNode.ownerDocument//文档节点

NodeList对象，是一种类数组形式，有length属性，基于DOM结构动态执行查询的结果。

somde.childNodes.length
somde.childNodes[0]
somde.childNodes.item(0)

注：ie8及以下版本，NodeList实现为一个COM对象

方法

父节点处理子节点的一些方法

someNode.hasChildNodes()
someNode.appendChild()
someNode.insertBefore(newNode, someNode.firstChild)

insertBefore(插入的节点, 参照节点)，参照节点为null，则插入在末尾

someNode.replaceChild(newNode, someNode.firstChild)

insertBefore(插入的节点, 替换节点)

someNode.removeChild(someNode.firstChild)

移除一个节点

其他一些方法

var newNode = someNode.cloneNode(true);

克隆一个节点，浅克隆只复制节点本身；深克隆复制节点及其整个子节点树。

注：不会复制事件处理程序。

someNode.normalize()

3、Document类型

doument对象是HTMLDocument(继承自Document类型)的一个实例，表示整个html文档，并且是window对象的一个属性

document.nodeType //9
document.nodeName //'#document'
document.nodeValue //null
document.parentNode //null
document.ownerDocument //null

文档的子节点

通过属性获取document的子节点

document.documentElement //指向页面中的<html>元素
document.firstElementChild //指向页面中的<html>元素

document.childNodes[0] //<!doctype html>
document.firstChild //<!doctype html>
document.doctype //<!doctype html>

document.body //<body>元素
document.head //<head>元素

<!doctype html>(DocumentType类型节点)是document的一个子节点

注： ie8及以前版本，document.doctype为null

ie9+和firefox、chrome、safari，document.doctype和document.firstChild、document.childNodes[0]都指向<!doctype html>

文档信息

document.title 
document.title = 'baiduyixia';//可修改

document.URL //得到页面完整的URL,即地址栏中显示的URL
document.domain //得到域名
document.referrer //得到链接到当前页面的那个页面的URL，没有来源为空字符串。相同一级域名才能获取得到，否则为空字符串

document.domain可设置，不过只能改成高一级的域名，不能再改回头

//页面来自p2p.wrox.com
documnet.domain = 'wrox.com';
document.domain = 'p2p.wrox.com';//报错，不能改回去

查找元素

document.getElementId('#myId');//严格匹配大小写
var images = document.getElementsTagName('img') //HTMLCollection对象，和NodeList对象很像


images.length]
images[0].src
images.item(0).src
images.nameItem('myImage');//通过name访问
images['myImage']

document.getElementsTagName('*')//返回文档中所有的元素

document.getElementsByName('color');//HTMLCollection对象

document.getElementsTagName('li')//

getElementId()不存在，返回null；如果存在多个相同的ID，只返回文档中第一次出现的元素。

注：

ie8及以下版本，getElementId()不区分大小写，

ie7及以下版本，name特性和给定ID匹配的表单元素也会被该方法返回

特殊集合

document.anchors //返回所有带有name特性的a元素
docuemnt.forms //返回所有的form元素
document.images //所有的img元素
document.links //所有带有href的a元素

返回的都是HTMLCollection对象

文档写入

document.write()//输出内容将重新整个页面
document.writeln()
document.open()//打开网页输出流
document.close()//关闭网页输出流

4、Element类型

var div = document.getElementById('myDiv');
div.nodeType //1
div.nodeValue //null
div.parentNode //Document或者Elment
div.childNodes //

div.nodeName //标签名称,DIV
div.tagName //标签名称

注：html页面中标签名称，返回大写；xml或者xhtml标签名始终会与代码中的保持一致

html元素

所有html元素都是由HTMLElement或者更具体的子类型来表示的，HTMLElement类型直接继承自Element并添加了一些属性。

var div = document.getElementById('myDiv');
//获取值
div.id
div.className
div.title
div.lang //元素内容的语言代码
div.dir //语言方向ltr、rtl

//修改
div.id = 'someId'
div.className = 'test'
div.title = 'some text'
div.lang ='ft'
div.dir = 'rtl'

取得特性

var div = document.getElementById('myDiv');
div.getAttribute('id') 
div.getAttribute('class')

如果不存在特定名称的属性，则返回null。也可以获取自定义的属性值，html5中规定自定义的属性加上data-前缀。

不能通过属性的方式获取自定义的属性值，可以通过getAttribute()的形式获取

特殊的特性

var div = document.getElementById('myDiv');
div.getAttribute('style') //css文本，字符串
div.style //CSSStyleDeclaration对象

属性是onclik事件处理程序

var div = document.getElementById('myDiv');
div.getAttribute('onclick') //代码字符串
div.onclick //返回一个函数

设置特性

var div = document.getElementById('myDiv');
div.setAttribute('data-my', 'test');
div.setAttribute('title', 'testxxx');

div.my = 'test';//设置不成功
div.title = 'testxxx';

自定义属性和特性都可以使用setAttribute()赋值的，但是属性赋值方式只能设置特性的值，自定义属性的值没法设置

var div = document.getElementById('myDiv');
div.removeAttribute('id')

完全移除元素的特性

attribute属性

Element类型独有的属性

var div = document.getElementById('myDiv');
div.attribute //NameNodeMap对象
div.attribute.length

NameNodeMap对象，包含元素所有的特性

getNamedItem(name)
removeNamedItem(name)
setNamedItem(node)
item(pos)

div.attributes.getNamedItem('id').nodeValue

创建元素

var div = document.createElement('div');

元素的子元素

元素的childNodes属性中可能包含元素、文本节点、注释、处理指令。遍历childNodes属性时，记住要判断nodeType属性

从当前元素开始搜索，拥有和docment一样的方法

var div = document.getElementById('myDiv');
div.getElementsTagName('li')
//

4、Text类型

属性

nodeType //3
nodeName //'#text'
nodeValue //所有的文本
parentNode //一个Element
不支持子节点

data //所有的文本
length //文本长度

方法

appendData(text)
deleteData(offset, count)
insertData(offset, text)
replaceData(offset, count, text)
splitText(offset)
substringData(offset, count)

创建文本节点

var textNode = document.createTextNode('hello word');

当两个或多个文档节点存在一个元素上，调用normalize()方法，将相邻的文本节点合并

分割文本节点

splitText()，将文本分成两个文本节点

5、Comment类型

nodeType //8
nodeName //'#comment'
nodeValue //注释的内容
parentNode //Document或Element
不支持子节点

document.createComment()

与Text类型继承自相同的基类，拥有除了splitText方法外的所有字符串操作的方法。

6、CDATASection类型

针对xml类型文档

nodeType //4
nodeName //'#cdata-section'
nodeValue //CDATA区域中的内容
parentNode //Document或Element
不支持子节点

document.createCDataSection()