DOM2和DOM3-CSDN博客

DOM2和DOM3

DOM1级主要定义的是HTML和XML文档的底层结构

DOM2级和DOM3级在这个结构的基础上引入更多的交互能力，模块：

DOM2级核心

DOM2级视图

DOM2级事件

DOM2级样式

DOM2级遍历和范围

DOM2级HTML

DOM变化

针对XML命名空间的变化

Node类型的变化

特定于命名空间的属性：

不带命名空间前缀的节点名称——localName属性

命名空间URI或者null——namespaceURI属性

命名空间前缀——prefix

命名空间相关的方法：

-isDefaultNamespace(namespaceURI)

-lookupNamespaceURI(prefix)——返回给定prefix的命名空间

-lookupPrefix(namespaceURI)——返回给定namespaceURI前缀

Document类型的变化

与命名空间相关的方法：

-createElementNS(namespaceURI,tagName)

-createAttributeNS(namespaceURI,attributeName)

-getElementByTagName(namespaceURI,tagName)

var svg=document.createElementNS("http://www.w3.org/2000/svg","svg");
var att=document.createAttributeNS("http://somewhere.com","random");
var elems=document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml","*");

Element类型的变化

-getAttributeNS()

-getAttributeNodeNS()

-getElementByTagNameNS()

-hasAttributeNS()

-removeAttributeNS()

-setAttributeNS()

-setAttributeNodeNS()

NamedNodeMap类型的变化

新增与命名空间有关的方法

-getNamedItemNS()

-removeNamedItemNS()

-setNamedItemNS()

其它方面的变化

DocumentType类型的变化

新增属性：publicId、systemId、internalSubset

Document类型的变化

方法importNode()

属性defaultView

为对象document.implementation增加方法

-createDocumentType()

-createDocument()

为document.implementation新增方法createHTMLDocument()

Node类型的变化

方法isSupported()

方法isSameNode()

方法isEqualNode()

方法setUserData()

框架的变化

新增框架属性contentDocument

样式

遍历

NodeIterator类型

主要方法：nextNode()、previousNode()

创建实例-document.createNodeIterator()

var div=document.getElementById("div1");
var filter=function(node){
    return node.tagName.toLowerCase()=="li"?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP;
};
var iterator=document.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,filter,false);
var node=iterator.nextNode();
while(node!==null){
    alert(node.tagName);
    node=iterator.nextNode();
}

TreeWalker类型

创建实例——document.createTreeWalker()

主要方法：parentNode()、firstChild()、lastChild()、nextSibling()、previousSibling()、nextNode()、previousNode()

var div=document.getElementById("div1");
var filter=function(node){
    return node.tagName.toLowerCase()=="li"?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP;
};
var iterator=document.createTreeWalker(div,NodeFilter.SHOW_ELEMENT,filter,false);
var node=iterator.nextNode();
while(node!==null){
    alert(node.tagName);
    node=iterator.nextNode();
}

范围

方法createRange()

精细控制哪些节点包含在范围中：

-setStartBefore()

-setStartAfter()

-setEndBefore()

-setEndAfter()

var range1=document.createRange();
var range2=document.createRange();
var p1=document.getElementById("p1");
range1.selectNode(p1);
range2.selectNodeContents(p1);