【javascript】dom學習筆記

 

 

Dom是文檔對象模型

DOM 可被 JavaScript 用來讀取、改變 HTML、XHTML 以及 XML 文檔。

DOM 被分為不同的部分（核心、XML及HTML）和級別（DOM Level 1/2/3）：

Core DOM 定義了一套標准的針對任何結構化文檔的對象

XML DOM定義了一套標准的針對 XML 文檔的對象

HTML DOM定義了一套標准的針對 HTML 文檔的對象。

 

 DOM 是這樣規定的：

    整個文檔是一個文檔節點 　　

    每個 HTML 標簽是一個元素節點 　　

    包含在 HTML 元素中的文本是文本節點 　　

    每一個 HTML 屬性是一個屬性節點 　　

    注釋屬於注釋節點

 

 

 

在DOM中，HTML文檔的層次結構被表示為一個樹形結構。樹的根節點是一個表示當前HTML文檔的document對象，樹的每個子節點表示HTML文檔中的不同內容。

當瀏覽器解析完某文檔文件后，每個節點並非就是一個簡單的Element對象的實例，而是繼承了很多東西的Element對象的擴展。

 

每個Element對象都擴展自Node對象。即使是document對象和documentElement對象也是如此，只不過他們有自己獨特的屬性和方法。Node對象的屬性中包括一些用於識別的特征，例如nodeName、nodeValue、nodeType、parentNode、childNodes、firstChild、lastChild、previousSibling、nextSibling、attributes和ownerDocument。這些屬性對於擴展自Node對象的所有DOM對象都是有效的。

===============================================

常用：

Node對象

名稱 nodeName值 nodeValue 類型 nodeType

parentNode    childNodes      previousSibling   nextSibling   firstChild   lastChild

attributes屬性    hasChildNodes()     hasAttributes()

appendChild()    insertBefore()     

 

Element對象

getAttribute()   setAttribute()   removeAttribute()

getElementsByTagName()

 

Document對象

Document.documentElement

createAttribute()    createElement()   createTextNode() 

====================================================

節點的類型和組成

接口	nodeType值	說明
Element	1	元素
Attr	2	屬性
Text	3	文本
Comment	8	注釋
Document	9	文檔
DocumentFragment	11	文檔片段

 

 

節點的引用

document.getElementById( 元素的id值 )  獲取對元素節點的引用

document.getElementsByName(元素的name屬性)  根據name屬性引用節點獲取一個元素的集合

document.getElementsByTagName( 元素的標簽名)  根據標簽引用節點獲取一個元素的集合

 

        引用父節點

 

var son=document.getElementById("son");   //獲取id為son的元素節點

alert(son.parentNode.id);      //彈出id為son節點的父節點的id值

        引用其直屬子節點

var father=document.getElementById("father");

alert(father.firstChild.id);   //彈出id為father節點的第一個子節點的id值

alert(father.lastChild.id);    //彈出id為father節點的最后一個子節點的id值

alert(father.childNodes.length); //通過father.childNodes，可以獲得所有節點的集合 .length獲取長度

 

        引用相鄰的節點

var son=document.getElementById("son");

alert(son.previousSibling.id);    //上一個兄弟節點

alert(son.nextSibling.id);    //下一個兄弟節點

 

節點的操作

        創建元素節點

 document.createElement("div");

 

        創建文本節點

 document.createTextNode("文本內容");

 

        添加節點

       

var newDiv=document.createElement("div");  //創建一個div元素節點

newDiv.innerHTML="新的div";                          //其包含的值為 “新的div”

document.body.appendChild(newDiv);      //  把它添加到body最后一個節點上

　　　　Node對象提供了insertBefore將新節點插入到指定元素的前面

　　　　　　parentNode. insertBefore(newNode,childNode);

　　　　　　parentNode   父節點  newNode      新節點　　childNode     插入到該節點的前面

　　　　Node對象提供了replaceChild方法來使用一個新的節點替換一個子節點

　　　　　　parentNode. replaceChild(newNode,childNode);

　　　　　　parentNode   父節點　　newNode      新節點　　childNode     要替換的節點

　　　　Node對象提供了cloneNode方法來得到Node對象的一個副本。

　　　　　　cloneNode方法接受一個布爾值參數，來標識返回的節點副本中是否包含原節點的子節點。

 

var son=document.getElementById("son");

var cloneDiv=son.cloneNode(false);  //當參數為false，表示不復制子節點，否則復制子節點。

cloneDiv.innerHTML="克隆son節點";

father.appendChild(cloneDiv);
 

 

　　　　Node對象提供了removeChild方法來刪除一個子節點。

　　　　　　cloneNode方法接受一個對象參數，該參數指示所要刪除的子節點。

 

 

        添加和修改節點屬性

var a=document.getElementById("a");

a.setAttribute("href","www.baidu.com");   //設置屬性

alert( a.getAttribute("id") )   ;    //彈出獲取的屬性

a.removeAttribute("href");  //刪除屬性

 

 

 

控制元素的樣式

　　獲取和設置元素的CSS類

/*CSS代碼：*/
 .color{
    color:red;
}

 

       

var a=document.getElementById("a");

a.className="color";

//修改了a的屬性class,使得a元素應用了color這個樣式，結果該元素顏色變成紅色。

 

　　獲取和設置元素的CSS類樣式

var a=document.getElementById("a");

a.style.color="color";

//設置了a的屬性style中的color, 結果該元素顏色變成紅色。

//同理，我們可以設置元素style中的任何屬性。

 

===========================================

 

事件

　　事件

　　　　JavaScript腳本中的事件是指從用戶載入目標頁面直到該頁面被關閉期間瀏覽器的動作，以及用戶對頁面的操作。

　　　　不僅包括用戶的頁面動作，也包括瀏覽器狀態的改變。

　　事件處理程序

　　　　當事件發生時執行的程序，也叫事件處理器。

 

　　事件處理程序的調用方法：

       

//一：直接將事件處理程序作為節點的屬性值

<input type="button" onclick="test() ">   //為input添加一個事件句柄 onclick代表點擊 綁定了一個test方法   當點擊input按鈕的時候執行test方法

//二：設置對象屬性的方法調用事件處理程序（實現結構和行為的分離）

//1、命名函數

document.getElementById(“test”).onclick=pp; //為test節點綁定調用pp方法的點擊事件

//2、匿名函數

document. getElementById(“test”).onclick=function(){

}

//三：注冊事件的方法（后面）

 

　　主流瀏覽器所使用的事件模型：

　　　　IE事件模型：由IE瀏覽器使用

　　　　標准事件模型：由W3C制訂，由Netscape等瀏覽器實現

　　　　　　二者的差異：事件的傳播機制

　　　　　　IE——只支持起泡形式的事件傳播

　　　　　　NN——分三階段，第一階段是捕捉階段，第二階段發生在目標節點上，第三階段為起泡階段。

　　

　　注冊事件：

　　　　標准事件模型addEventListener調用事件處理函數

　　　　　　obj.addEventListener(eventName,eventHandler,useCapture);

　　　　　　obj為目標節點對象，eventName為事件名稱，如“click”“mouseover”“keydown”等，eventHandler是事件處理函數，在指定的事件發生時調用該函　　　　　　數，useCapture是一個布爾值，為true或false

　　　　　　例如：

document.getElementById("btn").addEventListener("click",pp,false);

 

　　　　IE事件模型attachEvent調用事件處理函數

　　　　　　obj. attachEvent(“on”+eventName,eventHandler);

　　　　　　obj為目標節點對象，eventName為事件名稱，如“click”“mouseover”“keydown”等，eventHandler是事件處理函數.

　　　　　　例如：

document.getElementById("btn"). attachEvent ("onclick",pp);

 

 

　　注銷事件：

　　　　標准 　　removeEventListener

　　　　Ie　　　　detachEvent

　　　 參數說明同上

 

 

 

　　Event對象

　　　　event對象是事件和事件處理程序的橋梁，它能將事件發生的快照內容，如事件發生的位置、觸發的按鍵等保存到window對象的event屬性中，傳遞給事件　　　　處理程序。

document.getElementById(" btn ").onclick= function(e){

                     var e=e||window.event;    //兼容瀏覽器

          }
//當btn點擊的時候調用方法傳進的參數就是一個event對象（e）。可以直接獲取或者通過window.event獲取 

 

 

　　event對象的常見屬性

屬性/方法名 （IE事件模型）	屬性/方法名 (標准事件模型)	簡要說明
altkey、ctrlkey、shiftkey	altkey、ctrlkey、shiftkey	設置為true或者false，表示事件發生時是否按下Alt、Ctrl、Shift鍵
button	button	發生事件事鼠標所按下的鍵（0表示無，1表示左鍵，2表示右鍵，4表示中鍵）
keyCode	keyCode	表示所按鍵的Unicode鍵盤內碼
srcElement	target	表示發生事件的對象
preventDefault()	returnValue	阻止瀏覽器執行與事件相關的默認動作
type	type	指明發生事件的類型
x，y	x，y	光標相對於事件所在文檔的水平和垂直距離（像素）
screenX，screenY	screenX，screenY	相對於屏幕的水平和垂直距離（像素）

 

 

 

 

封裝的一個兼容瀏覽器的事件對象

var eventUtil = {　　
　　 getEvent: function(e) {　　　　
        return e || window.event;
    },
    getTarget: function(e) {　　
        return e.srcElement || e.target;
    },
    stopEvent: function(e) {　　
　　 　　e.returnValue && (e.returnValue = false, e.cancelBubble = false);
        e.preventDefault && (e.preventDefault(), e.stopPropagation());
    },
    addEvent: function(elem, evType, fn, capture) {
        var indicator = arguments.callee;
        elem.attachEvent && (indicator = function(elem, evType, fn) {
            elem.attachEvent('on' + evType, fn)
        }).apply(this, arguments);
        elem.addEventListener && (indicator = function(elem, evType, fn, capture) {
            elem.addEventListener(evType, fn, capture || false);
        }).apply(this, arguments);
        elem['on' + evType] && (indicator = function(elem, evType, fn) {
            elem['on' + evType] = function() {
                fn();
            };
        }).apply(this, arguments);
    },
    removeEvent: function(elem, evType, fn, capture) {
        var indicator = arguments.callee;
        elem.detachEvent && (indicator = function(elem, evType, fn) {
            elem.detachEvent('on' + evType, fn)
        }).apply(this, arguments)
         elem.removeEventListener && (indicator = function(elem, evType, fn, capture) {
            elem.removeEventListener(evType, fn, capture || false);
        }).apply(this, arguments);
        elem['on' + evType] && (indicator = function(elem, evType, fn) {
            elem['on' + evType] = null;
        }).apply(this, arguments);
    }
}