更新
拿到一個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 style="color:red">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傳回所有文本。另外注意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>
把
##加到e672fde323644dddb9191ec4d9b38dcf的最後一項:
##
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樹中,可以實現很多功能。舉個例子,下面的程式碼動態創建了一個
c9ccee2e6ea535a969eb3f532ad9fe89
節點,然後把它加到##93f0f5c25f18dab9d176bd4f6de5d30e
節點的結尾,這樣就動態地為文件新增了新的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结构 -->
<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重點是要拿到一個「參考子節點」的參考。很多時候,需要循環一個父節點的所有子節點,可以透過迭代
屬性實作:
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]不是一个有效的节点。原因就在于,当e388a4556c0f65e1904146cc1a846beeFirst94b3e26ee717c64999d7867364b1b4a3节点被删除后,parent.children的节点数量已经从2变为了1,索引[1]已经不存在了。
因此,删除多个节点时,要注意children属性时刻都在变化。
以上是JavaScript教學如何更新、插入、修改dom節點實例程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!