DOM2和DOM3

时间 2019-11-13

标签 dom2 dom dom3 栏目 HTML 繁體版

原文原文链接

DOM2和DOM3都有哪些新特性？

相比DOM1, DOM2和DOM3引入了更多的交互能力，支持了更高级的XML特性javascript

DOM2级核心(DOM Level 2 Code)：为节点添加了更多方法和属性
DOM2级视图(DOM Level 2 Views)：为文档定义了基于样式信息的不一样视图
DOM2级事件(DOM Level 2 Events)：说明了如何使用事件与DOM文档交互
DOM2级样式(DOM Level 2 Style)：定义了如何以编程方式访问和改变CSS样式信息
DOM2级遍历和范围(DOM Level 2 Traversal and Range)：引入了遍历DOM文档和选择其特定部分的新接口
DOM2级HTML(DOM Level 2 HTML)：添加了更多属性和方法
DOM3级又增长了"XPath"模块和"加载与保存"(Load and Save)

// 下面的代码判断浏览器是否支持这些DOM模块
document.implementation.hasFeature('Core', 2.0)
document.implementation.hasFeature('Core', 3.0)
document.implementation.hasFeature('HTML', 2.0)
document.implementation.hasFeature('Views', 2.0)
document.implementation.hasFeature('XML', 2.0)

DOM方面有哪些变化？

1 针对XML命名空间的变化

引入命名空间的做用：不一样XML文档的元素能够混在一块儿(好比XHTML和SVG语言混合的文档)没必要担忧命名冲突css

如何定义命名空间：使用xmlns特性html

下面是一个命名空间为http://www.w3.org/1999/xhtml的xhtml页面例子java

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

若是想为XML命名空间建立前缀，可使用 xmlns:prefixnode

下面的例子使用了xhtml的前缀，固然特性也可使用命名空间来限制编程

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

1.1 Node类型的变化

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

localName：不带命名空间前缀的节点名称
namespaceURI：命名空间URI或者null
prefix: 命名空间前缀或者null

当使用了命名空间前缀时，nodeName = prefix : localName框架

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Example XHTML page</title>
  </head>
  <body>
    <s:svg xmlns:s="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>

对于<s:svg>元素而言，它的localName是"svg", tagName是"s:svg", namespaceURI是“http://www.w3.org/2000/svg”， prefix是“s”svg

1.2 Document类型变化

包含了与命名空间有关的方法，方法名的后面两个字母为NS, 意为namespacespa

createElementNS(namespaceURI, tagName)
createAttributeNS(namespaceURI, attributeName)
getElementsByTagNameNS(namespcaeURI, tagName)

1.3 Element类型变化

getAttributeNS(namespaceURI, localName)
getAttributeNodeNS(namespaceURI, localName)
getElementsByTagNameNS(namespaceURI, tagName)
hasAttributeNS(namespaceURI, localName)
removeAttribteNS(namespaceURI, localName)
setAttributeNS(namespace, qualifiedName, value)
setAttributeNodeNS(attNode)

1.4 NameNodeMap

getNamedItemNS(namespaceURI, localName)
removeNamedItemNS(namespaceURI, localName)
setNamedItemNS(node)

2 其余方面的变化

2.1 框架的变化

DOM2级中新增属性contentDocument：指向表示框架内容的文档对象

let iframe = document.getElementById('myIframe')
let iframeDoc = iframe.contentDocument // IE8之前的版本中无效

// 兼容方法，可使用contentWindow
let iframeDoc = iframe.contentDocument || iframe.contentWindow.document

2.2 样式

HTML中定义样式有三种方式：

<link/>包含外部样式表
<style />元素定义嵌入式样式
style 特性定义针对特定元素的样式

// 判断浏览器是否支持DOM2级定义的CSS
var supportsDOM2CSS = document.implementation.hasFeature('CSS', 2.0)
var supportsDOM2CSS2 = document.implementation.hasFeature('CSS2', 2.0)

2.2.1 访问元素的样式

经过Javascript中的style属性，能够访问HTML元素的style特性，包含经过style特性指定的全部样式信息，但不包含外部样式表或嵌入式样式表经层叠而来的样式

"float"比较特殊，由于"float"是Javascript中的保留字，因此“DOM2级样式”规范规定属性名为"cssFloat", IE支持的是"styleFloat"

1) DOM样式属性和方法

cssText: 访问style特性中的css代码，有读写两种模式，是设置多项样式最快捷的方式
length: 应用给元素的CSS属性的数量
getPropertyCSSValue(propertyName): 返回包含给定属性值的CSSValue对象, 这个对象包含两个属性：cssText和cssValueType, 其中cssText和getPropertyValue()返回的值相同，cssValueType是一个属相常量，0表示继承的值；1表示基本的值；2表示值列表；3表示自定义的值, 实际应用中，这个属性较getPropertyValue()不多使用
getPropertyPriority(propertyName): 若是给定的属性使用了!important设置，则返回“important”，不然，返回空字串
getPropertyValue(propertyName): 返回给定属性的字符串值
item(index): 返回给定位置的CSS属性的名称, 总与length配套使用，以便迭代在元素中应用的CSS属性
removeProperty(property): 从样式中删除给定属性
setProperty(propetryName, value, priority): 将给定属性设置为响应的值，并加上优先权标识符，或一个空字串

举个例子：

元素样式覆盖了外部样式表中的样式，Javascript的style对象只返回元素的样式对象

HTML:

<div id="myDiv" style="background-color: green;width:50px;">myDiv</div>

CSS:

#myDiv {
  width: 100px;
  height: 100px;
  background-color: red;
}

JS:

let i, len, prop, value;
let myDiv = document.querySelector("#myDiv")

// cssText
let cssText = myDiv.style.cssText
console.log(cssText) // background-color: green; width: 50px;

// length + item()
for(i = 0, len = myDiv.style.length; i < len; i++) {
  console.log(myDiv.style[i]) // 或者 myDiv.style.item(i)
}
// background-color
// width


// getPropertyValue
for(i = 0, len = myDiv.style.length; i < len; i++) {
  prop = myDiv.style.item(i)
  value = myDiv.style.getPropertyValue(prop)
  console.log(prop + ':' + value)
  // background-color:green
  // width:50px
}

2) 计算的样式

document.defalultView.getComputedStyle(element, pseudo)

<style>

  #myDiv {
    background-color: blue;
    width: 100px;
    height: 200px;
  }

</style>

<div id="myDiv" style="background-color:red;border:1px solid black;">myDiv</div>

let myDiv = document.getElementById('myDiv')
let computedStyle = document.defaultView.getComputedStyle(myDiv, null)
console.log(computedStyle.backgroundColor) // rgb(255, 0, 0)
console.log(computedStyle.width) // 100px
console.log(computedStyle.height) // 200px
console.log(computedStyle.border) // 1px solid rgb(0, 0, 0)

border是一个综合属性，不会在全部浏览器中都有返回值，但computedStyle.borderLeftWidth则会返回值；IE不支持getComputedStyle, 但还有一个currentStyle属性，返回CSSStyleDeclaration的实例

let myDiv = document.getElementById('myDiv')
let computedStyle = myDiv.currentStyle'
console.log(computedStyle.backgroundColor) // rgba(255, 0, 0)
console.log(computedStyle.width) // 100px
console.log(computedStyle.height) // 200px
console.log(computedStyle.border) // undefined

2.2.2 操做样式表

1) CSS 规则

CSSStyleRule对象的属性

cssText: 返回整条规则对应的文本

selectorText: 返回当前规则的选择符文本, Firefox, Safari, Chrome和IE只读，Opera容许修改

style: 经过它设置和取得规则中特定的样式表(就像元素上的style属性同样)

let sheet = document.styleSheets[0]
let rules = sheet.cssRules || sheet.rules
let rule = rules[0]

console.log(rule.selectorText) // #myDiv
console.log(rule.style.cssText) // width: 100px; height: 100px; background-color: red;
console.log(rule.style.backgroundColor) // red
console.log(rule.style.width) // 100px
console.log(rule.style.height) // 100px

2) 元素大小