DOM下的節(jié)點屬性和操作小結(jié)
屬性:
1 .nodeName
節(jié)點名稱,相當(dāng)于tagName.屬性節(jié)點返回屬性名,文本節(jié)點返回#text。nodeName,是只讀的。
2 .nodeType
值:1,元素節(jié)點;2,屬性節(jié)點;3,文本節(jié)點。nodeType是只讀的。
3 .nodeValue
返回一個字符串,指示這個節(jié)點的值。元素節(jié)點返回null,屬性節(jié)點返回屬性值,文本節(jié)點返回文本。nodeValue可讀可寫,這是對元素節(jié)點不能寫。一般只用于設(shè)置文本節(jié)點的值。
4 .childNodes
返回子節(jié)點數(shù)組。文本和屬性節(jié)點的childNodes永遠(yuǎn)是null??梢杂胔asChildNodes()來判斷是否有子節(jié)點。只讀屬性,要刪除添加節(jié)點可不能用操作childNodes數(shù)組的辦法呃。
5 .firstChild
返回第一個子節(jié)點。文本和屬性節(jié)點沒有子節(jié)點,會返回一個空數(shù)組,這是針對這二位的特殊待遇。對于元素節(jié)點,若是沒有子節(jié)點會返回null.有一個等價式:firstChild=childNodes[0].
6 .lastChild
返回最后一個子節(jié)點。返回值同firstChild,三方待遇參考上面。有一個等價式:lastChide=childNodes[childNodes.length-1].
7 .nextSibling()
返回節(jié)點的下一個兄弟節(jié)點。如果沒有下一個兄弟節(jié)點的話,返回null。只讀屬性,不可以更改應(yīng)用。
8 .previousSibling()
返回節(jié)點的上一個兄弟節(jié)點。同上。
9 .parentNode()
返回節(jié)點的父節(jié)點。document.parentNode()返回null,其他的情況下都將返回一個元素節(jié)點,因為只有元素節(jié)點擁有子節(jié)點,出了document外任何節(jié)點都擁有父節(jié)點。parentNode(),又是一個只讀的家伙。
操作:
1. 創(chuàng)建節(jié)點
createElement('tagName');
如:var oP=document.createElement('p');創(chuàng)建了一個<p></p>標(biāo)簽。
2. 創(chuàng)建文本節(jié)點
createTextNode('text');
如:var oText=document.createTextNode('This is a paragh!');
3. 附加子節(jié)點
appendChild(o);其中o為節(jié)點對象。
如:document.body.appendChildNode(o);在body末尾追加
document.forms[0].appendChildNode(o);在form表單末尾追加
oP.appendChildNode(o);在元素內(nèi)部的末尾追加,其總oP為節(jié)點對象。
4. 創(chuàng)建文檔片斷
createDocumentFragment();
如:var oF=document.createDocumentFragment();
5. 刪除節(jié)點
removeChild(oP);
如:document.body.removeChild(oP),從body中移除oP節(jié)點對象。
6. 替換節(jié)點
replaceChid(newOp,targetOp);將目標(biāo)節(jié)點targetOp替換為newOp
如:document.body.replayChild(oPa,oPb).ps:怎會這樣特殊?源和目地操作數(shù)都是參數(shù),為何調(diào)用者是document.body?記住先,別多管?!惶鎿Q的必須是body的子節(jié)點,可以用其他element替代document.body,前提一樣,被替換的要是這個element的子節(jié)點。
7. 插入節(jié)點
insertBefor(newOp,targetOp);
insertAfter(newOp,targetOp);
8. 設(shè)置或得到屬性節(jié)點
setAttribute('key','value');
getAttribute('key','value')
9.復(fù)制節(jié)點。
cloneNode(true/false)
相關(guān)文章
深入理解JavaScript系列(41):設(shè)計模式之模板方法詳解
這篇文章主要介紹了深入理解JavaScript系列(41):設(shè)計模式之模板方法詳解,模板方法(TemplateMethod)定義了一個操作中的算法的骨架,而將一些步驟延遲到子類中,模板方法使得子類可以不改變一個算法的結(jié)構(gòu)即可重定義該算法的某些特定步驟,需要的朋友可以參考下2015-03-03
JS失效 提示HTML1114: (UNICODE 字節(jié)順序標(biāo)記)的代碼頁 utf-8 覆蓋(META 標(biāo)記)的沖突的代
今天使用F12調(diào)試的時候提示HTML1114: (UNICODE 字節(jié)順序標(biāo)記)的代碼頁 utf-8 覆蓋(META 標(biāo)記)的沖突的代碼頁 utf-8,需要的朋友可以參考下2017-06-06
深入學(xué)習(xí)JavaScript中的Rest參數(shù)和參數(shù)默認(rèn)值
這篇文章主要介紹了深入學(xué)習(xí)JavaScript中的Rest參數(shù)和參數(shù)默認(rèn)值,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-07-07
JavaScript CSS修改學(xué)習(xí)第五章 給“上傳”添加樣式
在所有的表單項里面,文件上傳部分是最難添加樣式的。IE支持一些(不是很多)樣式屬性,Mozilla很少,其他瀏覽器幾乎沒有。“瀏覽”按鈕在CSS操作里面也很難訪問。2010-02-02
javascript 學(xué)習(xí)筆記(四) 倒計時程序代碼
javascript 學(xué)習(xí)筆記(四) 倒計時程序代碼,需要的朋友可以參考下。2011-04-04
JavaScript正則表達(dá)式之multiline屬性的應(yīng)用
這篇文章主要介紹了JavaScript正則表達(dá)式之multiline屬性的應(yīng)用,是JS學(xué)習(xí)進(jìn)階中的重要知識,需要的朋友可以參考下2015-06-06
javascript學(xué)習(xí)筆記(二十) 獲得和設(shè)置元素的特性(屬性)
javascript學(xué)習(xí)筆記之獲得和設(shè)置元素的特性(屬性)介紹,學(xué)習(xí)js的朋友可以參考下2012-06-06
Uglifyjs(JS代碼優(yōu)化工具)入門 安裝使用
Uglify JS 是一個服務(wù)端node.js的壓縮程序。需要的朋友可以測試下2012-03-03

