更新
拿到一個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傳回所有文本。另外注意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節點是空的,例如,
##
<!-- 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结构 --> <p id="list"> <p id="java">Java</p> <p id="python">Python</p> <p id="scheme">Scheme</p> <p id="js">JavaScript</p> </p>
更多的時候我們會從零創建一個新的節點,然後插入到指定位置:
#
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>
節點,然後把它加到##
節點的結尾,這樣就動態地為文件新增了新的CSS定義:
#var d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
document.getElementsByTagName('head')[0].appendChild(d);
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>
屬性實作:
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
因此,删除多个节点时,要注意children属性时刻都在变化。
以上是JavaScript教學如何更新、插入、修改dom節點實例程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!