javascript快速入門14--DOM基礎 · 李炎恢 HTML CSS JavaScript PHP Bootstrap 教程

# javascript快速入門14--DOM基礎 ## DOM(Document Object Model)——文檔對象模型 ### 什么是DOM？ Document Object Model (DOM)是HTML和XML文檔的編程接口。它提供了上述文檔的一種結構化表示，同時也定義了一種通過程序來改變文檔結構，風格，以及內容的方式。DOM用一組結構化的節點以及對象來表示文檔。本質上就是將網頁和腳本語言以及編程語言連接起來。一個網頁是一個文檔。這個文檔可以被顯示在瀏覽器窗口中，也可以以html源碼的形式顯示。這兩中情況中，文檔都是同一個。DOM提供了另一種方式來表示，存儲，操作這個文檔。DOM是網頁的一種完全的面向對象的表示方法，可以通過腳本語言（比如說JavaScript）來改變。 W3C DOM標準形成了當今大多數瀏覽器的DOM基礎。許多瀏覽器提供超出W3C標準的擴展，所以當用在可能被擁有不同DOM的各種瀏覽器使用的場合時一定要多加注意 DOM標準主要要為：微軟DOM與W3C DOM，一般IE實現的是微軟DOM，而其它瀏覽器則不同程度的實際了W3C DOM DOM發展史 * DOM Level Zero ,事實上從來不存在DOM 0版本，只是人們的戲稱。只是在W3C DOM出現之前，不同瀏覽器（主要是IE與NN）實現的DOM相互排斥，1996年的瀏覽器大戰所產生的DHTML就是所謂的DOM 0，它是腳本程序員的惡夢 * DOM Level 1 包括DOM Core和DOM HTML。前者提供了基于XML的文檔結構圖。后者添加了一些HTML專用的對象和方法，從而擴展了DOM Core.目前IE在內的大部分桌面瀏覽器都通過不同方式實現了DOM 1 * DOM Level 2 引入幾個新模塊：DOM視圖，事件，樣式，遍歷和范圍。IE只實現了一部分，火狐瀏覽器幾乎全部實現，除IE之外的瀏覽器也實現了大部分 * DOM Level 3 引入了以統一的方式載入和保存文檔的方法。DOM Core被擴展支持所有的XML1.0的特性。火狐瀏覽器之類實現了少部分在開始階段，JavaScript和DOM是緊密的聯系在一起的，但是最終他們將發展為獨立的實體。網頁的內容存儲在DOM中并且可以被JavaScript訪問和處理，所以我們可以得到寫下這個近似的等式： API（網頁或者XML頁面）＝DOM ＋ JS（腳本語言） DOM被設計為獨立于任何特定的編程語言，通過協調一致的API以確保這種文檔的結構化表現形式是有效的。雖然DOM的實現可以建立在任何語言上，但是在這里我們專注于JavaScript上的DOM實現! 盡管DOM很大程度上受到瀏覽器中動態HTML發展的影響，但W3C還是將它最先應用于XML。 ## DOM與BOM的關系 DOM與BOM的關系？——BOM包含DOM DOM與BOM結構視圖 ![](https://box.kancloud.cn/2016-05-17_573b0674902e3.png) ## DOM Core 文檔對象模型-DOM,就是使用樹視圖來形容HTML代碼,看下面的一張HTML頁面的源代碼 ``` <html> <head> <title>樹!樹!到處都是樹!</title> </head> <body> <h1>樹!樹!到處都是樹!</h1> <p>HTML那層層嵌套的代碼就像一棵<em>樹</em>一樣!</p> <div>一層一層的樹<img src="../images/stach_heap.gif" /> </div> </body> </html> ``` 瀏覽器接受該頁面并將之轉換為樹形結構 ![](https://box.kancloud.cn/2016-05-17_573b0674a297b.png) ### 獲取元素常用方法 document對象是BOM的一部分，同時也是HTML DOM的HTMLDocument對象的一種表現形式，反過來說，它也是XML DOM Document對象。JavaScript中的大部分處理DOM的過程都利用document對象，所以我們訪問文檔需要使用BOM提供的這個入口。 ``` var d = document; alert(d);//這僅僅表明document這個對象是存在的 ``` document對象有三個強大的方法，可以獲取頁面的任何元素 ``` var p1 = document.getElementById("p1");//獲取ID為p1的那個元素 //在一個文檔中ID必須是唯一的，getElementById方法只會返回一個元素 alert(p1.tagName); var allP = document.getElementsByTagName("p");//獲取文檔中所有p標簽 //因為頁面中標簽相同的元素很多,所以即使頁面中只有一個p元素,getElementsByTagName也會返回一個集合 for (var i=0;i < allP.length;i++) { alert(allP[i].innerHTML);//像數組一樣訪問其中的每個元素 } //getElementsByTagName還可以使用通配符*來獲取所有的元素 var allTags = document.getElementsByTagName("*"); alert(allTags.length); //更強大的是，getElementsByTagName不但可以在document對象上調用，也可以在其它HTML元素上調用 var p2 = document.getElementById("p2"); var p2ps = p2.getElementsByTagName("em");//將獲取p2下面的em元素，而不獲取p2之外的em //還有一個通過name來獲取元素的方法:getElementsByName var radios = document.getElementsByName("check");//獲取所有name為check的元素 ``` **由于name可以重復，getElementsByName方法始終返回一個集合，不管頁面中name是否是唯一的。 IE 6.0和Opera 7.5在這個方法的使用上還存在一些錯誤。首先，它們還會返回id等于給定名稱的元素。第二，它們僅僅檢查<input/>和<img/>元素。** 獲取和設置元素屬性——getAttribute與setAttribute方法 ``` var p1 = document.getElementById("p1"); alert(p1.getAttribute("id")); p1.setAttribute("title","Value"); ``` ### 節點基礎文檔根節點 ``` var de = document.documentElement; alert(de.tagName); ``` **由于IE 5.5中的DOM實現的錯誤，document.documentElement會返回<body/>元素。IE 6.0已經修復了這個錯誤。** 獲取head與body ``` //本來可以使用getElementsByTagName的 var head = document.getElementsByTagName("head")[0]; var body = document.getElementsByTagName("body")[0]; ``` 還可以使用節點,在使用節點前，先了解一些節點基礎知識常用節點類型 * 元素節點——文檔中具有標簽的節點 * 文本節點——標簽中不是注釋的文本塊常用的節點屬性 * nodeType——節點類型，元素節點是1，文本節點是3 * nodeValue——節點值，元素節點為空，文本節點的nodeValue屬性即為文本內容 * firstChild——該元素節點包含的第一個子節點 * lastChild——該元素節點包含的最后一個子節點 * nextSibling——該節點的后一個兄弟節點 * previousSibling——該節點的前一個兄弟節點 * childNodes——子節點列表,可以通過node.childNodes[index]（或node.childNodes.item(index)）來獲取子節點 * nodeName——節點名稱，對于元素節點，返回tagName,對于文本，則返回#text 考慮下面的HTML代碼所表示的節點結構 ``` <p> Some Text </p> ``` 上面的HTML代碼將會解析成兩個節點:元素節點——p標簽，文本節點——Some Text.也就是說，標簽中包含的一些文本也是節點，那么空格之類的非打印字符會不會被當作文本節點呢？ **不同瀏覽器在判斷何為Text節點上存在一些差異。某些瀏覽器，如Mozilla，認為元素之間的空白(包括換行符)都是Text節點；而另一些瀏覽器，如IE，會全部忽略這些空白!!** ``` var de = document.documentElement; var head = de.firstChild;//html下面第一個元素，可能是head var body = de.lastChild;//html下面最后一個元素，可能是body ``` 答案并不確定，但是仍然有辦法解決——使用節點類型檢測,每個節點都有nodeType屬性，指明它的節點類型。對于元素節點，它的值是1，而對于文本節點，它的值是3 ``` var de = document.documentElement; var head = de.firstChild.nodeType==1?de.firstChild:de.firstChild.nextSibling; var body = de.lastChild.nodeType==1?de.lastChild:de.lastChild.previousSibling;] //還可以使用childNodes var de = document.documentElement; var head = de.childNodes[0].nodeType==1?de.childNodes[0]:de.childNodes[0].nextSibling; var head = de.childNodes[1].nodeType==1?de.childNodes[1]:de.childNodes[1].previousSibling; ``` ## HTML DOM HTML DOM用對象來表示HTML標簽,考慮下面的代碼—— ``` <img src="../images/stack_heap.jpg" alt="內存堆棧" onclick="alert('Hello!')" /> //對于上面的img標簽，瀏覽器解析時會將其轉換成下面的對象 { src:"../images/stack_heap.jpg", alt:"內存堆棧", onclick:"alert('Hello!')", tagName:"IMG" }; //其實不止這些屬性 ``` 一般所說的DOM是指XML DOM，而W3C也為HTML頁面提供了更快捷的DOM——HTML DOM!使用HTML DOM，能使訪問HTML標簽的屬性就像訪問JavaScript創建的對象的屬性一樣簡單. ``` var imgObj = document.getElementById("imgObj"); alert(imgObj.src);//獲取src屬性如此簡單 ``` 使用HTML DOM也使得訪問頁面一些元素變得更加簡單 ``` var bodyTag = document.documentElement.lastChild;//DOM標準方式 bodyTag = document.body;//HTML DOM方式 var titleTag = document.getElementsByTagName("title")[0].firstChild.nodeValue;//DOM標準方式 titleTag = document.title;//HTML DOM方式 //HTML DOM不僅僅可以用來獲取內容，也可以設置 document.title ="Change The Title!!!"; ```