【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类型
parentNode:Document或element
Comment类型与Text继承自相同的基类。它拥有除splitText()之外所有字符串操作方法。
使用document.createComment()并传人注释文本,可以用了创建注释节点。
六、CDATASection类型
nodeType:4
nodeName:‘#cdata-section’
nodeValue:CDATA区域中的内容
parentNode:Document或element
没有子节点
nodeType:10
nodeName:doctype的名称
nodeValue:null
parentNode:Document
没有子节点
八、DocumentFragment类型
nodeType:11
nodeName:‘#document-frament’
nodeValue:null
parentNode:null
DOM规定文档片段(document fragment)是一种‘轻量级’的文档,可以包含和控制节点,但不会像完整的文档那样占用额外的资源。在对DOM进行操作时,可以有效的减少资源占用。
九、Attr类型
Attr的属性:
name与nodeName的值相同;
value与nodeValue值相同;
specified,是一个布尔值,用以区别特性是在代码中指定或者默认。
用document.createAttribute()传人特性名称可以用来创建新特性节点。
不过通常都使用getAttribute()、setAttribute()和removeAttribute()来操作特性。