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，或将其存在缓存中。