JavaScript DOM編程之API總結(jié)篇
從截圖中可以看出 這段代碼中ul的子節(jié)點有9個赡矢,這說明使用childNodes獲取的節(jié)點包括了文本節(jié)點和元素節(jié)點
childNodes在低版本的ie瀏覽器下獲取的節(jié)點只包括元素節(jié)點恨豁,這就導(dǎo)致了兼容性問題
如何解決兼容性?宛逗?
根據(jù)子節(jié)點的nodeType屬性值判斷
for(vari=0; i
children:
一個即時的HTMLCollection,子節(jié)點都是Element饥努,IE9以下瀏覽器不支持胳泉。children子節(jié)點列表集合(只讀屬性 推薦使用 )
children獲取的子節(jié)點只包含元素節(jié)點
for(vari =0; i
firstNode:第一個子節(jié)點
lastNode:最后一個子節(jié)點
firstChild(firstElementChild)lastChild(lastElementChild) 第一個子節(jié)點 最后一個子節(jié)點
firstChild、lastChild和childNodes同樣的存在兼容性問題们何,在低版本ie瀏覽器中只能獲取到元素節(jié)點
firstElementChild萄焦、lastElementChild獲取第一個元素子節(jié)點,最后一個元素子節(jié)點 推薦使用
varoUl =document.getElementById('ul1');//? ? oUl.firstChild.style.background = 'red';//標(biāo)準(zhǔn)瀏覽器 報錯//? ? oUl.lastChild.style.background = 'red';//標(biāo)準(zhǔn)瀏覽器 報錯oUl.firstElementChild.style.background ='red';oUl.lastElementChild.style.background ='red';
hasChildNodes方法:可以用來判斷是否包含子節(jié)點
七、元素屬性型
7.1 setAttribute
setAttribute:它允許我們對元素屬性值做出修改與getAttribute一樣setAttribute也能用于元素節(jié)點
通過setAttribute對文檔做出修改后拂封,在通過瀏覽器的查看源碼選項看到的任然是改變之前的屬性值茬射,也就是說setAttribue做出的修改,不會反應(yīng)到文檔本身的源碼里
setAttribute優(yōu)勢在于可以修改文檔中的任何一個屬性
element.setAttribute(name, value);
其中name是特性名冒签,value是特性值在抛。如果元素不包含該特性,則會創(chuàng)建該特性并賦值萧恕。
如果元素本身包含指定的特性名為屬性刚梭,則可以訪問屬性進行賦值,比如下面兩條代碼是等價
element.setAttribute("id","test");element.id ="test";
非DOM的解決方案
其實不用setAttribute也可以改變元素的屬性
setAttribute方法是第一級DOM的組成部分廊鸥,它可以設(shè)計任何元素節(jié)點的任意屬性望浩。在第1級DOM出現(xiàn)之前,你可以通過另外一種辦法設(shè)置大部分元素的屬性
element.value ="the new value";
與下面語句等價
element.setAttribute("value","the new value");
7.2 getAttribute
getAttribute返回指定的特性名相應(yīng)的特性值惰说,如果不存在磨德,則返回null或空字符串。
getAttribute不屬性doucment對象吆视,不能通過document對象調(diào)用典挑,只能通過元素節(jié)點對象調(diào)用
例如可以與getElementsByTagName方法合用,獲取每個p的title屬性
varparas =document.getElementsByTagName("p");for(vari=0;i
八啦吧、網(wǎng)上的一張思維導(dǎo)圖總結(jié)
參考
JavaScript DOM編程藝術(shù)