DOM2 和 DOM3
DOM1 级主要定义的是XML和HTML文档的底层结构。DOM2 级和DOM3 级则在这个结构的基础上引入了更多的交互能力,也支持更高级的XML特性。DOM2 级和DOM3 级分为许多模块:
DOM2 级核心(DOM Level 2 Core)在1级核心基础上构建,为节点添加了更多方法和属性。 DOM2 级视图(DOM Level 2 Views)为文档定义了基于样式信息的不同视图。 DOM2 级事件(DOM Level 2 Events)说明了如何使用事件与DOM文档交互。 DOM2 级样式(DOM Level 2 Style)定义了如何以编程方式来访问和改变CSS样式信息。 DOM2 级遍历和范围(DOM Level 2 Traversal and Range)引入了遍历DOM文档和选择其特定部分的新接口。 DOM2 级HTML(DOM Level 2 HTML)在1级HTML基础上构建,添加了更多属性、方法和新接口。 DOM3 级又增加了”XPath”模块和”加载与保存”(Load and Save)模块。这部分会在第十八章讨论。
DOM变化
DOM2 级和3 级的目的在于扩展DOM API,以满足操作XML的所有需求,同时提供更好的错误处理及特性检测能力。DOM Level 2 Core 没有引入新类型,只是在DOM Level 1 Core 的基础上通过添加新方法和属性来增强既有类型。DOM Level 3 Core 同样增强了既有类型,但也引入了新类型。 类似的DOM Level 2 View 和DOM Level 2 HTML 也增强了DOM接口,提供了新的属性和方法。可以通过下面的代码确定浏览器是否支持这些DOM模块。
var supportDOM2Core = document.implementation .hasFeature ("Core" , "2.0" )
var supportDOM3Core = document.implementation .hasFeature ("Core" , "3.0" )
var supportDOM2HTML = document.implementation .hasFeature ("HTML" , "2.0" )
var supportDOM2Views = document.implementation .hasFeature ("Views" , "2.0" )
var supportDOM2XML = document.implementation .hasFeature ("XML" , "2.0" )
console.log ("supportDOM2Core=" +supportDOM2Core)
console.log ("supportDOM3Core=" +supportDOM3Core)
console.log ("supportDOM2HTML=" +supportDOM2HTML)
console.log ("supportDOM2Views=" +supportDOM2Views)
console.log ("supportDOM2XML=" +supportDOM2XML)
在IE8 里都是false,在IE 9里supportDOM3Core是false,其余是true。
针对 XML 命名空间的变化
Node 类型的变化
<html xmlns ="http://www.w3.org/1999/xhtml" >
<head >
<title > Example XHTML page</title >
<script type ="text/javascript" > <![CDATA[
function getElementInfo () {
var html = document.documentElement;
var svg = document.getElementsByTagNameNS("http://www.w3.org/2000/svg" , "svg" )[0 ];
alert(html.namespaceURI);
alert(html.prefix);
alert(html.localName);
alert(html.tagName);
alert(svg.namespaceURI);
alert(svg.prefix);
alert(svg.localName);
alert(svg.tagName);
}
]]> </script >
</head >
<body >
<s:svg xmlns:s ="http://www.w3.org/2000/svg" version ="1.1"
viewBox ="0 0 100 100" style ="width:100%; height:100%" onclick ="getElementInfo()" >
<s:rect x ="0" y ="0" width ="100" height ="100" style ="fill:red" />
</s:svg >
</body >
</html >
DOM2 级下Node类型新增属性
localName:不带命名空间前缀的节点名称 namespaceURI:命名空间URI或者null prefix:命名空间前缀或者null DOM3 级下Node类型增加的方法
isDefaultNamespace(namespaceURI) lookupNamespaceURI(prefix) lookupPrefix(namespaceURI)
Document 类型的变化
DOM2 级Document类型的新方法
createElementNS(namespaceURI, tagName) createAttributeNS(namespaceURI, attributeName) getElementsByTagNameNS(namespaceURI, tagName) 返回属于命名空间namespaceURI的tagName元素的NodeList。 只有在文档中存在两个或多个命名空间时,这些方法才是必需的。
Element 类型的变化
DOM2 级核心关于Element类型 新增方法如下
getAttributeNS(namespaceURI, localName)取得属于命名空间namespaceURI且名为localName的特性值 。 getAttributeNodeNS(namespaceURI, localName)取得属于命名空间namespaceURI且名为localName的特性节点 。 hasAttributeNS(namespaceURI, localName),注意DOM Level 2 Core增加了一个方法hasAttribute()用于判断Element是否有传入的特性。 removeAttributeNS(namespaceURI, localName) setAttributeNS(namespaceURI, qualifiedName,value) setAttributeNodeNS(attNode)
NameNodeMap 类型的变化
还记得特性是通过NameNodeMap表示的吗?下面的这些新方法多数情况下只针对特性使用
getNamedItemNS(namespaceURI, localName) removeNamedItemNS(namespaceURI, localName) setNamedItemNS(node) 由于一般是通过元素访问特性,所以这些方法很少使用。
其他方面的变化
DocumentType 类型的变化
DocumentType类型新增了3个属性:publicId,systemId和internalSubset。其中前两个属性表示的是文档类型声明中的两个信息段。这在DOM1 级中是没有办法访问到的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"//document.doctype.publicId
"http://www.w3.org/TR/html4/strict.dtd"//document.doctype.systemId
[<!ELEMENT name (#PCDATA)>] > //document.doctype.internalSubset
Document 类型的变化
增加了一个importNode()方法。这个方法的用途是从一个文档中取得一个节点,将其导入另一个文档,使其成为这个文档结构的一部分。需要注意的是,每个节点都有一个ownDocument属性,表示所属的文档。如果调用appendChild()时传入的节点属于不同的文档(ownDocument属性不同),则会导致错误。 DOM Level 2 Views添加了一个名为defaultView属性,除IE外的浏览器都支持该属性。该属性指向给定文档的窗口或框架(Window类型)。 另外DOM Level 2 Core还为document.implementation规定了2个新方法:createDocumentType()和createDocument() 。 createDocumentType()用来创建DocumentType节点,接收3个参数:文档类型名称、publicId、systemId。由于既有文档的文档类型不可变,因此createDocumentType()只能在创建新文档时使用。 创建新的文档要用createDocument(),该方法接收三个参数,针对文档中元素的namespaceURI、文档元素的标签名、新文档的文档类型。 DOM Level 2 HTML也为document.implementation新增了一个方法,createHTMLDocument() 。这个方法的用途是创建一个完整的HTML文档,包括<html><head><title><body>
元素。这个方法只接受一个参数,即新创建文档的标题 。
Node类型的变化
添加了isSupported() 方法,这个方法与DOM 1级为document.implementation引入的hasFeature()方法类似,isSupported()方法用于确定当前节点具有什么能力。 DOM 3级引入了2个辅助比较节点的方法:isSameNode()和isEqualNode() 。前者比较两个节点是不是同一个对象,后者则是比较两个节点是否具有相同的类型,相等的属性,attributes和childNodes也相等。
var div1 = document.createElement ("div" )
div1.setAttribute ("class" , "box" )
var div2 = document.createElement ("div" )
div2.setAttribute ("class" , "box" )
alert(div1.isSameNode (div2))
alert(div1.isEqualNode (div2))
DOM 3级还针对DOM节点添加额外数据引入了新方法。setUserData() 方法和getUserData() 方法。
var div = document.createElement("div" );
div.setUserData("name" , "Nicholas" , function (operation, key, value, src, dest) {
if (operation == 1 ){
alert("name" );
dest.setUserData(key, value, function () { });
}
});
var newDiv = div.cloneNode(true );
alert(newDiv.getUserData("name" ));
框架的变化
框架和内嵌框架分别用HTMLFrameElement和HTMLIFrameElement表示,他们在DOM 2级都有一个新属性,名叫contentDocument 。这个属性包含一个指针,指向表示框架内容的文档对象。在此之前,无法直接通过元素取得这个文档对象(只能用frames集合)。
<iframe id ="myIFrame" src ="javascript:false" > </iframe >
<script type ="text/javascript" >
var iframe = document.getElementById("myIFrame" );
var iframeDoc = iframe.contentDocument;
alert(iframeDoc);
</script >
Opera、Firefox、Safari和Chrome都支持该属性。IE 8之前虽然不支持框架中的contentDocument属性,但支持一个名叫contentWindow (所有浏览器都支持)的属性,该属性返回框架的window对象,而这个window对象下有一个document属性。
var iframe = document.getElementById ("myIframe" )
var iframeDoc = iframe.contentDocument || iframe.contentWindow .document
alert(iframeDoc)