DOM下的节点属性和操作小结
生活随笔
收集整理的這篇文章主要介紹了
DOM下的节点属性和操作小结
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
屬性:?
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。可以用hasChildNodes()來判斷是否有子節(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?記住先,別多管。——被替換的必須是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)
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。可以用hasChildNodes()來判斷是否有子節(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?記住先,別多管。——被替換的必須是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)
總結(jié)
以上是生活随笔為你收集整理的DOM下的节点属性和操作小结的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 链接a执行JS
- 下一篇: document.forms用法示例介绍