JavaScript教學如何更新、插入、修改dom節點實例程式碼詳解

更新

拿到一個DOM節點後，我們可以對它更新。

可以直接修改節點的文本，方法有兩種：

一種是修改innerHTML##屬性，這個方式非常強大，不但可以修改一個DOM節點的文字內容，還可以直接透過HTML片段修改DOM節點內部的子樹：

// 获取<p id="p-id">...</p>
var p = document.getElementById(&#39;p-id&#39;);
// 设置文本为abc:
p.innerHTML = &#39;ABC&#39;; // <p id="p-id">ABC</p>
// 设置HTML:
p.innerHTML = &#39;ABC <span style="color:red">RED</span> XYZ&#39;;
// <p>...</p>的内部结构已修改

用

innerHTML時要注意，是否需要寫入HTML。如果寫入的字串是透過網路拿到了，要注意對字元編碼來避免XSS攻擊。 第二種是修改
innerText或textContent屬性，這樣可以自動對字串進行HTML編碼，保證無法設定任何HTML標籤：

// 获取<p id="p-id">...</p>
var p = document.getElementById(&#39;p-id&#39;);
// 设置文本:
p.innerText = &#39;<script>alert("Hi")</script>&#39;;
// HTML被自动编码，无法设置一个<script>节点:
// <p id="p-id"><script>alert("Hi")</script></p>

兩者的差異在於讀取屬性時，

innerText不傳回隱藏元素的文本，而textContent傳回所有文本。另外注意IEtextContent。 修改CSS也是經常需要的操作。 DOM節點的
style屬性對應所有的CSS，可以直接取得或設定。因為CSS允許font-size這樣的名稱，但它並非JavaScript有效的屬性名，所以需要在JavaScript中改寫為駝峰式命名fontSize：

// 获取<p id="p-id">...</p>
var p = document.getElementById(&#39;p-id&#39;);
// 设置CSS:
p.style.color = &#39;#ff0000&#39;;
p.style.fontSize = &#39;20px&#39;;
p.style.paddingTop = &#39;2em&#39;;

插入

當我們獲得了某個DOM節點，想在這個DOM節點內插入新的DOM，該如何做？

如果這個DOM節點是空的，例如，
##

，那麼，直接用##innerHTML = 'child'就可以修改DOM節點的內容，相當於「插入」了新的DOM節點。 如果這個DOM節點不是空的，那就不能這麼做，因為innerHTML
會直接取代掉原來的所有子節點。 有兩個辦法可以插入新的節點。一個是使用appendChild
，把一個子節點加入到父節點的最後一個子節點。例如：

<!-- HTML结构 -->
<p id="js">JavaScript</p>
<p id="list">
  <p id="java">Java</p>
  <p id="python">Python</p>
  <p id="scheme">Scheme</p>
</p>

把

JavaScript

##加到

的最後一項：
##

var
  js = document.getElementById('js'),
  list = document.getElementById('list');
list.appendChild(js);

現在，HTML結構變成了這樣：

<!-- HTML结构 -->
<p id="list">
  <p id="java">Java</p>
  <p id="python">Python</p>
  <p id="scheme">Scheme</p>
  <p id="js">JavaScript</p>
</p>

因為我們插入的js節點已經存在於目前的文檔樹，因此這個節點首先會從原先的位置刪除，再插入到新的位置。

更多的時候我們會從零創建一個新的節點，然後插入到指定位置：

#

var
  list = document.getElementById('list'),
  haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);

這樣我們就動態新增了一個新的節點：

<!-- HTML结构 -->
<p id="list">
  <p id="java">Java</p>
  <p id="python">Python</p>
  <p id="scheme">Scheme</p>
  <p id="haskell">Haskell</p>
</p>

動態建立一個節點然後加入到DOM樹中，可以實現很多功能。舉個例子，下面的程式碼動態創建了一個

節點，然後把它加到##

節點的結尾，這樣就動態地為文件新增了新的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结构 -->
<p id="list">
  <p id="java">Java</p>
  <p id="python">Python</p>
  <p id="scheme">Scheme</p>
</p>

可以這麼寫：

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结构 -->
<p id="list">
  <p id="java">Java</p>
  <p id="haskell">Haskell</p>
  <p id="python">Python</p>
  <p id="scheme">Scheme</p>
</p>

可見，使用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结构：

<p id="parent">
  <p>First</p>
  <p>Second</p>
</p>

当我们用如下代码删除子节点时：

var parent = document.getElementById('parent');
parent.removeChild(parent.children[0]);
parent.removeChild(parent.children[1]); // <-- 浏览器报错

浏览器报错：parent.children[1]不是一个有效的节点。原因就在于，当

First

节点被删除后，parent.children的节点数量已经从2变为了1，索引[1]已经不存在了。

因此，删除多个节点时，要注意children属性时刻都在变化。

以上是JavaScript教學如何更新、插入、修改dom節點實例程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！