JavaScript DOM對象

HTML DOM Document 對象（DOM，Document Object Model，文檔對象模型）

參考：http://www.w3school.com.cn/jsref/dom_obj_document.asp

　　   https://developer.mozilla.org/zh-CN/docs/Glossary/DOM

DOM 是載入到瀏覽器中的文檔模型，它用節點樹的形式來表現文檔，每一個節點表明文檔的構成部分（例如： element——頁面元素、字符串或註釋等等）。

DOM 是Web——萬維網上使用最爲普遍的API之一，由於它容許運行在瀏覽器中的代碼訪問文件中的節點並與之交互。節點能夠被建立，移動或修改。事件監聽器能夠被添加到節點上並在給定事件發生時觸發。

和window對象的關係     

window.document    

window.document.body

 

window 瀏覽器窗口 document   把整個網頁看作一個對象 ，經過操做整個對象，來控制改變網頁的內容，document.write();

 

 

DOM 對象經常使用方法：

方法	描述
getElementById()	返回帶有指定 ID 的元素。
getElementsByTagName()	返回包含帶有指定標籤名稱的全部元素的節點列表（集合/節點數組）。
getElementsByClassName()	返回包含帶有指定類名的全部元素的節點列表。
appendChild()	把新的子節點添加到指定節點。
removeChild()	刪除子節點。
replaceChild()	替換子節點。
insertBefore()	在指定的子節點前面插入新的子節點。
createAttribute()	建立屬性節點。
createElement()	建立元素節點。
createTextNode()	建立文本節點。
getAttribute()	返回指定的屬性值。
setAttribute()	把指定屬性設置或修改成指定的值。

查詢(得到Dom節點)---------
document.getElementById()    //經過ID號查找元素
document.getElementsByTagName()    //經過標籤名稱查找元素
document.getElementsByName()      //經過name屬性來查找元素
document.querySelectorAll // 返回與指定的選擇器組匹配的文檔中的元素列表 (使用深度優先的先序遍歷文檔的節點)
document.querySelector //返回文檔中與指定選擇器或選擇器組匹配的第一個 html元素Element。 若是找不到匹配項，則返回。


IE8如下 不支持如下方法，
document.getElementsByClassName()   //經過class屬性來查找元素、設置某元素的class時：某元素.className="active"
document.querySelector(selector)  //selector是一個字符串，包含一個或是多個 CSS 選擇器 ，多個則以逗號分隔。 
document.querySelectorAll()null

除getElementById()，其餘的獲取方法獲得的都是僞數組（具備數組的一些特性，如：length屬性，有索引值1.2.3...，但不能使用數組的方法），將僞數組轉爲數組：

http://www.cnblogs.com/fanlinqiang/p/7741236.html

getElementsByClassName()兼容性處理以下：

增長節點

document.createElement()  // 建立一個DOM元素        (document.createTextNode();//插入內容中的標籤不會被解析)
_parentNode.appendChild(target)   // 將target元素追加到box元素的內部，此時瀏覽器才能正確加載並顯示元素
_parentNode.insertBefore(newnode, oldnode)   //將newnode元素插入到parent元素的內部，同時放在oldnode元素的前面 
_node.cloneNode(deep)//克隆一個節點，deep設置爲 true，若是您須要克隆節點及其屬性，以及後代；設置爲 false，若是您只須要克隆節點及其後代

刪除節點

_parentNode.removeChild(child)    // 將child元素刪除，parent是child元素的父親
_node.remove(); // 非w3c標準，但大部分瀏覽器都支持

更改節點

_node.style.background = 'red'   
_node.style.backgroundColor = 'red'
_node.style.cssFloat = 'left'

 獲取屬性及自定義屬性

獲取一個自定義屬性的值（在IE8中可box.index直接取）
box.getAttribute("index")
// 修改
box.index = 99;
box.setAttribute("index",99) //會在html中生成屬性index

 tips:在js中 直接定義box.index=i   box.index   存取index值，但不會在html標籤中生成index屬性

在html5中提供了爲dom元素提供了dataSet屬性，能夠輕鬆得到綁定在dom元素中data-*的屬性值，如：

<img id="test" src="" data-url='http://www.cnblogs.com/fanlinqiang/icon' />

....
var img = document.getElementById('test')
img.setAttribute('src',img.dataset.url)

 若非行內樣式 doc.style.height  爲空,此時對於非行內樣式的操做（可修改不可讀取） ,獲取非行間樣式兼容性操做，以下：

function getStyle(obj, attr) {
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr]; // 火狐
}

節點類型

比較重要的節點類型有：

元素類型	NodeType
元素	1
屬性	2
文本	3
註釋	8
文檔	9

 

高級操做

parentNode   //獲取父節點
childNodes    //獲取全部子節點  IE7及如下自動過濾文本節點
children   //獲取全部子標籤(非W3C標準，但幾乎全部瀏覽器都支持)

previousSibling  //前一個兄弟節點
nextSibling        //後一個兄弟節點
previousElementSibling    // 前一個兄弟元素（非W3C標準）
nextElementSibling          // 後一個兄弟元素（非W3C標準）

如何忽略空白節點？  

function getElementChildren(obj){
     var list = obj.childNodes;
      var res = [];
     for(var i=0; i<list.length; i++){
          if(list[i].nodeType == 1 ){
               res.push(list[i]);     
          }
     }
      return res;
}

 高級操做----位置、大小計算

offsetWidth  (（content+padding+border）)    // clientWidth (padding+width-滾動條）     //計算元素的可視寬度
offsetHeight （只讀）// clientHeight     計算元素的可視高度

innerWidth  //內部可視寬度        
innerHeight // 在Google中 window.innerWidth=window.clientWidth，在火狐中window.clientWidth包括右邊滾動條

ele.offsetLeft     //計算元素相對於參照物的位置(有定位的父元素) offsetLeft = left + marginLeft
ele.offsetTop     //計算元素相對於參照物的位置(有定位的父元素)

//獲取參照物父元素
offsetParent       獲取參照物父元素，獲取有定位的父元素

獲取頁面元素相對於窗口的絕對位置：   

function offsetPage(obj){
    var _left=0;
    var _top=0;
    while(obj){
        _left+=obj.offsetWidth;
        _top+=obj.offsetHeight;
        obj=obj.offsetParent;
    }
    return {"left":_left,"top":_top};
}

 獲取某個子節點相對於父元素的位置

function offsetParent (parentNode, currentNode) {
        let left = 0;
        let top = 0;
        while (currentNode) {
            left += currentNode.offsetWidth;
            top += currentNode.offsetHeight;
            if (currentNode === parentNode) {
                break;
            }
            currentNode = currentNode.offsetParent;
        }
        return {left, top};
    }

element.scrollIntoView( [Boolean | Options]); //讓當前的元素滾動到瀏覽器窗口的可視區域內。https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

Boolean型參數 :若是爲true，元素的頂端將和其所在滾動區的可視區域的頂端對齊。若是爲false，元素的底端將和其所在滾動區的可視區域的底端對齊。

Options型參數：

{
    behavior: "auto"  | "instant" | "smooth", // 定義動畫,默認爲 "auto"。
    block:    "start" | "center" | "end" | "nearest", // 與可視區域對齊的方式，默認爲 "center"。
    inline: "start" | "center" | "end" | "nearest", // 默認爲 "nearest"。
} 

 

innerHTML  和  innerText  區別？

box.innerHTML(".......")插入的標籤會被瀏覽器編譯       box.innerText(".........")插入的僅是文本，標籤不會被瀏覽器解析

文本節點

 var txt = document.createTextNode("nihao");

document.body.appendChild(txt);

文檔碎片

（與計算機的緩存的概念相似，減小IO次數，保護硬盤，每次使用dom操做時會使整個頁面產生熱reflow、repain,其中的開銷是極大的）

 document.createDocumentFragment()

文檔碎片測試

var t1 = new Date().getTime();
for(var i=0; i<10000; i++) {
    var oP = document.createElement("p")
    oP.innerHTML = "a";
    document.body.appendChild(oP);
}
var t2 = new Date().getTime();
console.log(t2-t1);
 
var t3 = new Date().getTime();
var frag = document.createDocumentFragment();
for(var i=0; i<10000; i++) {
    var oP = document.createElement("p")
    oP.innerHTML = "a";
    frag.appendChild(oP); //appendChild 是個異步方法
}
document.body.appendChild(frag);
var t4 = new Date().getTime();
console.log(t4-t3);