溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了JavaScript之DOM如何實現插入更新刪除，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
更新
拿到一個DOM節點后，我們可以對它進行更新。
可以直接修改節點的文本，方法有兩種：
一種是修改innerHTML屬性，這個方式非常強大，不但可以修改一個DOM節點的文本內容，還可以直接通過HTML片段修改DOM節點內部的子樹：
// 獲取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 設置文本為abc:
p.innerHTML = 'ABC'; // <p id="p-id">ABC</p>
// 設置HTML:
p.innerHTML = 'ABC <span >RED</span> XYZ';
// <p>...</p>的內部結構已修改用innerHTML時要注意，是否需要寫入HTML。如果寫入的字符串是通過網絡拿到了，要注意對字符編碼來避免XSS攻擊。
第二種是修改innerText或textContent屬性，這樣可以自動對字符串進行HTML編碼，保證無法設置任何HTML標簽：
// 獲取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 設置文本:
p.innerText = '<script>alert("Hi")</script>';
// HTML被自動編碼，無法設置一個<script>節點:
// <p id="p-id"><script>alert("Hi")</script></p>兩者的區別在于讀取屬性時，innerText不返回隱藏元素的文本，而textContent返回所有文本。另外注意IE<9不支持textContent。
修改CSS也是經常需要的操作。DOM節點的style屬性對應所有的CSS，可以直接獲取或設置。因為CSS允許font-size這樣的名稱，但它并非JavaScript有效的屬性名，所以需要在JavaScript中改寫為駝峰式命名fontSize：
// 獲取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 設置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '2em';插入
當我們獲得了某個DOM節點，想在這個DOM節點內插入新的DOM，應該如何做？
如果這個DOM節點是空的，例如，<div></div>，那么，直接使用innerHTML = '<span>child</span>'就可以修改DOM節點的內容，相當于“插入”了新的DOM節點。
如果這個DOM節點不是空的，那就不能這么做，因為innerHTML會直接替換掉原來的所有子節點。
有兩個辦法可以插入新的節點。一個是使用appendChild，把一個子節點添加到父節點的最后一個子節點。例如：
<!-- HTML結構 --> <p id="js">JavaScript</p> <div id="list"> <p id="java">Java</p> <p id="python">Python</p> <p id="scheme">Scheme</p> </div>
把<p id="js">JavaScript</p>添加到<div id="list">的最后一項：
var
js = document.getElementById('js'),
list = document.getElementById('list');
list.appendChild(js);現在，HTML結構變成了這樣：
<!-- HTML結構 --> <div id="list"> <p id="java">Java</p> <p id="python">Python</p> <p id="scheme">Scheme</p> <p id="js">JavaScript</p> </div>
因為我們插入的js節點已經存在于當前的文檔樹，因此這個節點首先會從原先的位置刪除，再插入到新的位置。
更多的時候我們會從零創建一個新的節點，然后插入到指定位置：
var
list = document.getElementById('list'),
haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);這樣我們就動態添加了一個新的節點：
<!-- HTML結構 --> <div id="list"> <p id="java">Java</p> <p id="python">Python</p> <p id="scheme">Scheme</p> <p id="haskell">Haskell</p> </div>
動態創建一個節點然后添加到DOM樹中，可以實現很多功能。舉個例子，下面的代碼動態創建了一個<style>節點，然后把它添加到<head>節點的末尾，這樣就動態地給文檔添加了新的CSS定義：
var d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
document.getElementsByTagName('head')[0].appendChild(d);可以在Chrome的控制臺執行上述代碼，觀察頁面樣式的變化。
insertBefore
如果我們要把子節點插入到指定的位置怎么辦？可以使用parentElement.insertBefore(newElement, referenceElement);，子節點會插入到referenceElement之前。
還是以上面的HTML為例，假定我們要把Haskell插入到Python之前：
<!-- HTML結構 --> <div id="list"> <p id="java">Java</p> <p id="python">Python</p> <p id="scheme">Scheme</p> </div>
可以這么寫：
var
list = document.getElementById('list'),
ref = document.getElementById('python'),
haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.insertBefore(haskell, ref);新的HTML結構如下：
<!-- HTML結構 --> <div id="list"> <p id="java">Java</p> <p id="haskell">Haskell</p> <p id="python">Python</p> <p id="scheme">Scheme</p> </div>
可見，使用insertBefore重點是要拿到一個“參考子節點”的引用。很多時候，需要循環一個父節點的所有子節點，可以通過迭代children屬性實現：
var
i, c,
list = document.getElementById('list');
for (i = 0; i < list.children.length; i++) {
c = list.children[i]; // 拿到第i個子節點
}刪除
刪除一個DOM節點就比插入要容易得多。
要刪除一個節點，首先要獲得該節點本身以及它的父節點，然后，調用父節點的removeChild把自己刪掉：
// 拿到待刪除節點:
var self = document.getElementById('to-be-removed');
// 拿到父節點:
var parent = self.parentElement;
// 刪除:
var removed = parent.removeChild(self);
removed === self; // true注意到刪除后的節點雖然不在文檔樹中了，但其實它還在內存中，可以隨時再次被添加到別的位置。
當你遍歷一個父節點的子節點并進行刪除操作時，要注意，children屬性是一個只讀屬性，并且它在子節點變化時會實時更新。
例如，對于如下HTML結構：
<div id="parent"> <p>First</p> <p>Second</p> </div>
當我們用如下代碼刪除子節點時：
var parent = document.getElementById('parent');
parent.removeChild(parent.children[0]);
parent.removeChild(parent.children[1]); // <-- 瀏覽器報錯瀏覽器報錯：parent.children[1]不是一個有效的節點。原因就在于，當<p>First</p>節點被刪除后，parent.children的節點數量已經從2變為了1，索引[1]已經不存在了。
因此，刪除多個節點時，要注意children屬性時刻都在變化。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“JavaScript之DOM如何實現插入更新刪除”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
