首頁 > web前端 > js教程 > JavaScript教學如何更新、插入、修改dom節點實例程式碼詳解

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

伊谢尔伦
發布: 2017-07-20 13:30:55
原創
1567 人瀏覽過

更新

拿到一個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攻擊。 第二種是修改
innerTexttextContent屬性,這樣可以自動對字串進行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傳回所有文本。另外注意IE<9不支援textContent修改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 = '< span>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(&#39;js&#39;),
  list = document.getElementById(&#39;list&#39;);
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(&#39;list&#39;),
  haskell = document.createElement(&#39;p&#39;);
haskell.id = &#39;haskell&#39;;
haskell.innerText = &#39;Haskell&#39;;
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樹中,可以實現很多功能。舉個例子,下面的程式碼動態創建了一個