十、DOM

【20140525】

总共有12种节点类型

一、node类型

每个节点都有一个nodeType属性，用于表明节点类型。

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

1、在元素节点（nodeType==1）中，nodeName中保存的始终都是元素的标签名，而nodeValue的值为null。

2、每个节点都有一个childNodes属性，其中保存着一个NodeList对象。可以通过位置来访问但并不是array实例。可以通过方括号，也可以使用item()方法。

鉴于argument对象使用Array.prototype.slice()方法可以将其转换为数组

hasChildNides()方法

所有节点都有属性ownerDocument，该属性指向整个文档的文档节点。所有节点类型都继承自Node，但不是每种节点都有子节点。

3、操纵节点的方法：

appendChild()用于向childNodes列表的末尾添加一个节点。

insertBefort()方法：该方法接受两个参数：要插入的节点和作为参照的节点。插入节点后，被插入节点虎变成参照节点的前一个同胞节点。

replaceChild()方法：接受两个参数是：要插入的节点和要替换的节点。

removeChild()方法：接受一个参数，即要移除的节点。

【移除的节点仍然为文档所有，只不过在文档中没有了自己的位置】

有两个方法是所有类型节点都有的，第一个是cloneNode()方法：接受参数true/false。分别代表深复制和浅复制。

normalize()方法找到空文本节点删除，相邻文本节点则合并。

二、doucument类型

nodeType：9

nodeName：#document

nodeValue：null

parentNode：null

ownerDocument：null

都兼容document.documentElement和document.body

在ie7及以下浏览器中 避免表单元素name的名称与其他元素的ID重复

ie中调用getElemenstByTagName（*）会返回包含注释节点。

特殊集合：

document.anchors 包含文档中所有带name的a元素；

类似的还有document.forms和document.images

document.links包含文档中所有带href特性的a标签 ；

文档写入

将输出流写入网页的方法：write()、writeln()、open()、close()

三、Element类型

nodeType值为1

nodeName的值为元素的标签名

nodeValue的值为null

parentNode可能是document或element

1.HTML

 id  title  lang  dir  className（class为ECMA保留字信息）

2.取得特性

操作特性的DOM方法有三个：

getAttribute()\setAttribute()和removeAttribute()

特性的名称不区分大小写，h5中自定义特性应加上data-前缀以便验证。

两类特殊属性  style和onclick

3.设置属性

setAttribute()和removeAttribute()在ie低版本浏览器均存在兼容性问题

4.Attributes属性

element类型是使用attributes属性中唯一的dom节点类型

5.创建元素

使用document.creatElement()方法可以创建新元素  只接受一个参数

如：document.creatElement(“div”)

       div.id = ""

       div.className = ""

然后可以使用appendChild()、insertBefore()、replaceChild()方法将新元素添加到文档树中

创建元素的另一种方式指定完整的html标签来解决

  var div =document.creatElement("<div id=\"xx\"   class=\"xx\"></div>");

这种方法可以避免在ie低版本浏览器中创建元素的某些问题：如

1.不能动态创建<inframe>元素的name属性

2,不能通过表单的Reset（）方法重设动态创建的<input>元素

3、动态创建type特性为reset的button元素不能重设表单

3、动态创建name相同的单选按钮彼此毫无关系。

6.元素的子节点

childNodes属性包含所有子节点 特别在非ie浏览器下需要特别注意元素节点（nodeType ==1）和文本节点（nodeType ==3）的不同

四、text类型

特征：nodeType == 3

           nodeName == “#text”

           nodeValue 值为节点所包含的文本

          parentNode为Element

          不支持子节点

           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位置处的字符串；

data.length/nodeValue.length：节点中字符的数目；

创建文本节点

document.createTextNode(text)方法用于创建文本节点。text为要插入节点中的文本。

规范化文本节点

        normalize()方法用于规范文本节点，即加入在一个包含两个或多个文本节点的父元素上调用normalize()方法，则会将所有文本节点合并成一个。使用方法为element.normalize();

分割文本节点

splitText(pos)方法用于拆分一个文本节点为两个文本节点

这个方法按照pos指定的位置拆分节点，拆分后，原文本节点将包含从开始到指定位置之前的内容，而新文本节点将包含剩下的内容。返回的是新产生的文本节点，该节点与原节点的parentNode相同。

五、Comment类型

nodeType:8

nodeName:‘#comment’

nodeValue:注释内容

parentNode:Document或element

没有子节点

          Comment类型与Text继承自相同的基类。它拥有除splitText()之外所有字符串操作方法。

使用document.createComment()并传人注释文本，可以用了创建注释节点。

六、CDATASection类型

          nodeType:4
          nodeName:‘#cdata-section’
          nodeValue:CDATA区域中的内容
          parentNode:Document或element
          没有子节点

七、DocumentType类型

nodeType:10
nodeName:doctype的名称
nodeValue:null
parentNode:Document
没有子节点

八、DocumentFragment类型

nodeType:11
nodeName:‘#document-frament’
nodeValue:null
parentNode:null

DOM规定文档片段（document fragment）是一种‘轻量级’的文档，可以包含和控制节点，但不会像完整的文档那样占用额外的资源。在对DOM进行操作时，可以有效的减少资源占用。

九、Attr类型

nodeType:11

nodeName:特性名称

nodeValue:特性值

parentNode:null

没有子节点

Attr的属性：

name与nodeName的值相同；

value与nodeValue值相同；

specified，是一个布尔值，用以区别特性是在代码中指定或者默认。

用document.createAttribute()传人特性名称可以用来创建新特性节点。

不过通常都使用getAttribute()、setAttribute()和removeAttribute()来操作特性。