DOM2和DOM3

時間  2019-12-07
標籤 dom2 dom dom3 欄目 HTML 简体版
原文   原文鏈接

一、DOM變化

  • DOM各版本css

    • DOM1主要定義的是 HTML 和 XML 文檔的底層結構html

    • DOM2 和 DOM3 級則在這個結構的基礎上引入了更多的交互能力，也支持了更高級的 XML 特性node

      • DOM2 級核心（DOM Level 2 Core）：在 1 級核心基礎上構建，爲節點添加了更多方法和屬性
      • 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）：在 1 級 HTML 基礎上構建，添加了更多屬性、方法和新接口

    • 能夠經過下列代碼來肯定瀏覽器是否支持這些 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命名空間app

      • 命名空間要使用 xmlns 特性來指定，XHTML 的命名空間是 http://www.w3.org/1999/xhtm框架

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

      • 要想明確地爲 XML命名空間建立前綴，可使用 xmlns 後跟冒號，再後跟前綴dom

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

      • 有時候爲了不不一樣語言間的衝突，也須要使用命名空間來限定特性svg

        <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>

      • 在混合使用兩種語言的狀況下，命名空間的用處就很是大了函數

        <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         <title>Example XHTML page</title>
     </head>
     <body>
         <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
             viewBox="0 0 100 100" style="width:100%; height:100%">
             <rect x="0" y="0" width="100" height="100" style="fill:red"/>
         </svg>
     </body>
</html>

    • 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>

      • DOM3 級在此基礎上更進一步，又引入了下列與命名空間有關的方法

        isDefaultNamespace(namespaceURI)：在指定的 namespaceURI 是當前節點的默認命名空間的狀況下返回 true。
lookupNamespaceURI(prefix)：返回給定 prefix 的命名空間。
lookupPrefix(namespaceURI)：返回給定 namespaceURI 的前綴
//針對前面的例子，能夠執行下列代碼
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 類型的變化

      • createElementNS(namespaceURI, tagName)：使用給定的 tagName 建立一個屬於命名空間 namespaceURI 的新元素

      • createAttributeNS(namespaceURI, attributeName)：使用給定的 attributeName 建立一個屬於命名空間 namespaceURI 的新特性

      • getElementsByTagNameNS(namespaceURI, tagName)：返回屬於命名空間 namespaceURI的 tagName 元素的 NodeList

        //建立一個新的 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", "*");

    • 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 的特性的值爲 valuesetAttributeNodeNS(attNode)：設置屬於命名空間 namespaceURI 的特性節點

    • NamedNodeMap 類型的變化

      • getNamedItemNS(namespaceURI,localName)：取得屬於命名空間 namespaceURI 且名爲
        localName 的項
      • removeNamedItemNS(namespaceURI,localName)：移除屬於命名空間 namespaceURI 且名
        爲 localName 的項
      • setNamedItemNS(node)：添加 node，這個節點已經事先指定了命名空間信息

  • 其餘方面的變化

    • DocumentType 類型的變化

      • DocumentType 類型新增了 3 個屬性：publicId、systemId 和 internalSubset

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"
[<!ELEMENT name (#PCDATA)>] >

      • 前兩個屬性表示的是文檔類型聲明中的兩個信息段，這兩個信息段在 DOM1 級中是沒有辦法訪問到

        alert(document.doctype.publicId);//-//W3C//DTD HTML 4.01//EN
alert(document.doctype.systemId); //"http://www.w3.org/TR/html4/strict.dtd

      • 最後一個屬性 internalSubset，用於訪問包含在文檔類型聲明中的額外定義

        document.doctype.internalSubset//<!ELEMENT name (#PCDATA)>

    • Document 類型的變化

      • importNode()：從一個文檔中取得一個節點，而後將其導入到另外一個文檔，使其成爲這個文檔結構的一部分；接受兩個參數，要複製的節點和一個表示是否複製子節點的布爾值；返回的結果是原來節點的副本，但可以在當前文檔中使用

        var newNode = document.importNode(oldNode, true); //導入節點及其全部子節點
document.body.appendChild(newNode);

      • defaultView 的屬性：保存着一個指針，指向擁有給定文檔的窗口（或框架），在 IE 中有一個等價的屬性名叫 parentWindow（Opera 也支持這個屬性）

        var parentWindow = document.defaultView || document.parentWindow;

      • document.implementation 對象的createDocumentType()方法：用於建立一個新的DocumentType節點，接受 3 個參數，文檔類型名稱、publicId、systemId

        var doctype = document.implementation.createDocumentType("html",
 "-//W3C//DTD HTML 4.01//EN",
 "http://www.w3.org/TR/html4/strict.dtd");

      • document.implementation 對象的createDocument()方法：建立新文檔，法接受 3 個參數，針對文檔中元素的 namespaceURI、文檔元素的標籤名、新文檔的文檔類型

        //建立一個空的新 XML 文檔
var doc = document.implementation.createDocument("", "root", null); 
//建立一個 XHTML 文檔
var doctype = document.implementation.createDocumentType("html",
 " -//W3C//DTD XHTML 1.0 Strict//EN",
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd");
var doc = document.implementation.createDocument("http://www.w3.org/1999/xhtml",
"html", doctype);

      • document.implementation對象的createHTMLDocument()方法：建立一個完整的 HTML 文檔，包括<html>、<head>、<title>、<body>元素；這個方法只接受一個參數，即新建立文檔的標題題（放在<title>裏的字符串），返回新的 HTML 文檔

        var htmldoc = document.implementation.createHTMLDocument("New Doc");
alert(htmldoc.title); //"New Doc"
alert(typeof htmldoc.body); //"object"

    • Node 類型的變化

      • isSupported()方法：法用於肯定當前節點具備什麼能力，這個方法也接受相同的兩個參數：特性名和特性版本號，若是瀏覽器實現了相應特性，並且可以基於給定節點執行該特性，就返回 true

        if (document.body.isSupported("HTML", "2.0")){
 //執行只有"DOM2 級 HTML"才支持的操做
}

      • isSameNode()和 isEqualNode()方法：接受一個節點參數，並在傳入節點與引用的節點相同或相等時返回 true；所謂相同，指的是兩個節點引用的是同一個對象。所謂相等，指的是兩個節點是相同的類型，具備相等的屬性（nodeName、nodeValue，等等），並且它們的 attributes 和 childNodes 屬性也相等（相同位置包含相同的值）

        var div1 = document.createElement("div");
div1.setAttribute("class", "box");
var div2 = document.createElement("div");
div2.setAttribute("class", "box");
alert(div1.isSameNode(div1)); //true
alert(div1.isEqualNode(div2)); //true
alert(div1.isSameNode(div2)); //false

      • setUserData()方法：會將數據指定給節點，它接受 3 個參數：要設置的鍵、實際的數據（能夠是任何數據類型）和處理函數；處理函數會在帶有數據的節點被複制、刪除、重命名或引入一個文檔時
        調用，於是你能夠事先決定在上述操做發生時如何處理用戶數據。處理函數接受 5 個參數：表示操做類型的數值（1 表示複製，2 表示導入，3 表示刪除，4 表示重命名）、數據鍵、數據值、源節點和目標節點。在刪除節點時，源節點是 null；除在複製節點時，目標節點均爲 null

        //如下代碼能夠將數據指定給一個節點
document.body.setUserData("name", "Nicholas", function(){}); 
//而後，使用 getUserData()並傳入相同的鍵，就能夠取得該數據
var value = document.body.getUserData("name"); 
//在函數內部，你能夠決定如何存儲數據
var div = document.createElement("div");
div.setUserData("name", "Nicholas", function(operation, key, value, src, dest){
 if (operation == 1){
 dest.setUserData(key, value, function(){}); } 
});
var newDiv = div.cloneNode(true);
alert(newDiv.getUserData("name")); //"Nicholas"

    • 框架的變化

      • 框架和內嵌框架分別用 HTMLFrameElement 和 HTMLIFrameElement 表示，它們在 DOM2級中都有了一個新屬性，名叫 contentDocument：包含一個指針，指向表示框架內容的文檔對象

        var iframe = document.getElementById("myIframe");
var iframeDoc = iframe.contentDocument; //在 IE8 之前的版本中無效

      • IE8 以前不支持框架中的 contentDocument 屬性，但支持一個名叫 contentWindow 的屬性，該屬性返回框架的 window 對象，而這個 window 對象又有一個 document 屬性

        var iframe = document.getElementById("myIframe");
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

二、樣式

  • 概念：

    • 在 HTML 中定義樣式的方式有 3 種：經過<link/>元素包含外部樣式表文件、使用<style/>元素
      定義嵌入式樣式，以及使用 style 特性定義針對特定元素的樣式

    • 肯定瀏覽器是否支持 DOM2 級定義的 CSS 能力：

      var supportsDOM2CSS = document.implementation.hasFeature("CSS", "2.0");
var supportsDOM2CSS2 = document.implementation.hasFeature("CSS2", "2.0");

  • 訪問元素的樣式

    • 概念

      • 任何支持 style 特性的 HTML 元素在 JavaScript 中都有一個對應的 style 屬性；

      • 對於使用短劃線（分隔不一樣的詞彙，例如 background-image）的 CSS 屬性名，必須將其轉換成駝峯大小寫形式，才能經過 JavaScript 來訪問；

      • float 是 JavaScript 中的保留字，所以不能用做屬性名，應該轉爲cssFloat，IE支持的則是 styleFloat

      • 只要取得一個有效的 DOM 元素的引用，就能夠隨時使用 JavaScript 爲其設置樣式

        var myDiv = document.getElementById("myDiv");
//設置背景顏色
myDiv.style.backgroundColor = "red";
//改變大小
myDiv.style.width = "100px";
myDiv.style.height = "200px";
//指定邊框
myDiv.style.border = "1px solid black";

      • 經過 style 對象一樣能夠取得在 style 特性中指定的樣式

        //<div id="myDiv" style="background-color:blue;width:10px;height:25px"></div>
alert(myDiv.style.backgroundColor); //"blue"
alert(myDiv.style.width); //"10px"
alert(myDiv.style.height); //"25px"

      • 若是沒有爲元素設置 style 特性，那麼 style 對象中可能會包含一些默認的值，但這些值並不能準確地反映該元素的樣式信息

    • DOM 樣式屬性和方法

      • 「DOM2級樣式」規範還爲 style 對象定義了一些屬性和方法
        • cssText：如前所述，經過它可以訪問到 style 特性中的 CSS 代碼
        • length：應用給元素的 CSS 屬性的數量
        • parentRule：表示 CSS 信息的 CSSRule 對象。本節後面將討論 CSSRule 類型
        • getPropertyCSSValue(propertyName)：返回包含給定屬性值的 CSSValue 對象
        • getPropertyPriority(propertyName)：若是給定的屬性使用了!important 設置，則返回
          "important"；不然，返回空字符串。
        • getPropertyValue(propertyName)：返回給定屬性的字符串值
        • item(index)：返回給定位置的 CSS 屬性的名稱
        • removeProperty(propertyName)：從樣式中刪除給定屬性
        • setProperty(propertyName,value,priority)：將給定屬性設置爲相應的值，並加上優先權標誌（"important"或者一個空字符串）

    • 計算的樣式

      • getComputedStyle()方法：兩個參數，要取得計算樣式的元素和一個僞元素字符串（例如":after"）若是不須要僞元素信息，第二個參數能夠是 null。getComputedStyle()方法返回一個 CSSStyleDeclaration 對象（與 style 屬性的類型相同），其中包含當前元素的全部計算的樣式

        <!DOCTYPE html>
<html>
<head>
  <title>Computed Styles Example</title>
  <style type="text/css">
      #myDiv {
          background-color: blue;
          width: 100px;
          height: 200px;
      }
  </style>
</head>
<body>
  <div id="myDiv" style="background-color: red; border: 1px solid black">    </div>
    <script>
    var myDiv = document.getElementById("myDiv");
  var computedStyle = document.defaultView.getComputedStyle(myDiv, null);
  alert(computedStyle.backgroundColor); // "red"
  alert(computedStyle.width); // "100px"
  alert(computedStyle.height); // "200px"
  alert(computedStyle.border); // 在某些瀏覽器中是"1px solid black"
      </script>
</body>
</html>

      • 在 IE 中，每一個具備 style 屬性的元素還有一個 currentStyle 屬性。這個屬性是 CSSStyleDeclaration 的實例，包含當前元素所有計算後的樣式

        var myDiv = document.getElementById("myDiv");
var computedStyle = myDiv.currentStyle;
alert(computedStyle.backgroundColor); //"red"
alert(computedStyle.width); //"100px"
alert(computedStyle.height); //"200px"
alert(computedStyle.border); //undefined

  • 操做樣式表

    • 檢測瀏覽器是否支持 DOM2 級樣式表

      var supportsDOM2StyleSheets =
document.implementation.hasFeature("StyleSheets", "2.0");

    • CSSStyleSheet 繼承自 StyleSheet，後者能夠做爲一個基礎接口來定義非 CSS 樣式表。從StyleSheet 接口繼承而來的屬性以下：

      • disabled：表示樣式表是否被禁用的布爾值。這個屬性是可讀/寫的，將這個值設置爲 true 能夠禁用樣式表
      • href：若是樣式表是經過包含的，則是樣式表的 URL；不然，是 null
      • media：當前樣式表支持的全部媒體類型的集合。與全部 DOM 集合同樣，這個集合也有一個length 屬性和一個 item()方法。也可使用方括號語法取得集合中特定的項。若是集合是空列表，表示樣式表適用於全部媒體。在 IE 中，media 是一個反映<link>和<style>元素media特性值的字符串
      • ownerNode：指向擁有當前樣式表的節點的指針，樣式表多是在 HTML 中經過<link>或<style/>引入的（在 XML 中多是經過處理指令引入的）。若是當前樣式表是其餘樣式表經過
        @import 導入的，則這個屬性值爲 null。IE 不支持這個屬性
      • parentStyleSheet：在當前樣式表是經過@import 導入的狀況下，這個屬性是一個指向導入它的樣式表的指針
      • title：ownerNode 中 title 屬性的值
      • type：表示樣式表類型的字符串。對 CSS 樣式表而言，這個字符串是"type/css"
      • cssRules：樣式表中包含的樣式規則的集合。IE 不支持這個屬性，但有一個相似的 rules 屬性。
      • ownerRule：若是樣式表是經過@import 導入的，這個屬性就是一個指針，指向表示導入的規則；不然，值爲 null。IE 不支持這個屬性
      • deleteRule(index)：刪除 cssRules 集合中指定位置的規則。IE 不支持這個方法，但支持一個相似的 removeRule()方法
      • insertRule(rule,index)：向 cssRules 集合中指定的位置插入 rule 字符串。IE 不支持這個方法，但支持一個相似的 addRule()方法
  • 元素大小

    • 偏移量

      • offsetHeight：元素在垂直方向上佔用的空間大小，以像素計。包括元素的高度、（可見的）水平滾動條的高度、上邊框高度和下邊框高度
      • offsetWidth：元素在水平方向上佔用的空間大小，以像素計。包括元素的寬度、（可見的）垂直滾動條的寬度、左邊框寬度和右邊框寬度
      • offsetLeft：元素的左外邊框至包含元素的左內邊框之間的像素距離
      • offsetTop：元素的上外邊框至包含元素的上內邊框之間的像素距離
      //取得元素的左偏移量
function getElementLeft(element){
    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;
    while (current !== null){
        actualLeft += current.offsetLeft;
        current = current.offsetParent;
    }
    return actualLeft;
}
//取得元素的上偏移量
function getElementTop(element){
    var actualTop = element.offsetTop;
    var current = element.offsetParent;
    while (current !== null){
        actualTop += current. offsetTop;
        current = current.offsetParent;
    }
    return actualTop;
}

    • 客戶區大小

      • clientWidth 屬性是元素內容區寬度加上左右內邊距寬度
      • clientHeight 屬性是元素內容區高度加上上下內邊距高度
      • 客戶區大小就是元素內部的空間大小，所以滾動條佔用的空間不計算在內
      function getViewport(){
    if (document.compatMode == "BackCompat"){
        return {
            width: document.body.clientWidth,
            height: document.body.clientHeight
        };
        } else {
            return {
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight
            };
        }
}

    • 滾動大小

      • scrollHeight：在沒有滾動條的狀況下，元素內容的總高度

      • scrollWidth：在沒有滾動條的狀況下，元素內容的總寬度

      • scrollLeft：被隱藏在內容區域左側的像素數。經過設置這個屬性能夠改變元素的滾動位置

      • scrollTop：被隱藏在內容區域上方的像素數。經過設置這個屬性能夠改變元素的滾動位置

      • IE（在標準模式）中 scrollWidth 和 scrollHeight 等於文檔內容區域的大小，而 clientWidth 和 clientHeight 等於視口大小

      • 在肯定文檔的總高度時（包括基於視口的最小高度時），必須取得 scrollWidth/clientWidth 和
        scrollHeight/clientHeight 中的最大值，才能保證在跨瀏覽器的環境下獲得精確的結果

        var docHeight = Math.max(document.documentElement.scrollHeight,
 document.documentElement.clientHeight);
var docWidth = Math.max(document.documentElement.scrollWidth,
 document.documentElement.clientWidth);

      • 對於運行在混雜模式下的 IE，則須要用 document.body 代替 document.documentElement

      • 經過 scrollLeft 和 scrollTop 屬性既能夠肯定元素當前滾動的狀態，也能夠設置元素的滾動位
        置

        function scrollToTop(element){
  if (element.scrollTop != 0){
      element.scrollTop = 0;
  }
}

    • 肯定元素大小

      • 每一個元素都有一個 getBoundingClientRect()方法，返回會一個矩形對象，包含 4 個屬性：left、top、right 和 bottom

        function getBoundingClientRect(element){
    var scrollTop = document.documentElement.scrollTop;
  var scrollLeft = document.documentElement.scrollLeft;

    if (element.getBoundingClientRect){
        if (typeof arguments.callee.offset != "number"){
            var scrollTop = document.documentElement.scrollTop;
            var temp = document.createElement("div");
            temp.style.cssText = "position:absolute;left:0;top:0;";
            document.body.appendChild(temp);
            arguments.callee.offset = -temp.getBoundingClientRect().top -                 scrollTop;
            document.body.removeChild(temp);
            temp = null;
      }
      var rect = element.getBoundingClientRect();
      var offset = arguments.callee.offset;
      return {
          left: rect.left + offset,
          right: rect.right + offset,
          top: rect.top + offset,
          bottom: rect.bottom + offset
      };
    } else {
      var actualLeft = getElementLeft(element);
      var actualTop = getElementTop(element);
      return {
          left: actualLeft - scrollLeft,
          right: actualLeft + element.offsetWidth - scrollLeft,
          top: actualTop - scrollTop,
          bottom: actualTop + element.offsetHeight - scrollTop
      }
  } 
}

三、遍歷

  • 檢測瀏覽器對 DOM2 級遍歷能力的支持狀況

    var supportsTraversals = document.implementation.hasFeature("Traversal", "2.0");
var supportsNodeIterator = (typeof document.createNodeIterator == "function");
var supportsTreeWalker = (typeof document.createTreeWalker == "function");

  • NodeIterator

    • 可使用 document.createNodeIterator()方法建立它的新實例，這個方法接受下列 4 個參數

      • root：想要做爲搜索起點的樹中的節點
      • whatToShow：表示要訪問哪些節點的數字代碼
      • filter：是一個 NodeFilter 對象，或者一個表示應該接受仍是拒絕某種特定節點的函數
      • entityReferenceExpansion：布爾值，表示是否要擴展實體引用。這個參數在 HTML 頁面中沒有用，由於其中的實體引用不能擴展。

    • 舉例：

      var iterator = document.createNodeIterator(document, NodeFilter.SHOW_ALL,
 null, false);

    • 兩個主要方法是 nextNode()和 previousNode()，在深度優先的 DOM 子樹遍歷中，nextNode()方法用於向前前進一步，而 previousNode()用於向後後退一步。因爲 nextNode()和 previousNode()方法都基於 NodeIterator 在 DOM 結構中的內部指針工做，因此 DOM 結構的變化會反映在遍歷的結果中。

      <div id="div1">
    <p><b>Hello</b> world!</p>
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>
</div>
<script>
    var div = document.getElementById("div1");
    var iterator = document.createNodeIterator(div, NodeFilter.SHOW_ELEMENT,
        null, false);
    var node = iterator.nextNode();
    while (node !== null) {
        alert(node.tagName); //輸出標籤名
        node = iterator.nextNode();
    }
</script>

  • TreeWalker

    • 更高級的版本，除了包括 nextNode()和 previousNode()在內的相同的功能以外，這個類型還提供了下列用於在不一樣方向上遍歷 DOM 結構的方法
      • parentNode()：遍歷到當前節點的父節點
      • firstChild()：遍歷到當前節點的第一個子節點；
      • lastChild()：遍歷到當前節點的最後一個子節點
      • nextSibling()：遍歷到當前節點的下一個同輩節點
      • previousSibling()：遍歷到當前節點的上一個同輩節點

四、範圍（range）

  • DOM中的範圍

    • 建立範圍：使用createRange()方法

      //檢測瀏覽器是否支持範圍
var supportsRange = document.implementation.hasFeature("Range", "2.0");
var alsoSupportsRange = (typeof document.createRange == "function");
//建立
var range = document.createRange();
    • Range 類型的實例的屬性，在把範圍放到文檔中特定的位置時，這些屬性都會被賦值
      • startContainer：包含範圍起點的節點（即選區中第一個節點的父節點）
      • startOffset：範圍在 startContainer 中起點的偏移量。若是 startContainer 是文本節點、註釋節點或 CDATA 節點，那麼 startOffset 就是範圍起點以前跳過的字符數量。不然，startOffset 就是範圍中第一個子節點的索引
      • endContainer：包含範圍終點的節點（即選區中最後一個節點的父節點）
      • endOffset：範圍在 endContainer 中終點的偏移量（與 startOffset 遵循相同的取值規則）
      • commonAncestorContainer：startContainer 和 endContainer 共同的祖先節點在文檔樹中位置最深的那個
    • Range類型的實例的方法：
      • 用 DOM 範圍實現簡單選擇：使用 selectNode()或 selectNodeContents()
      • 用 DOM 範圍實現複雜選擇：使用 setStart()和 setEnd()方法
      • 操做 DOM 範圍中的內容：夠從文檔中刪除範圍所包含的內容使用deleteContents()；從文檔中移除範圍選區使用extractContents()方法；使用 cloneContents()建立範圍對象的一個副本，而後在文檔的其餘地方插入該副本
      • 插入 DOM 範圍中的內容：使用 insertNode()方法
      • 摺疊 DOM 範圍：使用 collapse()方法
      • 比較 DOM 範圍：使用 compareBoundaryPoints()方法
      • 複製 DOM 範圍：使用 cloneRange()方法
      • 清理 DOM 範圍：調用 detach()方法
  • IE8 及更早版本中的範圍
    • 用 IE 範圍實現簡單的選擇：使用範圍的 findText()方法找到第一次出現的給定文本，並將範圍移過來以環繞該文本；IE 中與 DOM 中的 selectNode()方法最接近的方法是 moveToElementText()，這個方法接受一個 DOM 元素，並選擇該元素的全部文本，包括 HTML 標籤
    • 使用 IE 範圍實現複雜的選擇：以特定的增量向四周移動範圍。爲此，IE 提供了 4 個方法，move()、moveStart()、moveEnd()和 expand()
    • 操做 IE 範圍中的內容：使用 text 屬性或 pasteHTML()方法
    • 摺疊 IE 範圍：collapse()方法
    • 比較 IE 範圍：compareEndPoints()方法
    • 複製 IE 範圍：duplicate()方法

五、總結

​ DOM2 級規範定義了一些模塊，用於加強 DOM1 級。「DOM2 級核心」爲不一樣的 DOM 類型引入了一些與 XML 命名空間有關的方法。這些變化只在使用 XML 或 XHTML 文檔時纔有用；對於 HTML 文檔沒有實際意義。除了與 XML 命名空間有關的方法外，「DOM2 級核心」還定義了以編程方式建立Document 實例的方法，也支持了建立 DocumentType 對象。

​ 「DOM2 級樣式」模塊主要針對操做元素的樣式信息而開發，其特性簡要總結以下：

  • 每一個元素都有一個關聯的 style 對象，能夠用來肯定和修改行內的樣式。

  • 要肯定某個元素的計算樣式（包括應用給它的全部 CSS 規則），可使用 getComputedStyle()方法

  • IE不支持 getComputedStyle()方法，但爲全部元素都提供了可以返回相同信息 currentStyle屬性

  • 能夠經過 document.styleSheets 集合訪問樣式表

  • 除 IE 以外的全部瀏覽器都支持針對樣式表的這個接口，IE 也爲幾乎全部相應的 DOM 功能提供了本身的一套屬性和方法。

    「DOM2 級遍歷和範圍」模塊提供了與 DOM 結構交互的不一樣方式，簡要總結以下：

  • 遍歷即便用 NodeIterator 或 TreeWalker 對 DOM 執行深度優先的遍歷

  • NodeIterator 是一個簡單的接口，只容許以一個節點的步幅先後移動。而 TreeWalker 在提供相同功能的同時，還支持在 DOM 結構的各個方向上移動，包括父節點、同輩節點和子節點等方向

  • 範圍是選擇 DOM 結構中特定部分，而後再執行相應操做的一種手段

  • 使用範圍選區能夠在刪除文檔中某些部分的同時，保持文檔結構的格式良好，或者複製文檔中的相應部分

  • IE8 及更早版本不支持「DOM2 級遍歷和範圍」模塊，但它提供了一個專有的文本範圍對象，能夠用來完成簡單的基於文本的範圍操做。IE9 徹底支持 DOM 遍歷

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程