DOM系統學習-進階

DOM類型

    Node類型：

        經常使用類型：

    ​    ​    ​元素節點 ELEMENT_NODE

    ​    ​    ​屬性節點 ATTRIBUTE_NODE

    ​    ​    ​文本節點 TEXT_NODE

        IE不支持節點類型常量名、兼容方案：

1 2 3 4 5 6

if  ( typeof  Node ==  'undefined' ) {  //IE 返回      window.Node = {          ELEMENT_NODE : 1,          TEXT_NODE : 3      }; }

    Document類型：

        獲取元素

            document.documentElement

            document.doctype

            document.body

        屬性

            document.title

            document.URL

            document.domian

            document.referrer

        對象集合

            document.forms

            document.images

            document.anchors 獲取帶name的a元素

            document.links 獲取帶href的a元素

    Text類型：

        同時建立兩個同級別的文本節點，會產生分離的兩個節點

        文本節點合併 box.normalize();

        文本節點分割 box.firstChild.splitText(3);

        其餘方法

            deleteData(offset,count) 刪除文本數據

            insertData(offset,str) 插入文本數據

            replaceData(offset,count,str) 替換文本數據

            substringData(offset,count) 截取文本數據

DOM擴展

    呈現模式：

        標準模式8 CSS1Compat

            判斷爲標準模式 document.documentMode > 7

        仿真模式7

        混雜模式5 BackCompat

    滾動：

        設置指定可見 

1	ele.scrollIntoView();

    children屬性：

        獲取子元素節點（去除空白節點）

    contains()：

        父元素是否包含子元素

DOM操做內容

    innerText：

        獲取元素內的文本內容，html會過濾

        設置元素內的文本內容，hmtl會轉義

        firefox除外都支持，firefox兼容方法textContent

1 2 3 4 5 6 7 8 9 10 11 12 13 14

function  getInnerText(element) {      if  ( typeof  element.textContent ==  'string' ) {          return  element.textContent;      }  else  {          return  element.innerText;      } } function  setInnerText(element, text) {      if  ( typeof  element.textContent ==  'string' ) {          element.textContent = text;      }  else  {          element.innerText = text;      } }

    innerHTML：

        獲取元素內的內容，html不過濾

    ​    ​設置元素內的內容，hmtl會解析，script,style不會解析

    outerText：

        和innerText同樣，包括自身，不支持firefox

    outerHTML：

        和innerHTML同樣，包括自身