Javascript-15-DOM-1

最新推荐文章于 2024-07-08 16:22:29 发布

1024肥宅

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量154

点赞数

文章标签： javascript html html5

本文链接：https://blog.csdn.net/lqpf199681/article/details/106484277

版权

DOM1级主要定义的是HTML和XML文档的底层结构。DOM2和DOM3级则在这个结构的基础上引入了更多的交互能力，也支持了更高级的XML特性。为此，DOM2和DOM3级分为许多模块(模块之间具有某种关联)，分别描述了DOM的某个非常具体的子集。这些模块如下：

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

DOM变化

DOM2级和3级的目的在于扩展DOM API，以满足操作XML的所有需求，同时提供更好的错误处理及特性检测能力。从某种意义上讲，实现这一目的很大程度意味着对命名空间的支持。“DOM2级核心”没有引入新类型，它只是在DOM1级的基础上通过增加新方法和新属性来增加了既有类型。“DOM3级核心”同样增强了既有类型，但也引入了一些新类型，

类似地，“DOM2 级视图”和“DOM2 级HTML”模块也增强了DOM 接口，提供了新的属性和方法。由于这两个模块很小，因此我们将把它们与“DOM2 级核心”放在一起，讨论基本JavaScript 对象的变化。可以通过下列代码来确定浏览器是否支持这些DOM 模块。


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 supportsDOM2Views = document.implementation.hasFeature("Views", "2.0");
var supportsDOM2XML = document.implementation.hasFeature("XML", "2.0");

针对XML命名空间的变化

有了XML命名空间，不同XML文档的元素就可以混合在一起，共同构成格式良好的文档，而不必担心发生命名冲突。从技术上说，HTML不支持XML命名空间，但XHTML支持XML命名空间。

XHTML的命名空间是http://www.w3.org/1999/xhtml，在任何格式良好XHTML页面中，都应该将其包含在<html>元素中，例如：

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

Node类型的变化

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

localName：不带命名空间前缀的节点名称。
namespaceURI：命名空间URI或者(在未指定的情况下是)null.
prefix：命名空间前缀或者(在未指定的情况下是)null。

DOM3级在此基础上更进一步，又引入了下列与命名空间有关的方法。

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


alert(document.body.isDefaultNamespace("http://www.w3.org/1999/xhtml"); //true
//假设svg 中包含着对<s:svg>的引用
alert(svg.lookupPrefix("http://www.w3.org/2000/svg")); //"s"
alert(svg.lookupNamespaceURI("s")); //"http://www.w3.org/2000/svg"

Document类型的变化

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

createElementNS(namespaceURI, tagName)：使用给定的tagName创建一个属于命名空间namespaceURI的新元素。
createAttributeNS(namespaceURI, attributeName)：使用给定的attributeName创建一个属于命名空间namespaceURI的新特性。
getElementsBytagNameNS(namespaceURI, tagName)：返回属于命名空间namespaceURI的tagName元素的NodeList。

使用这些方法时需要传入表示命名空间的URI(而不是命名空间前缀)。


//创建一个新的SVG 元素
var svg = document.createElementNS("http://www.w3.org/2000/svg","svg");
//创建一个属于某个命名空间的新特性
var att = document.createAttributeNS("http://www.somewhere.com", "random");
//取得所有XHTML 元素
var elems = document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "*");tps://blog.csdn.net/Jane617_min/article/details/49683873

Element类型的变化

getAttributeNS(namespaceURI,localName)：取得属于命名空间namespaceURI 且名为localName 的特性。
getAttributeNodeNS(namespaceURI,localName)：取得属于命名空间namespaceURI 且名为localName 的特性节点。
getElementsByTagNameNS(namespaceURI, tagName)：返回属于命名空间namespaceURI的tagName 元素的NodeList。
hasAttributeNS(namespaceURI,localName)：确定当前元素是否有一个名为localName的特性，而且该特性的命名空间是namespaceURI。注“DOM2 级核心”也增加了一个hasAttribute()方法，用于不考虑命名空间的情况。
removeAttriubteNS(namespaceURI,localName)：删除属于命名空间namespaceURI 且名为localName 的特性。
setAttributeNS(namespaceURI,qualifiedName,value)：设置属于命名空间namespaceURI 且名为qualifiedName 的特性的值为value。
setAttributeNodeNS(attNode)：设置属于命名空间namespaceURI 的特性节点。
除了第一个参数之外，这些方法与DOM1 级中相关方法的作用相同；第一个参数始终都是一个命名空间URI。

NameNodeMap类型的变化

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

getNamedItemNS(namespaceURI,localName)：取得属于命名空间namespaceURI 且名为localName 的项。
removeNamedItemNS(namespaceURI,localName)：移除属于命名空间namespaceURI 且名为localName 的项。
setNamedItemNS(node)：添加node，这个节点已经事先指定了命名空间信息。
由于一般都是通过元素访问特性，所以这些方法很少使用。

其他方面的变化

DocumentType类型的变化

DOcumentType类型新增了3个属性：publicId、systemId、internalSubset。其中，前两个属性表示的是文档类型声明中的两个信息段，这两个信息段在DOM1级中是没有办法访问到的。

Document类型的变化

Document类型的变化中唯一与命名空间无关的方法是importNode()。这个方法的用途是从一个文档中取得一个节点，然后将其导入另一个文档，使其成为这个文档结构的一部分。需要注意的是，每个节点都有一个ownerDocument属性，表示所属文档。如果调用appendChild()时传入的节点属于不同的文档(ownerDocument属性的值不一样)，则会导致错误。但在调用importNode()时传入不同文档的节点则会返回一个新节点，这个新节点的所有权归当前文档所有。

importNode()方法与Element的cloneNode()方法非常相似，它接受两个参数：要复制的节点和一个表示是否复制子节点的布尔值。返回的结果是原来节点的副本，但能够在当前文档中使用。

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

createHTML-Document()方法用来创建一个完整的HTML文档，包括<html>、<head>、<title>、<body>元素。这个方法只接受一个参数，即新创建文档的标题(放在<title>元素中的字符串)，返回新的HTML文档。

Node类型的变化

Node类型中唯一与命名空间无关的变化，就是添加了isSupported()方法。与DOM1级为document.implementation引入的hasFeature()方法类似，isSupported()方法用于确定当前节点具有什么能力。这个方法接受两个参数：特性名和版本号。如果浏览器实现了相应特性，而且能够基于给定节点执行该特性，isSupported()就返回true。由于不同实现在决定对什么特性返回true或false时并不一致，这个方法同样也村子啊与hasFeature()方法相同的问题。为此，建议在确定某个特性是否可用时，最好还是使用能力检测。

DOM3级引入了两个辅助比较节点的方法：isSameNode()和isEuqalNode()。这两个方法都接受一个节点参数，并在传入节点与引用的节点相同或相等时返回true。所谓相同，值得时两个节点引用的时同一个对象。所谓相等，指的是两个节点是相同的类型，具有相等的属性(nodeName、nodeValue等)，而且它们的attributes和childNodes属性也相等(相同位置包含相同的值)。

setUserData()方法会将数据指定给节点，它接受三个参数：要设置的键、实际的数据和处理函数。

框架的变化

框架和内嵌框架分别用HTMLFrameElement和HTMLIFrameElement表示，它们在DOM2级中都有了一个新属性-contentDocument。这个属性包含一个指针，指向表示框架内容的文档对象。在此之前，无法直接通过元素取得这个文档对象

1024肥宅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript-15-DOM-1

DOM1级主要定义的是HTML和XML文档的底层结构。DOM2和DOM3级则在这个结构的基础上引入了更多的交互能力，也支持了更高级的XML特性。为此，DOM2和DOM3级分为许多模块(模块之间具有某种关联)，分别描述了DOM的某个非常具体的子集。这些模块如下：DOM2级核心：在1级核心基础上构建，为节点添加了更多的方法和属性。DOM2级视图：为文档定义了基于样式信息的不同视图。DOM2级事件：说明了如何使用事件与DOM文档交互。DOM2级样式：定义了如何以编程方式来访问和改变CSS样式信息。DO
复制链接

扫一扫