四個非常適用的DOM方法:getElementById, getElementByTagName, getAttribute和setAttribute
比較有用的方法:
1、建立一個dom元素,參數為標籤名——document.createElement("tagName")
2、把一個元素添加到某個元素下面——parentElement.appendChild(childElement)
3、獲得父元素——childElement.parentNode
4、獲得第一個子項目——parentElement.firstChild
5、獲得所有的標籤為tag的子項目——parentElement.getElementsByTagName("tag")
6、還有就是大家熟悉的document.getElementById("xid")和document.getElementsByName("yname")
文檔:DOM中的”D”
DOM是”Document Object Model”(文件物件模型)的首字母所寫。如果沒有document(文檔),DOM也無從談起。
對象: DOM中的”O”
“對象”是一種獨立的資料集合。與某個特定對象相關聯的變數被稱為這個對象的屬性;可以通過某個特定的對象去調用的函數被稱為這個對象的方法。
JS裡,對象分為三種類型:
使用者定義對象: 程式員自己建立的對象。
內建對象: 內建在JS語言裡的丟向,如Array,Math
宿主對象:瀏覽器提供的對象
宿主對象中,最基礎的是window對象。
window對象對應著瀏覽器視窗的本身,這個對象的屬性和方法通常被稱為BOM(瀏覽器物件模型)。
模型: DOM中的”M”
M代表著”Model”,但說它代表著”Map”也可以。含義都是某種事物的表現形式。DOM代表著被載入到瀏覽器視窗裡的當前網頁:瀏覽器向我們提供了當前網頁的地圖(或者說模型),而我們可以通過JS去讀取這張地圖。
先瞭解表述這個地圖的記號的意義:
DOM把一份文檔表示為一棵樹,這是我們理解和運用這一模型的關鍵。
節點
節點(note)這個名詞來自網路理論,代表著網路中的一個連接點。網路是由節點構成的集合。DOM中的節點類型還包含著其他類型的節點。
元素節點
DOM的原子是元素節點。
一個頁面是由元素來構成的。而各種標籤則提供了元素的名字。元素可以包含其他的元素。html元素是節點樹的根項目。
文本節點
文本節點總是被包含在元素節點的內部。但並非所有的元素節點都包含有文本節點。
屬性節點
注釋也是一種節點類型。元素都或多或少的有一些屬性。我們可以利用這個屬性對包含在元素裡的東西做出準確的描述。並非所有的元素都包含著屬性,但素有的屬性都會被包含在元素裡。
getElementById()方法
DOM提供了一個名為getElementById()的方法,這個方法將返回一個與那個有著給定id屬性值的元素節點相對應的對象。
這個方法是與document對象相關聯的函數。在指令碼代碼裡,函數名的後面必須跟有一組圓括弧。這組圓括弧包含著函數的參數。getElementById()方法只有一個參數:你想獲得那個元素的id屬性值。而且必須放在單引號或雙引號裡。
document.getElementById(”purchases”)
這個調用將返回一個對象,這個對象對應著document對象裡的一個獨一無二的元素。
我們還可以利用DOM提供的另外一種方法來提取對象
getElementsByTagName()方法
getElementByTagName()方法將返回一個對象數組,每個對象分別對應著文檔裡有著給定標籤的一個元素。它的參數是XHTML標籤的名字:
element.getElementsByTagName(tag)
這個方法返回的是一個數組。
document.getElementsByTagName(”li”)
這個調用將返回一個對象數組,每個對象分別對應著document對象中一個清單項目(li)
我們可以利用length屬性查出這個數組的元素個數。
for (var I =0 ; I < document.getElementsByTagName(”li”).length; I++) {
alert (typeof document.getElementsByTagName(”li”)[i]);
}
將方法名稱賦值給變數,可以縮減打字量並提高函數的可讀性,如
var items = document.getElementsByTagName(”li”);
for (var I = 0 ; I < itemts.length; i++) {
alert (typeof items[i]);
}
alert(document.getElementsByTagName(”*”).length);
可以讓我們方便的獲得一個頁面總共有多少個元素節點。
如果只想知道其id屬性值是purchase的元素包含著多少個清單項目(li)的話,需要更具體的對象來調用這個方法:
var shopping = document.getElementById(”purchase”);
var items = shopping.getElementsByTagName(”*”);
在這兩條語句執行完畢後,items數組將只包含其id屬性值是purchase的無序清單裡的元素。
3.4 趁熱打鐵
簡要總結:
一份文檔就是一棵節點樹
節點分為不同類型:元素節點,屬性節點和文本節點等。
getElementById()方法將返回一個對象,該對象對應著文檔裡的一個特定的元素節點
getElementByTagName()方法將返回一個對象數組,它們分別對應著文檔裡的一個特定的元素節點
這些節點中的每個都是對象
3.4.1 getAttribute()方法
我們可以利用getAttribute()方法把獲得的元素對象各種屬性值查詢出來。
var paras = document.getElementsByTagName(”p”);
for (var i = 0; i < paras.length; i++) {
alert (paras[i].getAttribute(”title”));
}
null是JS語句中的空值,若文檔中含有多個未定義title屬性的p標籤,則會顯示null。讓我們重新修改這段代碼,使其只在title屬性存在時才彈出訊息,同時提高可讀性。
var paras = document.getElementsByTagName(”p”);
for (var i = 0; i < paras.length; i++) {
var title_text = paras[i].getAttribute(”title”);
if (title_text != null) {
alert(title_text);
}
}
進一步把代碼縮短:當檢查某項數組是否是null值時,我們其實是在檢查它是否存在。這種檢查可以簡化為直接把被檢查的資料用作if語句的條件。
if(title_text != null)可以替換為 if(title_text)
3.4.2 setAttribute()方法
修改節點屬性值的方法。
此方法也是只能通過元素節點對象調用的函數,需要向它傳遞兩個參數:
object.setAttribute(attribute, value);
下面的語句我們首先獲得purchase屬性的元素,然後修改這個元素的屬性值。
var shopping = document.getElementById(”purchase”);
shopping.setAttribute(”title”, “a list of goods”);
若一個元素沒有setAttribute()方法中定義的屬性值,則會先建立這個屬性,然後再賦值。
一個細節: setAttribute()方法對文檔的修改,將似的文檔在瀏覽器視窗裡的顯示效果發生變化,但是原始碼中不會有任何修改,也就是說,這個方法的修改不會影響任何原來的文檔資料,這個是DOM的工作模式決定的:先載入文檔的靜態內容,再以動態方式對他們進行重新整理,重新整理不會影響文檔的靜態內容。
第三章總結:
getElementById()方法
getElementsByTagName()方法
getAttribute()方法
setAttribute()方法
這四個方法將是DOM的基石。
//實例
Html代碼
- <SCRIPT LANGUAGE="JavaScript">
-
- //列表內容
- var listItems=['aaa','bbb','ccc','ddd','eee'];
-
- //建立一個ol列表,上面的數組為每個li的內容
- function createList()
- {
- var myol=document.createElement("ol");
- for(var it in listItems)
- {
- var tli=document.createElement("li");
- tli.innerHTML=listItems[it];
-
- //按一下滑鼠時調用changeColor函數
- tli.onclick=changeColor;
- //滑鼠雙擊時調用removeMe函數
- tli.ondblclick=removeMe;
-
- myol.appendChild(tli);
- }
- document.body.appendChild(myol);
- }
-
- function changeColor()
- {
- //changeColor是自己加的,考慮到undefinded也是false,所以沒有初始化。
- //動態語言就是好,對象的屬性和方法可以隨便加。
- if(this.changeColor)
- {
- this.style.background="yellow";
- this.changeColor=false;
- }
- else
- {
- this.style.background="lightgreen";
- this.changeColor=true;
- }
- }
-
- function removeMe()
- {
- //先找到父節點,再用父節點刪除自己
- var p=this.parentNode;
- p.removeChild(this);
-
- //如果這個ul元素下的li子項目已經刪除光了,就把這個ul元素也刪掉。
- if(p.getElementsByTagName('li').length==0)
- {
- p.parentNode.removeChild(p);
- }
- }
- </SCRIPT>
- </HEAD>
-
- <BODY>
- <button onclick="createList()">建立列表button>
- </ BODY>
- </HTML>