JS中的DOM知识概览

1 Node类型

除IE外全部浏览器均可以访问这个类型（由于IE中的DOM对象都是以COM对象的形式实现的），并且js中的全部节点类型都继承自Node类型。

1.1 nodeName/nodeValue/nodeType

1.2 节点关系

• childNodes 返回结果是Nodelist类型，不是数组。

  Nodelist是基于DOM结构动态查询的结果，DOM的变化能自动反映在查询结果中。可经过方括号进行访问，也可用item(i)进行访问。
  
     可经过Array。prototype.slice.call(nodelist,0) 将Nodelist类型转化成数组，也能够经过遍历Nodelist将其转化成数组。

• firstChild/lastChild

• nextSibling/previousSibling

• parentNode

• ownerDocument

  ownerDocument：全部节点都有的属性，指向表示整个文档的文档节点，任何节点都不能同时存在于多个文档中。经过这个属性能够直接访问文档节点，而没必要层层回溯。

1.3 操做节点

• appendChild()

• insertBefore()

• replaceChild()

• removeChild()

1.4 新建／拷贝节点

拷贝：cloneNode()

当参数为true时，执行深拷贝，会将该节点的子节点也拷贝。可是这个函数不会复制添加到节点中的js属性，例如时间处理程序，这个只复制特性、子节点（指定true时）。（IE浏览器中另说）

1.5 查找元素(document./element.)

• getElementById()

  注意IE7及较低版本浏览器的怪癖：会返回name值为指定‘ID’的input元素。

• getElementsByTagName()

  返回的是HTMLCollection对象，是一个动态集合。

• getElementsByName()

2 Document类型

document对象是HTMLDocument类型的一个实例，HTMLDocument继承自Document。而且，document对象是window对象的一个属性。

2.1 文档的子节点

• documentElement属性直接指向html元素

• body属性，指向body元素

• doctype属性，指向文档声明标签

2.2 文档信息

• title

• domain

  不一样子域的页面没法经过js通讯，设为相同就可互相访问对方的js对象了。
     域名属性刚开始是松散的不能将它再设置为紧绷的。

• URL

2.4 特殊集合

• document.images 全部image元素

• document.links 全部有href的a元素

• document.anchors 全部带name特性的a元素

1.5 新建元素

• createElement()

• createTextNode()

• createDocumentFragment()

• createAttribute()

2.6 DOM 一致性检测

document.implementation.hasFeature()

通常不要相信这个的检测结果，由于能够自行修改结果。

2.7 文档写入

document.write()
document.writeln()

若是在文档加载完毕后写入会重写整个页面。

document.open()
document.close()

若是是在页面加载期间写入，则不须要用到这两个方法。

3 Element类型

全部的元素都是经过HTMLElementle类型或其自类型表示的，HTMLElement类型继承自Element类型。

• getAttribute()

• setAttribute()

• removeAttribute()

  任何元素的全部特性，也均可以经过DOM元素的自己的属性来访问。
     只有公认的（不是自定义的）特性才会以属性的形式添加到DOM对象中。
     有些特性经过属性访问和getAttribute（）访问的结果可能不一样，例如style特性和事件处理程序
     给元素添加自定义属性，该属性不会变成特性
     
     总而言之就是：自定义的特性不能经过属性的方式访问，自定义的属性不能经过getAttribute访问（应该是这样）。

• attributes属性

  通常用来遍历特性时使用（element.attributes.length）

• 继承Node类型的childNodes等属性和建立，查找，添加删除子节点等方法。

4 Text类型

可经过nodeValue或data属性访问Text节点中包含的文本。

操做文本节点中的文本：

appendData（）
deleteData（）
replaceData（）
insertData（）
splitText（）

当两个文本节点相邻时，可经过normalize()将其变成一个文本节点。normalize()是从node类型继承的函数

分割文本节点
textnode.splitText(5) 返回一个新文本节点，且该节点与原节点的parentNode相同

5 comment类型（注释）

6 DocumentFragment

在文档中没有标记。

文档片断永远不会成为文档的一部分。当经过appendchild将文档片断添加到文档中时，只是将文档片断的子节点添加到文档中，文档片断将会删除这些子节点。

当须要添加多个子节点时，若是一个一个添加，那么将会致使浏览器的反复渲染，这时能够将这些子节点添加到文档片断中，而后再添加到文档中。

7 动态添加脚本

7.1 动态添加脚本
7.2 动态添加样式
7.3 操做表格
7.4 NodeList

最好将length的值保存在一个变量中，由于length的值是动态的。
    访问NodeList至关于一次基于文档的查询，因此要少访问NodeList，或将其存在缓存中。