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) 元素大小

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。