DOM 節點操作

dom 中有乙個非常重要的功能，就是節點模型，也就是 dom 中的「m」。頁面中的元 素結構就是通過這種節點模型來互相對應著的，我們只需要通過這些節點關係，可以建立、 插入、替換、轉殖、刪除等等一些列的元素操作。

一．建立節點 

為了使頁面更加智慧型化，有時我們想動態的在 html 結構頁面新增乙個元素標籤，那麼 在插入之前首先要做的動作就是：建立節點。

//建立乙個節點 

var box=$('節點

'); 

//向 div 內部插入 strong 節點 

//使用匿名函式插入節點，html 是原節點

return '節點';

$('div').prepend('節點'); //將 span 插入到 div 內部的前面

//使用匿名函式，同上

return '節點';

$('span').prependto('div'); //將 span 移入 div 內部的前面

$('span').prependto($('div')); //同上

注意：clone(true)引數可以為空，表示只複製元素和內容，不複製事件行為。而加上 true 引數的話，這個元素附帶的事件處理行為也複製出來。

//刪除節點

$('div').remove(); //直接刪除 div 元素

注意：.remove()不帶引數時，刪除前面物件選擇器指定的元素。而.remove()本事也可以 帶選擇符引數的，比如：$('div').remove('#box');只刪除 id=box 的 div。

//保留事件的刪除節點

$('div').detach(); //保留事件行為的刪除

注意：.remove()和.detach()都是刪除節點，而刪除後本身方法可以返回當前被刪除的節 點物件，但區別在於前者在恢復時不保留事件行為，後者則保留。

//清空節點

$('div').empty(); //刪除掉節點裡的內容

//替換節點

$('div').replacewith('節點'); //將 div 替換成 span 元素

$('節點').replaceall('div'); //同上

DOM節點操作

節點型別 nodetype nodename nodevalue 含義element node 1標籤名 eg div null 元素節點 attribute node 2特性名 eg class 特性值特性節點 text node 3 text 文字的內容 文字節點 cdata section n...

操作dom節點

取到節點物件可以，我們可以建立乙個節點後動態插入到dom節點樹中 html中 1 建立乙個文字節點 第一段第二段 第三段 js var div document getelementsbytagname div 0 var textnode document createtextnode 文字節點 ...

DOM 節點操作

方法名 只能document呼叫 返回單一的值 返回動態集合 getelementbyid getelementsbytagname getelementsbyclassname queryselectorall queryselector 建立節點document.createelement ta...