首页 > 代码库 > 全栈JavaScript之路（ 二十四 ）DOM2、DOM3, 不涉及XML命名空间的扩展

全栈JavaScript之路（ 二十四 ）DOM2、DOM3, 不涉及XML命名空间的扩展

2024-07-11 18:49:14   220人阅读

（一）DocumentType 类型的变化新增三个属性: publicId,systemId,internalSubset(内部子集)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
[<!ELEMENT name (#PCDATA)>] >

通过， document.doctype.publicId,document.doctype.systemId,document.doctype.internalSubset ,可以访问到。


访问document.doctype.internalSubset 将得到"<!ELEMENT name (#PCDATA)>"。这种内部子集（internal subset）在HTML 中极少用到，在XML 中可能会更常见一些。


（二）Document 类型与 xml命名无关的变化 的是，importNode() 方法，这个方法是从一个文档中取出一个节点，放到另一文档，成为其一部分。

    需要注意的是，每一个节点都有一个ownerDocument属生，如果用appendChild(node) 方法，传入的节点不是同一个文档的会报错。


importNode()方法与cloneNode()方法很像，接受两个参数，一个是要导入的几点，一个是个布尔值，表示是否要导入子节点。


var newNode = document.importNode(oldNode,true)//导入所有子节点
document.body.appendChild(newnode)


    在DOM2,视图模块 增加了一个唯一的属性，defaultView ,指向文档的窗口（或者框架）。在IE中有个等级的属性 parentWindow ,如果要确定文档的窗口:

var parentWindow = document.defaultView || document.parentWindow



  除了  importNode()方法，defaultView 属性之外，还增加了两个方法: 

document.implementation.createDocumentType(文档类型名称,publicId,systemId) ,由于既有的文档类型不能修改，所以只能在创建新的文档的时候调用这个方法。

document.implementation.createDocument(namaspaceURL,root,doctype);


例子:

var doctype = document.implementation.createDocumentType("html","-//W3C//DTD XHTML 1.0 Strict//EN","http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd")

var doc = document.implementation.createDocument("http://www.w3.org/1999/xhtml",
"html", doctype);



(三) Node 类型的变化 新增了一个 与 命名空间无关的方法, isSupported()方法 ，与dom1 中的 document.hasFeature() 方法相似，确定当前节点拥有什么能力。

不过，还是建议用能力检测。

例子:

if(document.body.isSupported('html','2.0')) {
  //...
}

  DOM3 还为节点引用了isSameNode(), isEqualNode(),

这两个方法都接受一个节点参数，并在传入节点与引用的节点相同或相等时返回true。

所谓相同，指的是两个节点引用的是同一个对象。

所谓相等，指的是两个节点是相同的类型，具有相等的属性（nodeName、nodeValue，等等），而且它们的attributes 和childNodes 属性也相等（相同位置包含相同的值）。

DOM3 还针对 为Node 添加额外数据引入了新方法 setUserData(),该方法会把数据指定给节点，接受三个参数: 键，值，处理函数。 

document.body.setUserData("name","100",function(opration,key,value,srcNode,destNode){})

然后用 var v alue = document.body.getUserData("name")  ,就取得了值。


setUserData() ,的 回调函数，有5个参数，

  • 操作类型: 1复制，2导入，3删除，4重命名
  • 数据键
  • 数据值
  • 源节点
  • 目标节点

传入setUserData()中的 处理函数 （回调函数）会在带有数据的节点被复制、删除、重命名或引入一个文档时调用，因而你可以事先决定在上述操作发生时如何处理用户数据。


(四) 框架的变化


框架与内框架 分虽用 HTMLFrameElement, HTMLIframeElement 表示,他们在dom2 中都有一个新属性: contentDocument 

var iframe = document.getElementById("myIframe");
var iframeDoc = iframe.contentDocument; //IE8之前无效

conentDocument 对象是 Document类型的实例，因此可以像使用document 对象一样使用它, 包括所有属性与方法。

IE8 之前不支持 框架的 contentDocment属性,但支持 contentWindow 属性。

因此:

var iframe = document.getElementById("myIframe");
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;


 


联系
我们