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

(一)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;

全栈JavaScript之路( 二十四 )DOM2、DOM3, 不涉及XML命名空间的扩展,布布扣,bubuko.com

时间: 2024-12-05 16:27:13

全栈JavaScript之路( 二十四 )DOM2、DOM3, 不涉及XML命名空间的扩展的相关文章

全栈JavaScript之路(十四)HTML5 中与class属性相关的扩充

1. getElementByClassName() :支持getElementsByClassName()方法的浏览器有IE 9+.Firefox 3+.Safari 3.1+.Chrome 和 Opera 9.5+. 2. classList 属性 :  classList 属性是新集合类型 DOMTokenList  的实例.DOMTokenList 类型有一个lenght 属性 ,表示包含了多少子元素,要取得每一个元素可以通过item() 方法访问,也可以用 [ ] 方法 访问. 此外这

全栈JavaScript之路(十二)了解 Selector API

2008 年之前,浏览器中几乎所有的DOM扩展都是专有的.此后,W3C 着手将一些已经成为事实标准的专有扩展标准化并写入规范当中. Selector API  level 1  的核心是两个方法: querySelector(), querySelectorAll() .在兼容浏览器中可以通过Docuemnt 类型节点,或者Element类型节点调用. 目前已完全支持Selectors API Level 1的浏览器有IE 8+.Firefox 3.5+.Safari 3.1+.Chrome 和

全栈JavaScript之路(十九)HTML5 插入 html标记 ( 一 )innerHTML 与outerHTML

在需要给文档插入大量的html 标记下,通过DOM操作很麻烦,你不仅要创建一系列的节点,而且还要小心地按照顺序把它们接结起来. 利用html 标签 插入技术,可以直接插入html代码字符串,简单.高效! 以下插入html标签相关的扩展已经纳入html5 规范. 1.innerHTML 属性 2.outerHTML 属性 3.insertAdjacentHTML 方法 innerHTML 属性 有两种模式,写模式与读模式. 在读模式下,返回的是html 代码字符串. 例如: <div id="

全栈JavaScript之路(十五)HTML5 focus 扩展 (焦点扩展)

HTML5 添加了辅助管理 focus 的功能,  文档获得焦点的途径有; 页面加载,用户输入(一般是按tab键),和 在代码中调用focus()函数. HTML5新增的辅助管理焦点的属性与方法有: document.activeElement 属性, 这个属性指向获得焦点的元素,文档加载期间 值为null, 文档加载完成,保存得是  document.body 的引用. document.hasFocus()方法, 确定文档是否获得了焦点. 查询文档获知哪个元素获得了焦点,以及确定文档是否获得

全栈JavaScript之路(十六)HTML5 HTMLDocument 类型的变化

HTML5 扩展了 HTMLDocument, 增加了新的功能. 1.document.readState = 'loading' || 'complete'  //支持readyState 属性的浏览器有IE4+.Firefox 3.6+.Safari.Chrome 和Opera 9+. 2.document.compatMode = 'CSS1Compat' || 'BackCompat' //实现这个属性的浏览器有ie6,Firefox.Safari 3.1+.Opera 和Chrome.

全栈JavaScript之路(十)学习 DocumentFragment 类型 节点

DocumentFragment 类型节点,代表一个文档片段,是一种轻量级的'文档' 对象,可以包含其它类型节点,并有能力访问.操作其中的节点,但是在文档中没有文档标记,相当于是一个页面不可见的容器.其构造函数为,function DocumentFragment() {[native code]}. DocumentFragment 类型节点的特征; nodeType:11 nodeName:#document-fragment nodeValue:null prasentNode:null

全栈JavaScript之路(十八)HTML5 自定义数据属性

HTML5 规范规定,用户可以为元素 自定义非标准属性, 但是要添加 data- 前缀. 目的是为元素提供与页面渲染无关的信息.或者语义信息.这些属性名可以随意添加,只要带上前缀 data- 开头就可以. <div id="myid" data-appid="1" data-appname="csdn"></div> 添加属性这后可以通过 dataset 访问自定义属性,dataset 属性 是DOMStringMap  

全栈JavaScript之路( 二十五 )访问元素的样式

任何支持style 特性的元素在 ,在其DOM  节点 对象中都有一个 style 属性与之对应. 这个style 对象是 CSSStyleDeclaration类型的实例,包含着html style特性的所有样式信息.但不包含 外部样式或者 内嵌样式层叠而来的样式. 在style特性中,提定的任何css属性,都将表现为这个style 对象的属性.对于使用短划线的的属性名,必须转化为驼峰大小写形式,多数情况下都可以这样转换. 也有例外, float 是javascript 关键字,不能直接转换,

全栈JavaScript之路( 二十 )HTML5 插入 html标记 ( 二 )insertAdjacentHTML

insertAdjacentHTML(),  这个方法也是在IE中最早出现的,现在已纳入html5规范,它接受两个参数,一个是下列的标记之一,一个是要写入的 html 代码文本. beforebegin , (英文为开始之前的意思)在当前元素之前插入一个新的紧邻的同辈元素 afterbegin,(英文为开始之后的意思)在当前元素之下插入一个子元素,或者是在当前元素的第一个子元素之前插入一个新的子元素. beforeend,(英文为结束之前的意思)在当前元素之后插入一个新的子元素,或者在当前元素最