DOM節點的建立 插入 刪除 查詢 替換

2021-08-03 12:58:41 字數 1265 閱讀 8601

使用的命令是

var odiv = document.createelement('div');

這樣就建立了乙個div標籤。

移動dom節點也就是把這個節點插入到html文件中的某個地方,這裡js給了我們兩個方法:

把div插入到body中,並且位於末尾

2.insertbefore():把節點插入到父節點的某個兄弟節點的前面。

var op = createelement('p');  //

建立乙個p節點

document.body.insertbefore(op,odiv); //

把p節點插入到div的前面

刪除dom節點的方法是removechild()。

document.body.removechild(op);  //

刪除p節點

查詢dom節點的方法很多,常用的有:

getelementbyid()    //通過元素id,唯一性

如html文件如下:

<

body

>

<

div

id='box'

>

div>

body

>

這是可以使用getelementbyid()獲取到id為box的div。

var odiv = document.getelementbyid('box');

2.getelementsbytagname()   //通過元素的標籤名來選擇元素

var adiv = getelementsbytagname('div');

要注意的是,getelementsbytagname()獲取的是一組元素,所以如果想取得上面那個id為box的div要在後面加上[0];

var odiv = getelementsbytagname('div')[0];

替換dom節點的方法是replacechild()。

var ospan = document.createelement('span'); //

建立乙個span標籤

document.body.replacechild(ospan,obox); //

用span標籤替換div標籤

最常用的dom操作就是這些了,其他還有很多的方法,就目前而言,各瀏覽器相容性不太好,所以還是推薦大家暫時只使用上述這些方法。

節點操作(建立 插入 刪除 查詢)

建立元素 1 document.write 2 物件.innerhtml 不能用在迴圈裡 3 建立標籤結點 var mya document.createelement a 建立文字結點 掛接文字結點 新增屬性和樣式 mya.href mya.setattribute href style.屬性名 ...

建立和插入DOM節點

插入節點 我們獲得了某個dom節點,假設這個dom節點是空的,我們通過innerhtml就可以增加乙個元素了,但是這個dom節點已經存在元素了,我們就不能這麼幹了 會產生覆蓋 追加j ascript j ase j aee j ame 效果 建立乙個新的標籤,實現插入 insertbefore le...

DOM節點的插入

動態建立的元素是不夠的,它只是臨時存放在記憶體中,最終我們需要放到頁面文件並呈現出來。那麼問題來了,怎麼放到文件上?這裡就涉及到乙個位置關係,常見的就是把這個新建立的元素,當作頁面某乙個元素的子元素放到其內部。針對這樣的處理,jquery就定義2個操作的方法 簡單的總結就是 2 dom外部插入aft...