DOM下的節(jié)點(diǎn)屬性和操作小結(jié)
屬性:
1 .nodeName
節(jié)點(diǎn)名稱,相當(dāng)于tagName.屬性節(jié)點(diǎn)返回屬性名,文本節(jié)點(diǎn)返回#text。nodeName,是只讀的。
2 .nodeType
值:1,元素節(jié)點(diǎn);2,屬性節(jié)點(diǎn);3,文本節(jié)點(diǎn)。nodeType是只讀的。
3 .nodeValue
返回一個(gè)字符串,指示這個(gè)節(jié)點(diǎn)的值。元素節(jié)點(diǎn)返回null,屬性節(jié)點(diǎn)返回屬性值,文本節(jié)點(diǎn)返回文本。nodeValue可讀可寫,這是對元素節(jié)點(diǎn)不能寫。一般只用于設(shè)置文本節(jié)點(diǎn)的值。
4 .childNodes
返回子節(jié)點(diǎn)數(shù)組。文本和屬性節(jié)點(diǎn)的childNodes永遠(yuǎn)是null。可以用hasChildNodes()來判斷是否有子節(jié)點(diǎn)。只讀屬性,要?jiǎng)h除添加節(jié)點(diǎn)可不能用操作childNodes數(shù)組的辦法呃。
5 .firstChild
返回第一個(gè)子節(jié)點(diǎn)。文本和屬性節(jié)點(diǎn)沒有子節(jié)點(diǎn),會(huì)返回一個(gè)空數(shù)組,這是針對這二位的特殊待遇。對于元素節(jié)點(diǎn),若是沒有子節(jié)點(diǎn)會(huì)返回null.有一個(gè)等價(jià)式:firstChild=childNodes[0].
6 .lastChild
返回最后一個(gè)子節(jié)點(diǎn)。返回值同firstChild,三方待遇參考上面。有一個(gè)等價(jià)式:lastChide=childNodes[childNodes.length-1].
7 .nextSibling()
返回節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)。如果沒有下一個(gè)兄弟節(jié)點(diǎn)的話,返回null。只讀屬性,不可以更改應(yīng)用。
8 .previousSibling()
返回節(jié)點(diǎn)的上一個(gè)兄弟節(jié)點(diǎn)。同上。
9 .parentNode()
返回節(jié)點(diǎn)的父節(jié)點(diǎn)。document.parentNode()返回null,其他的情況下都將返回一個(gè)元素節(jié)點(diǎn),因?yàn)橹挥性毓?jié)點(diǎn)擁有子節(jié)點(diǎn),出了document外任何節(jié)點(diǎn)都擁有父節(jié)點(diǎn)。parentNode(),又是一個(gè)只讀的家伙。
操作:
1. 創(chuàng)建節(jié)點(diǎn)
createElement('tagName');
如:var oP=document.createElement('p');創(chuàng)建了一個(gè)<p></p>標(biāo)簽。
2. 創(chuàng)建文本節(jié)點(diǎn)
createTextNode('text');
如:var oText=document.createTextNode('This is a paragh!');
3. 附加子節(jié)點(diǎn)
appendChild(o);其中o為節(jié)點(diǎn)對象。
如:document.body.appendChildNode(o);在body末尾追加
document.forms[0].appendChildNode(o);在form表單末尾追加
oP.appendChildNode(o);在元素內(nèi)部的末尾追加,其總oP為節(jié)點(diǎn)對象。
4. 創(chuàng)建文檔片斷
createDocumentFragment();
如:var oF=document.createDocumentFragment();
5. 刪除節(jié)點(diǎn)
removeChild(oP);
如:document.body.removeChild(oP),從body中移除oP節(jié)點(diǎn)對象。
6. 替換節(jié)點(diǎn)
replaceChid(newOp,targetOp);將目標(biāo)節(jié)點(diǎn)targetOp替換為newOp
如:document.body.replayChild(oPa,oPb).ps:怎會(huì)這樣特殊?源和目地操作數(shù)都是參數(shù),為何調(diào)用者是document.body?記住先,別多管?!惶鎿Q的必須是body的子節(jié)點(diǎn),可以用其他element替代document.body,前提一樣,被替換的要是這個(gè)element的子節(jié)點(diǎn)。
7. 插入節(jié)點(diǎn)
insertBefor(newOp,targetOp);
insertAfter(newOp,targetOp);
8. 設(shè)置或得到屬性節(jié)點(diǎn)
setAttribute('key','value');
getAttribute('key','value')
9.復(fù)制節(jié)點(diǎn)。
cloneNode(true/false)
相關(guān)文章
通過正則表達(dá)式獲取url中參數(shù)的簡單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄ㄟ^正則表達(dá)式獲取url中參數(shù)的簡單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06JS創(chuàng)建事件的三種方法(實(shí)例代碼)
下面小編就為大家?guī)硪黄狫S創(chuàng)建事件的三種方法(實(shí)例代碼)。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05JavaScript中的Math.atan2()方法使用詳解
這篇文章主要介紹了JavaScript中的Math.atan2()方法使用詳解,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06javascript標(biāo)準(zhǔn)庫(js的標(biāo)準(zhǔn)內(nèi)置對象)總結(jié)
這篇文章主要介紹了javascript標(biāo)準(zhǔn)庫,標(biāo)準(zhǔn)庫指的是js的標(biāo)準(zhǔn)內(nèi)置對象,是js這門語言本身初始時(shí)提供的在全局范圍的對象,需要的朋友可以參考下2018-05-05詳解JavaScript中的數(shù)據(jù)類型,以及檢測數(shù)據(jù)類型的方法
這篇文章主要介紹了JavaScript中的數(shù)據(jù)類型,以及檢測數(shù)據(jù)類型的方法,幫助大家鞏固基礎(chǔ)知識(shí),感興趣的朋友可以了解下2020-09-09