JavaScript操作節點

2021-09-13 00:24:02 字數 2463 閱讀 2406

之前我們能取得的節點物件,但是僅僅是取得而沒有做其他操作,那麼我們也可以建立乙個節點然後動態的插入到dom節點樹種

//獲取div節點

var div=document.

getelementsbytagname

("div")[

0];//建立文字節點

var textnode=document.

createtextnode

("文字節點")

;//將新建立的節點追加到div中

以上建立的是乙個文字節點,所有p標籤被當成乙個普通文字輸出,我們還可以建立元素節點追加

//獲取div節點

var div=document.

getelementsbytagname

("div")[

0];//建立元素節點

var elementnode=document.

createelement

("h1"

)//為新建的元素節點增加文字內容

elementnode.textcontent=

"為新建的元素節點增加文字內容"

;//將新建立節點追加到div中

//獲取div節點

var div=document.

getelementsbytagname

("div")[

0];//建立元素節點

var elementnode1=document.

createelement

("h1");

var elementnode2=document.

createelement

("h1");

//為新建的元素節點增加文字內容

elementnode1.textcontent=

"使用insertbefore增加的節點"

;elementnode2.textcontent=

;//將新建立節點追加到div中

使用insertbefore插入節點的時候需要兩個引數,第乙個引數是新的節點,第二個引數的插新節點的時候的參考(將新節點插入到第二個引數代表的節點之前)

div.removechild(document.getelementsbytagname("h1")[1]);
//獲取div節點

var div=document.

getelementsbytagname

("div")[

0];//建立元素節點

var elementnode1=document.

createelement

("h1");

var elementnode2=document.

createelement

("h1");

//為新建的元素節點增加文字內容

elementnode1.textcontent=

"使用insertbefore增加的節點"

;elementnode2.textcontent=

;//將新建立節點追加到div中

div.

insertbefore

(elementnode1,document.

getelementsbytagname

("p")[

0]);

div.

(elementnode2)

;//刪除節點

該方法是由父節點呼叫的,可以刪除指定的子節點,但是不能刪除孫子節點

可以使用js操作元素的css樣式

JavaScript獲取節點

可以把html中的每個標籤看成乙個節點,那麼可以通過js將這些節點獲取出來,可以使用js的乙個內建物件 物件有自己的屬性和方法 取得這些節點並且進行操作 修改,刪除,替換其內容 該物件是乙個內建物件叫作document,內建物件就是已經建立好的物件,我們可以直接使用。瀏覽器標題欄 title 引用外...

JavaScript 節點的屬性

節點的屬性 序號屬性名稱 功能childnodes 得到節點的所有子節點,已陣列的形式儲存 firstchild 得到節點的第乙個子節點 等價於 childnodes 0 lastchild 得到節點的最後乙個子節點 parentnode 得到節點的父節點 nextsibling 得到後乙個兄弟節點...

javascript 子節點刪除

1.刪除子節點的時候其餘子節點的下標索引也會發生變化。如刪除了第乙個子節點,則下一子節點會變為第乙個。x document.getelementbyid ret list x.getelementsbytagname a len list.length for i 0 ilist.length也是動...