《JS高程（3）》DOM2和DOM3-DOM变化-第12章笔记(22)

最新推荐文章于 2022-11-14 17:40:25 发布

ymc_Webpack

最新推荐文章于 2022-11-14 17:40:25 发布

阅读量667

点赞数

分类专栏： JavaScript 文章标签： html xml dom 结构

本文链接：https://blog.csdn.net/ymc_webpack/article/details/55101081

版权

JavaScript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

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

DOM2和DOM3级则在这个结构的基础上引入了更多的交互能力，也支持了更高级的XML特性。

DOM2级核心(DOM Level2 Core)：	在1级核心基础上构建，为节点添加了更多方法和属性
DOM2级视图(DOM Level2 View)：	为文档定义了基于样式信息的不同试图
DOM2级事件(DOM Level2 Events)：	说明了如何使用事件与DOM文档交互
DOM2级样式(DOM Level2 Style)：	定义了如何以编程方式来访问和改变CSS样式信息
DOM2级遍历和范围(DOM Level2 Traversal and Range)：	引入了遍历DOM文档和选择其特定部分的新街口
DOM2级HTML(DOM Level2 HTML)：	在1级HTML基础上构建，添加了更多属性、方法和新街口

DOM变化

DOM2级和3级的目的在于扩展DOM API，以满足操作XML的所有需求，同时提供更好的错误处理及特性检测能力。

“DOM2级视图”和“DOM2级HTML”模块也增强了DOM接口，提供了新的属性和方法，将这两个方法也“DOM2级核心”放在一起。可以通过下列代码来确定浏览器是否支持这些DOM模块。

implementation 属性可返回处理该文档的 DOMImplementation 对象。

var supportsDOM2Core = document.implementation.hasFeature("Core", "2.0");
var supportsDOM3Core = document.implementation.hasFeature("Core", "3.0");
var supportsDOM2HTML = document.implementation.hasFeature("HTML", "2.0");
var supportsDOM2View = document.implementation.hasFeature("View", "2.0");
var supportsDOM2XML = document.implementation.hasFeature("XML", "2.0");

针对XML命名空间的变化

HTML不支持XML命名空间，单XHTML支持XML命名空间。
命名空间要使用xmlns特性来指定，在任何格式良好XHTML页面中，都应该将其包含在<html>元素中：

<html xmlns = "http://www.w3.org/1999/xhtml">
    <head>
        <title>Example XHTML page</title>
    </head>
    <body>
        Hello world!
    </body>
</html>

所有元素默认都被视为XHTML命名空间中的元素，要想明确的为XML命名空间创建前缀，可以使用xmlns后跟冒号，再后跟前缀：

<xhtml:html xmlns:xhtml = "http://www.w3.org/1999/xhtml">
    <xhtml:head>
        <title>Example XHTML page</title>
    </xhtml:head>
    <xhtml:body>
        Hello world!
    </xhtml:body>
</xhtml:html>

这里为XHTML的命名空间定义了一个名为xhtml的前缀，并要求所有XHTML元素都以该前缀开头。为了避免不同语言间的冲突，与需要使用命名空间来限定特性：

<xhtml:html xmlns:xhtml = "http://www.w3.org/1999/xhtml">
    <xhtml:head>
        <title>Example XHTML page</title>
    </xhtml:head>
    <xhtml:body xhtml:class="home">
        Hello world!
    </xhtml:body>
</xhtml:html>

例子中的特性class带有一个xhtml前缀，在只基于一种语言编写XML文档的情况下，命名空间实际上也没有什么用，但在混合使用两种语言的情况下，命名空间的用处就非常大了，混合了XHTML和SVG语言的文档：

<html xmlns:xhtml = "http://www.w3.org/1999/xhtml">
    <head>
        <title>Example XHTML page</title>
    <head>
    <body >
        <svg xmlns:xhtml = "http://www.w3.org/2000/svg" version = "1.1" viswBox = "0 0 100 100" style = "width:100%; height:100%">
        <rect x = "0" y = "0" width = "100" height = "100" style = "fill:red"/>
        </svg>
    <body>
</xhtml:html>

着这个例子中，通过设置命名空间，将<svg>标识为了与包含文档无关的元素。此时，<svg>元素的所有子元素，以及这些元素的所有特性。都被认为属于http://www.w3.org/2000/svg命名空间。即是这个文档从技术上说是一个XHTML文档，但因为有了命名空间，其中的SVG代码也仍然是有效的。

1.Node类型的变化

在DOM2级中，Node类型包含下列特定于命名空间的属性。

localName:	不带命名空间前缀的节点名称
namespaceURI:	命名空间URI或者（在未指定的情况下是）null
prefix:	命名空间前缀或者（在未指定的情况下是）null

当节点使用了命名空间前缀时，其nodeName等于prefix+”:”+localName.

<html xhtml = "http://www.w3.org/1999/xhtml">
    <head>
        <title>Example XHTML page</title>
    <head>
    <body >
        <s:svg xmlns:xhtml = "http://www.w3.org/2000/svg" version = "1.1" viswBox = "0 0 100 100" style = "width:100%; height:100%">
        <s:rect x = "0" y = "0" width = "100" height = "100" style = "fill:red"/>
        </s:svg>
    <body>
</html>

对于<html>元素来说，它的localName和tagName是”html”，namespaceURI是”http://www.w3.org/1999/xhtml“，prefix是null。对于<s:svg>元素而言，它的localName是”svg”，tagName是”s:svg”，namespaceURI是”http://www.w3.org/2000/svg“,prefix是”s”。
在DOM3级在此基础上更进一步：

isDefaultNamespace(naemspaceURI)：	在指定的naemspaceURI是当前节点的默认命名空间的情况下返回true
lookupNamespaceURI(URI)：	返回给定prefix的命名空间
lookupPrefix(naemspaceURI)：	返回给定naemspaceURI的前缀

针对前面的例子，可以执行下列代码：

alert(document.body.isDefaultNamespace("http://www.w3.org/1999/xhtml"));//true

alert(svg.lookupPrefix("http://www.w3.org/2000/svg");//"s"

alert(svg.lookupNamespaceURI("s"));//http://www.w3.org/2000/svg

在取得了一个节点，但不知道该节点与文档其他元素之间关系的情况，这些方法很有用。

2.Document类型的变化

DOM2级中的Document类型也发生了变化，包含了下列与命名空间有关的方法：

createElementNS(naemspaceURI，tagName)：	使用给定的tagName创建一个属于命名空间namespaceURI的新元素
createAttributeNS(naemspaceURI，attributeName)：	使用给定的attributeName创建一个属于命名空间namespaceURI的新元素
createElementByTagNameNS(naemspaceURI，tagName)：	返回属于命名空间naemspaceURI的tagName元素的NodeList

使用这些方法是需要传入表示命名空间的URI（而不是命名空间前缀）：

//创建一个新的SVG元素
var svg = document.createElementNS("http://www.w3.org/2000/svg","svg")

//创建一个属于某个命名空间的新特性
var elems = document.createAttributeNS("http://www.somewhere.com","random");

//取得所有XHTML元素
var elems = document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "*")

只有在文档中存在两个或多个命名空间时，这些与命名空间有关的方法才是必需的。

3.Element类型的变化

“DOM2级核心”中有关Element的变化，主要涉及操作特性，新增方法：

getAttributeNS(namespaceURI, localName)：	取得命名空间namespaceURI且名为localName的特性。
getAttributeNodeNS(namespaceURI, localName)：	取得命名空间namespaceURI且名为localName的特性节点。
getElementByTagNameNS(namespaceURI, tagName)：	返回属于命名空间namespaceURI的tagName元素的NodeList。
hasAttributeNS(namespaceURI, localName)：	确定当前元素是否有一个名为localName的特性，而且该特性的命名空间是namespaceURI。注意：hasAttribute()方法，用于不考虑命名空间的情况。
removeAttributeNS(namespaceURI, localName)：	删除属于命名空间namespaceURI且名为localName的特性。
setAttributeNS(namespaceURI, qualifiedName, value)：	设置属于命名空间namespaceURI且名为qualifiedName的特性的值为value。
setAttributeNodeNS(attNode)：	设置属于命名空间namespaceURI的特性节点。

除了第一个参数外，这些方法与DOM1级中相关方法的作用相同，第一个参数始终都是一个命名空间URI。

4.NamedNodeMap类型的变化

NamedNodeMap类型也新增了下列与命名空间有关的方法。由于特性是通过NamedNodeMap表示的，因此这些方法多数情况下只针对特性使用。

getNameItemNS(namespaceURI, localName)：	取得属于命名空间namespaceURI且名为localName的项
getNameItemNS(namespaceURI, localName)：	取得属于命名空间namespaceURI且名为localName的项
setNameItemNS(namespaceURI, localName)：	添加node,这个节点已经实现指定了命名空间信息

由于一般都是通过元素访问特性，所以这些方法很少用。

其他方面的变化

1.DocumentType类型的变化

DocumentType类型新增了3个属性：publicId、systemId和internalSubset.
publicId、systemId表示文档类型声明中的两个信息段，在DOM1中无法访问。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"
[<!ELEMENT name (#PCDATA)>]>

就这个文档声明而言，publicId是"-//W3C//DTD HTML 4.01//EN"，systemId是"http://www.w3.org/TR/html4/strict.dtd",internalSubset是<!ELEMENT name (#PCDATA)>（用于访问包含在文档类型生命中的额外定义）:

alert(document.doctype.publicId);
alert(document.doctype.systemId);
alert(document.doctype.internalSubset);

2.Document类型的变化

Document类型的变化中唯一与命名空间无关的方法是importNode()。

用途：从文档中取得一个节点，然后将其导入另一个文档，使其成为文档结构的一部分。

注意：每个节点都有一个ownerDocument属性，表示所属文档，如果调动appendChild()是传入的节点属于不同的文档
(ownerDocument属性的值不一样)，则会导致错误。但在调用importNode()时传入不同文档的节点则会返回一个新节点，这个新节点的所有权归当前文档所有。

importNode()方法接收另个参数：要复制的节点和一个表示是否复制子节点的布尔值。（与Element的cloneNode()方法相似）

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

该方法在XML文档中用的比较多。

“DOM2级试图”模块添加了一个名为defaulView的属性，其中保存着一个指针，指向拥有给定文档的窗口（或框架）。IE不支持该属性，有一个等价的属性名：parentWindow。确定文档的归属窗口，使用以下代码：

var parentWindow = document.defaultView || document.parentWindow;

“DOM2级核心”为document.implementation对象规定了两个新方法：createDocumentType()和createDocument()。
createDocumentType()方法用于创建一个新的DocumentType节点，接受3个参数：文档类型名称、publicId、systemId。
例：下列代码会创建一个新的HTML4.01 Strict文档类型：

var doctype = document.implementation.createDocumentType("html", "-//W3C//DTD HTML 4.01//EN", "http://www.w3.org/TR/html4/strict.dtd");

由于既有文档的文档类型不能改变，因此createDocumentType()只在创建文档时有用，创建新文档时需要用到createDocument()方法，接受3个参数：针对文档中元素的namespaceURI、文档元素的标签名、新文档的文档类型。
创建一个空的新XML文档：

// 创建一个没有命名空间的新文档，文档元素为<root>,没有指定文档类型
var doc = document.implementation.createDocument("", "root", null);

创建一个XHTML文档

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

//创建了一个带有适当命名空间和文档类型的新XHTML文档，新文档只有文档元素<html>
var doc = document.implementation.createDocument("http://www.w3.org/1999/xhtml", "html", doctype);

“DOM2级HTML”模块为document.implementation新增了一个方法——createHTMLDocument()，用于创建一个完整的HTML文档，包括<html>、<head>、<title>和、<body>元素。这个方法只接受一个参数，及新创建文档的标题（放在<title>元素中的字符串），返回新的HTML文档：

//创建的文档是HTMLDocument类型的实例，因而具有该类型的所有属性和方法，包括title和body属性，只有Opera和Safari支持。
var htmldoc = document.implementation.createHTMLDocument("New Doc");
alert(htmldoc.title);   //"New Doc"
alert(typeof htmldoc.body); //"object"

3.Node类型的变化

Node类型中唯一与命名空间无关的变化，为添加了isSupported()方法。与DOM1级为document.implementation引入的hasFeature()方法类似。

isSupported()方法用于确定当前节点具有什么能力，接受两个参数：特性名和特性版本号。

如果浏览器实现了相应特性，能够基于给定节点执行盖特性，isSupported()就返回true：

if (document.body.isSupported("HTML", "2.0")){
    //执行只有"DOM2级HTML"才支持的操作
}

DOM3级针对为DOM节点添加额外数据引入了新方法：setUserDate()方法–会将数据指定给节点，接受3个参数–要设置的键、实际的数据和处理函数。

将数据指定给一个节点：

document.body.setUserData("name", "Nicholas", function(){});

使用getUserData()并传入相同的键，就可以取得该数据：

var value = document.body.getUserData("name");

传入setUserDate()中的处理函数会在带有数据的节点被复制、删除、重命名或引入一个文档是调用，处理函数接受5个参数：表示操作类型的数值（1表示复制，2表示导入，3表示删除，4表示重命名）、数据键、数据值、源节点和目标节点。在删除节点时，源节点是null；而在复制节点时，目标节点是null。

//创建<div>元素
var div = document.createElement("div");
//添加用户数据
div.setUserData("name", "Nicholas", function(operation, key, value, src, dest){
    if(operation == 1){
        dest.setUserData(key, value, function(){});
    } 
});

//复制元素时，会调用处理函数，从而将数据走动复制到了副本节点。
var newDiv = div.cloneNode(true);

//调用getUserData()方法，返回与原始节点中包含相同的值。
alert(newDiv.getUserData("name"));  //"Nicholas"

4.框架的变化
框架和内嵌框架分别用HTMLFrameElement和HTMLIFrameElement表示，在DOM2中新增contentDocument（包含一个指针，指向表示框架内容的文档对象）：

//访问内嵌框架的文本对象
var iframe = document.getElementById("myIframe");

//IE8之前不支持contentDocument属性，支持contentWindow属性
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

ymc_Webpack

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
《JS高程（3）》DOM2和DOM3-DOM变化-第12章笔记(22)

DOM1级主要定义的是HTML和XML文档的底层结构。 DOM2和DOM3级则在这个结构的基础上引入了更多的交互能力，也支持了更高级的XML特性。 DOM2级核心(DOM Level2 Core)：在1级核心基础上构建，为节点添加了更多方法和属性 DOM2级视图(DOM Level2 View)：为文档定义了基于样式信息的不同试图 DOM2级事件(DOM
复制链接

扫一扫