DOM(文档对象模型)是针对HTML和XML文档的一个API；
IE9之前的版本不会为空白符创建节点；
在HTML页面中，文档元素始终都是<html>元素
节点层次
节点分为几种不同的类型，每种类型分别表示文档中不同的信息或标记。
HTML的层次结构
Node类型
1、nodeName和nodeValue属性
每个节点都有一个nodeType属性，用于表明节点的类型。要了解节点的具体信息，可以使用nodeName和nodeValue两属性，对于元素节点，nodeName中保存的始终都是元素的标签名，而nodeValue的值始终为null。
2、节点关系
节点关系图
每个节点都有一个childNodes属性，其中保存着一个NodeList对象，它是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点，虽然它具有Array的一些特性，但是它并不是Array的实例，它能够动态的反映DOM结构，而不是我们第一次访问它们的某个瞬间拍摄下来的一张快照。
parentNode属性：指向文档树中的父节点；
previousSibling属性：查找当前节点前面的兄弟节点；
nextSibling属性：查找当前节点后面的兄弟节点；
hasChildNodes()方法：这个方法在包含一或多个子节点的情况下返回true；
ownerDocument属性：指向表示整个文档的文档节点；
3、操作节点
以下四个方法操作的对象是某个节点的子节点
appendChild()：用于向childeNodes列表的末尾添加一个节点，结果返回新增的节点。但如果传入到该方法中的节点已经是文档的一部分，那结果就是将该节点从原来的位置转移到新位置。
insertBefore(要插入的节点，参照的节点)：用于将节点放在childNodes列表中某个特定的位置上，采用头插法，结果返回插入的节点，如果参照节点为null则与appendChild()执行相同的操作。
replaceChild(插入的节点，替换的节点)：方法返回要替换的节点并从文档树中被移除，同时由要插入的节点占据其位置。
removeChild(要移除的节点)：结果返回被移除的节点；
4、其他方法
cloneNode(true | false):用于创建调用这个方法的节点的一个完全相同的副本，true 执行深复制，也就是复制节点及整个子节点树，false 执行浅复制，即只复制节点本身，复制后返回的节点副本属于文档所有，但并没有为它指定父节点，成为了一个“孤儿” (IE在此存在一个bug，即它会复制事件处理程序，所以我们建议在复制之前最好先移除事件处理程序)
normalize()：处理文档树中的文本节点
Document 类型
document对象是window对象的一个属性，可以将其作为全局对象来访问。
1、文档的子节点
2、文档信息
document.title //取得文档的标题
document.URL //取得完整的URL
document.domain //取得域名
document.referrer //取得来源页面的URL
以上4个文档信息，只有domain属性可以进行设置，但对其有一个限制，即如果域名一开始是"松散的"，那么将不能将它再设置为"紧绷的"，如将document.domain设置为wrox.com 之后，就不能再将其设置为p2p.wrox.com。
3、查找元素
getElementById( ) 如果页面中有多个元素ID值相同，该方法只返回文档中第一次出现的元素。
getElementsByTagName( )返回包含零或多个元素的NodeList。
namedItem( )通过元素的name的特性取得集合中的项，该方法只会取得第一项。同时，也可以用方括号来访问，
如：var myImage = images["myImage"]。
getElementsByName( ) 这个方法会返回带有给定name特性的所有元素。
4、特殊集合
document.anchors：包含文档中所有带name特性的<a>元素；
document.applets：包含文档中所有的<applet>元素；
document.forms：包含文档中所有的<form>元素；
document.images：包含文档中所有的<img>元素；
document.links：包含文档中所有带href特性的<a>元素；
5、文档写入
document.write( 字符串参数 ) //原样写入
document.writeln( 字符串参数 ) //在字符串的末尾添加一个换行符(\n)
document.open( 字符串参数 ) //用于打开网页的输出流
document.close( 字符串参数 ) //用于关闭网页的输出流
使用document.write( )动态引入外部文件时，需注意使用转译字符，
如果是在页面加载期间使用write( )和writeln( )方法，则不需要用到这两个方法。
Element 类型
在HTML中，标签名始终都以全部大写表示，而在XML中标签名会始终与源代码中的保持一致
1、取得特性
自定义特性应该加上data-前缀以便验证
getAttribute(特性名)：传递的特性名与实际的特性名相同，因此想要得到class特性值，应该传入class而不是className，后者只有在通过对象属性访问特性时才用，特性名称不区分大小写。
setAttribute(特性名，值)
removeAttribute(特性名)：用于彻底删除元素的特性
通过getAttribute( )方法访问style特性或onclick这样的事件处理特性时，返回的值与属性的值相同，换句话说，getAttribute("style")返回一个对象，而getAttribute("onclick")返回一个函数，由于存在差别，一般经常不使用getAttribute( )而是只使用对象的属性，只有在取得自定义特性值的情况下，才会使用getAttribute( )方法
通过setAttribute( )设置class和style特性，事件处理程序没有任何效果
2、创建元素
document.createElement(标签名)
该方法会出现的问题有：不能设置动态创建的<iframe>元素的name特性；不能通过表单的reset()方法重设动态创建的input元素；动态创建的type特性值为reset的button元素重设不了表单，动态创建的一批name相同的单选按钮彼此之间毫无关系。
3、元素的子节点
注意不同浏览器的解析不同，有些浏览器会将空白符解析成节点因此解决该差别可以通过nodeType属性进行过滤。
getElementsByTagName()方法获取子节点或后代节点，不过若是通过元素调用这个方法时，搜索起点是当前的元素，其余与通过document调用这个方法相同。
Text 类型
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为止处的字符串；
1、创建文本节点
document.createTextNode(插入节点中的文本 ) 创建新的文本节点
一般情况下，每个元素只有一个文本子节点。
2、规范化文本节点
element.normalize( ) element是包含两个或多个文本节点的父元素，使用该方法是将所有文本节点合并成一个节点。
Comment 类型
Comment类型与Text类型继承自相同的基类，因此它拥有除splitText( )之外的所有字符串操作方法，与Text类型类似，也可以通过nodeValue或data属性来取得注释的内容。
小结
一般来说，尽量减少访问NodeList，因为其是"动态的"；
Document类型表示整个文档，是一组分层节点的根节点；
Element节点表示文档中的所有HTML和XML元素，可以用来操作这些元素的内容和特性。
网友评论