12.1 DOM 变化 | 易学教程

判断浏览器对 DOM 模块的支持

let supportDOM2Core = document.implementation.hasFeature('Core','2.0');
//对于DOM2.0核心的支持
let supportDOM3Core = document.implementation.hasFeature('Core','3.0');
//对于DOM3.0核心的支持
let supportDOM2HTML = document.implementation.hasFeature('HTML','2.0');
//对于DOM2.0HTML的支持
let supportDOM2Views = document.implementation.hasFeature('Views','2.0');
//对于DOM2.0视图的支持
let supportDOM2XML = document.implementation.hasFeature('XML','2.0');

一、针对XML命名空间的变化

注：HTML不支持XML命名空间，XHTML支持，所以这里指的是XHTML
为了使得不同文档的元素混合在一起，出现了XML命名空间，使用 xmlns 来表示
命名空间可以加前缀，需要在 xmlns 之后加冒号

<html xmlns='http://www.w3.org/1999/xthml'>
	<head>
		<title>Example XHTML page</title>
	</head>
	<body>
		<s:svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='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 和 svg 都添加了XML命名空间，其中 svg 加入了前缀，svg 下的后代元素也需要添加相同的前缀
1.node 类型的变化
DOM2 级为 node 类型添加了一些针对于命名空间的属性
在这里插入图片描述
localName：不带命名空间前缀的节点名称，对于HTML元素为html，对于svg元素为svg（但是其tagName为s:svg）
namespaceURI：自己添加的xmlns特性值，没有添加时为null
prefix：命名空间前缀，对于svg元素为s，没有添加时为null，对于html元素为null

DOM3级在此基础之上添加了方法
isDefaultNamespace(namespaceURI)：判断指定的namespaceURI是否为当前节点的默认命名空间，是为true，否为false
lookupNamespaceURI(prefix)：返回给定prefix的命名空间
lookupPrefix(namespaceURI)：返回给定namespaceURI的前缀

document.body.isDefaultNamespace('http://www.w3.org/1999/xthml'); //true
svg.lookupPrefix('http://www.w3.org/2000/svg'); //s
svg.lookupNamespaceURI('s'); //http://www.w3.org/2000/svg

2.Document 类型的变化
DOM2级为 Document 类型也添加了关于命名空间的新方法
createElementNS(namespaceURI,tagName)
createAttributeNS(namespaceURI,attributeName)
getElementsByTagNameNS(namespaceURI,tagName)

var svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
var att = document.createAttributeNS('http://www.somewhere.com','random');
var elems = document.getElementsByTagNameNS('http://www.w3.org/1999/xhtml','*');

3.Element 类型的变化
DOM2级同样在Element 类型上添加了一些关于命名空间的新方法
getAttributeNS(namespaceURI,localName)
getAttributeNodeNS(namespaceURI,localName)
getElementsByTagNameNS(namespaceURI,tagName)
hasAttributeNS(namespaceURI,localName)：是否拥有这样一个特性，同时存在不考虑命名空间的方法hasAttribute()
removeAttributeNS(namespaceURI,localName)
setAttributeNS(namespaceURI,qualifiedName,value)
setAttributeNodeNS(attNode)
4.NamedNodeMap 类型的变化
这些新增的方法多数情况下针对特性使用
getNamedItemNS(namespaceURI,localName)：取得对应命名空间中名为 localName 的项
removeNamedItemNS(namespaceURI,localName)：移除对应命名空间中名为 localName 的项
setNamedItemNS(node)：添加 node

二、其他方面的变化

1.DocumentType 类型的变化
新增了三个属性：publicId、systemId、internalSubset
2.Document 类型的变化
引入了一个新的方法importNode()，这个方法用于从一个文档中获取一个节点，导入到另一个文档中，与 cloneNode 类似，接收两个参数，要复制的节点和表示是否需要复制子节点的布尔值
DOM2级核心为 document.implementation 对象添加了两个方法：createDocumentType() 和 createDocument()，前者用于创建一个 DocumentType 节点，接收三个参数：文档类型名称、publicId、systemId；后者用于创建一个新文档，接收三个参数：针对文档中元素的namespaceURI、文档元素的标签名、新文档的文档类型
DOM2级HTML也为 document.implementation 新增了一个方法：createHTMLDocument()，用于创建一个完整的HTML文档，接收一个参数：新建文档的标题 title
3.Node 类型的变化
添加了isSupported() 方法，接收两个参数：特性名和特性版本号
DOM3级引入了两个辅助比较节点的方法：isSameNode() 和 isEqualNode()。前者指两个节点引用同一个对象，后者指两个节点类型相同、属性和属性值等也相同
DOM3级还针对为DOM节点添加额外数据引入了新方法：setUserData() 和 getUserData() 。前者将数据指定给节点，接收三个参数：要设置的键、实际的数据、处理函数

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

处理函数接收5个参数：表示操作类型的值（1复制，2导入，3删除，4重命名）、数据键、数据值、源节点、目标节点
后者接收一个参数：键

document.getUserData('name');

4.框架的变化
框架和内嵌框架分别用 HTMLFrameElement 和 HTMLIFrameElement 来表示，其在DOM2级中新增了一个属性：contentDocument，指向表示框架内容的文档对象

来源：CSDN

作者：糖小昔

链接：https://blog.csdn.net/weixin_44774877/article/details/104022514

标签

xml语言

dom