DOM下的節點屬性和操作小結

2022-08-09 04:30:14 字數 1878 閱讀 7146

屬性:

1 .nodename

節點名稱,相當於tagname.屬性節點返回屬性名,文字節點返回#text。nodename,是唯讀的。

2 .nodetype

值:1,元素節點;2,屬性節點;3,文字節點。nodetype是唯讀的。

3 .nodevalue

返回乙個字串,指示這個節點的值。元素節點返回null,屬性節點返回屬性值,文字節點返回文字。nodevalue可讀可寫,這是對元素節點不能寫。一般只用於設定文字節點的值。

4 .childnodes

返回子節點陣列。文字和屬性節點的childnodes永遠是null。可以用haschildnodes()來判斷是否有子節點。唯讀屬性,要刪除新增節點可不能用操作childnodes陣列的辦法呃。

5 .firstchild

返回第乙個子節點。文字和屬性節點沒有子節點,會返回乙個空陣列,這是針對這二位的特殊待遇。對於元素節點,若是沒有子節點會返回null.有乙個等價式:firstchild=childnodes[0].

6 .lastchild

返回最後乙個子節點。返回值同firstchild,三方待遇參考上面。有乙個等價式:lastchide=childnodes[childnodes.length-1].

7 .nextsibling()

返回節點的下乙個兄弟節點。如果沒有下乙個兄弟節點的話,返回null。唯讀屬性,不可以更改應用。

8 .previoussibling()

返回節點的上乙個兄弟節點。同上。

9 .parentnode()

返回節點的父節點。document.parentnode()返回null,其他的情況下都將返回乙個元素節點,因為只有元素節點擁有子節點,出了document外任何節點都擁有父節點。parentnode(),又是乙個唯讀的傢伙。

操作:

1. 建立節點

createelement('tagname');

如:var op=document.createelement('p');建立了乙個

標籤。

2. 建立文字節點

createtextnode('text');

如:var otext=document.createtextnode('this is a paragh!');

3. 附加子節點

replacechid(newop,targetop);將目標節點targetop替換為newop

如:document.body.replaychild(opa,opb).ps:怎會這樣特殊?源和目地運算元都是引數,為何呼叫者是document.body?記住先,別多管。——被替換的必須是body的子節點,可以用其他element替代document.body,前提一樣,被替換的要是這個element的子節點。

7. 插入節點

insertbefor(newop,targetop);

insertafter(newop,targetop);

8. 設定或得到屬性節點

setattribute('key','value');

getattribute('key','value')

9.複製節點。

clonenode(true/false) 

小結下dom節點操作

dom節點樹 圖中可見節點html文件中的每個成分都是乙個節點 備註 通過dom,可以訪問html文件中的每個節點。用ie的除錯工具會發現ie中把空格解析成 text 即ie會把2個標籤之間只要有回車或空格的地方解析成空白文字節點,就多了個節點nodename text 而ff中卻不會。注意的是ad...

DOM的節點型別和屬性

dom,即document object model中,存在三種型別的節點 元素節點 element node 屬性節點 attribute node 文字節點 text node 幾個屬性 childnodes,返回乙個陣列,用來檢視給定元素節點的子節點。nodetype,檢視節點型別,元素節點的...

DOM屬性節點的操作方法

選擇id為pink的標籤 let pink document.queryselector pink 選擇pink元素的所有屬性節點 let pinkattr pink.attributes 列印每乙個屬性 nodename也可以以寫成name nodevalue也可以寫成value getattri...