weixin_33728708
weixin_33728708

你不知道的那些DOM

原文链接： https://juejin.im/post/5ad70ddf6fb9a028c22b4cbe

DOM变化

DOM2级和3级的目的在于扩展DOM API，以满足操作XML的所有需求，同时提供更好的错误处理及特性检测能力。从某种意义上讲，实现这一目的的很大程度意味着对命名空间的支持。

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文档的元素就可以混合一起，共同构成格式良好的文档，而不必担心发生命名冲突。

命名空间要使用xmlns特性来指定。

'http://www.w3.org/1999/xhtml'>
    
        Example XHTML page
    
    
        Hello world!
    

复制代码

Node类型的变化

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

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

其他方面的变化

DOM的其他部分在‘DOM2级核心’中也发生了一些变化。这些变化与XML命名空间无关，而是更倾向于确保API的可靠性及完整性。

DocumentType类型的变化

新增了3个属性：publicId、systemId和internalSubset。

Document类型的变化

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

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

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

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

document.body.appendChild(newNode);
复制代码

Node类型的变化

Node类型中唯一与命名空间无关的变化，就是添加了isSupported()方法。与DOM1级为document.implementation引入的hasFeature()方法类似，isSupported()方法用于确定当前节点具有什么能力。

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

var div1 = document.createElement('div');

div1.setAttribute('class', 'box');

var div2 = docuemnt.createElement('div');

div2.setAttribute('class', 'box');

div1.isSameNode(div1);  // true
div1.isSameNode(div2); // false
div1.isEqualNode(div2); // true
复制代码

框架的变化

略

样式

在HTML中定义样式的方式有3种：通过元素包含外部样式表文件、使用