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

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

伊谢尔伦
伊谢尔伦原創
2017-07-20 13:30:551547瀏覽

更新

拿到一個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傳回所有文本。另外注意IEb6b3630328ae134826ef10e36207be1d94b3e26ee717c64999d7867364b1b4a3,那麼,直接用##innerHTML = '427924e0bc1c500e0479e017d951eadfchild54bdf357c58b8a65c66d7c19c8e4d114'就可以修改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>


6de4cee9b51ae144091be93786a2abe8JavaScript94b3e26ee717c64999d7867364b1b4a3

##加到e672fde323644dddb9191ec4d9b38dcf的最後一項:
##

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樹中,可以實現很多功能。舉個例子,下面的程式碼動態創建了一個


c9ccee2e6ea535a969eb3f532ad9fe89

節點,然後把它加到##93f0f5c25f18dab9d176bd4f6de5d30e


節點的結尾,這樣就動態地為文件新增了新的CSS定義:

#

var d = document.createElement(&#39;style&#39;);
d.setAttribute(&#39;type&#39;, &#39;text/css&#39;);
d.innerHTML = &#39;p { color: red }&#39;;
document.getElementsByTagName(&#39;head&#39;)[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(&#39;list&#39;),
  ref = document.getElementById(&#39;python&#39;),
  haskell = document.createElement(&#39;p&#39;);
haskell.id = &#39;haskell&#39;;
haskell.innerText = &#39;Haskell&#39;;
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(&#39;list&#39;);
for (i = 0; i < list.children.length; i++) {
  c = list.children[i]; // 拿到第i个子节点
}

###刪除#########

删除一个DOM节点就比插入要容易得多。
要删除一个节点,首先要获得该节点本身以及它的父节点,然后,调用父节点的removeChild把自己删掉:


// 拿到待删除节点:
var self = document.getElementById(&#39;to-be-removed&#39;);
// 拿到父节点:
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(&#39;parent&#39;);
parent.removeChild(parent.children[0]);
parent.removeChild(parent.children[1]); // <-- 浏览器报错

浏览器报错:parent.children[1]不是一个有效的节点。原因就在于,当e388a4556c0f65e1904146cc1a846beeFirst94b3e26ee717c64999d7867364b1b4a3节点被删除后,parent.children的节点数量已经从2变为了1,索引[1]已经不存在了。

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

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn