欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript之DOM插入更新刪除_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理

 更新時(shí)間：2017年07月03日 11:17:18   作者：liaoxuefeng  
這篇文章主要為大家詳細(xì)介紹了JavaScript之DOM插入更新刪除，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

JavaScript之DOM插入更新刪除，供大家參考，具體內(nèi)容如下

更新

拿到一個(gè)DOM節(jié)點(diǎn)后，我們可以對(duì)它進(jìn)行更新。

可以直接修改節(jié)點(diǎn)的文本，方法有兩種：

一種是修改innerHTML屬性，這個(gè)方式非常強(qiáng)大，不但可以修改一個(gè)DOM節(jié)點(diǎn)的文本內(nèi)容，還可以直接通過(guò)HTML片段修改DOM節(jié)點(diǎn)內(nèi)部的子樹(shù)：

// 獲取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 設(shè)置文本為abc:
p.innerHTML = 'ABC'; // <p id="p-id">ABC</p>
// 設(shè)置HTML:
p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';
// <p>...</p>的內(nèi)部結(jié)構(gòu)已修改

用innerHTML時(shí)要注意，是否需要寫入HTML。如果寫入的字符串是通過(guò)網(wǎng)絡(luò)拿到了，要注意對(duì)字符編碼來(lái)避免XSS攻擊。
第二種是修改innerText或textContent屬性，這樣可以自動(dòng)對(duì)字符串進(jìn)行HTML編碼，保證無(wú)法設(shè)置任何HTML標(biāo)簽：

// 獲取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 設(shè)置文本:
p.innerText = '<script>alert("Hi")</script>';
// HTML被自動(dòng)編碼，無(wú)法設(shè)置一個(gè)<script>節(jié)點(diǎn):
// <p id="p-id">&lt;script&gt;alert("Hi")&lt;/script&gt;</p>

兩者的區(qū)別在于讀取屬性時(shí)，innerText不返回隱藏元素的文本，而textContent返回所有文本。另外注意IE<9不支持textContent。
修改CSS也是經(jīng)常需要的操作。DOM節(jié)點(diǎn)的style屬性對(duì)應(yīng)所有的CSS，可以直接獲取或設(shè)置。因?yàn)镃SS允許font-size這樣的名稱，但它并非JavaScript有效的屬性名，所以需要在JavaScript中改寫為駝峰式命名fontSize：

// 獲取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 設(shè)置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '2em';

插入

當(dāng)我們獲得了某個(gè)DOM節(jié)點(diǎn)，想在這個(gè)DOM節(jié)點(diǎn)內(nèi)插入新的DOM，應(yīng)該如何做？
如果這個(gè)DOM節(jié)點(diǎn)是空的，例如，<div></div>，那么，直接使用innerHTML = '<span>child</span>'就可以修改DOM節(jié)點(diǎn)的內(nèi)容，相當(dāng)于“插入”了新的DOM節(jié)點(diǎn)。
如果這個(gè)DOM節(jié)點(diǎn)不是空的，那就不能這么做，因?yàn)?span style="color: #800000">innerHTML會(huì)直接替換掉原來(lái)的所有子節(jié)點(diǎn)。
有兩個(gè)辦法可以插入新的節(jié)點(diǎn)。一個(gè)是使用appendChild，把一個(gè)子節(jié)點(diǎn)添加到父節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)。例如：

<!-- HTML結(jié)構(gòu) -->
<p id="js">JavaScript</p>
<div id="list">
  <p id="java">Java</p>
  <p id="python">Python</p>
  <p id="scheme">Scheme</p>
</div>

把<p id="js">JavaScript</p>添加到<div id="list">的最后一項(xiàng)：

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

現(xiàn)在，HTML結(jié)構(gòu)變成了這樣：

<!-- HTML結(jié)構(gòu) -->
<div id="list">
  <p id="java">Java</p>
  <p id="python">Python</p>
  <p id="scheme">Scheme</p>
  <p id="js">JavaScript</p>
</div>

因?yàn)槲覀儾迦氲膉s節(jié)點(diǎn)已經(jīng)存在于當(dāng)前的文檔樹(shù)，因此這個(gè)節(jié)點(diǎn)首先會(huì)從原先的位置刪除，再插入到新的位置。
更多的時(shí)候我們會(huì)從零創(chuàng)建一個(gè)新的節(jié)點(diǎn)，然后插入到指定位置：

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

這樣我們就動(dòng)態(tài)添加了一個(gè)新的節(jié)點(diǎn)：

<!-- HTML結(jié)構(gòu) -->
<div id="list">
  <p id="java">Java</p>
  <p id="python">Python</p>
  <p id="scheme">Scheme</p>
  <p id="haskell">Haskell</p>
</div>

動(dòng)態(tài)創(chuàng)建一個(gè)節(jié)點(diǎn)然后添加到DOM樹(shù)中，可以實(shí)現(xiàn)很多功能。舉個(gè)例子，下面的代碼動(dòng)態(tài)創(chuàng)建了一個(gè)<style>節(jié)點(diǎn)，然后把它添加到<head>節(jié)點(diǎn)的末尾，這樣就動(dòng)態(tài)地給文檔添加了新的CSS定義：

var d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
document.getElementsByTagName('head')[0].appendChild(d);

可以在Chrome的控制臺(tái)執(zhí)行上述代碼，觀察頁(yè)面樣式的變化。

insertBefore

如果我們要把子節(jié)點(diǎn)插入到指定的位置怎么辦？可以使用parentElement.insertBefore(newElement, referenceElement);，子節(jié)點(diǎn)會(huì)插入到referenceElement之前。
還是以上面的HTML為例，假定我們要把Haskell插入到Python之前：

<!-- HTML結(jié)構(gòu) -->
<div id="list">
  <p id="java">Java</p>
  <p id="python">Python</p>
  <p id="scheme">Scheme</p>
</div>

可以這么寫：

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

新的HTML結(jié)構(gòu)如下：

<!-- HTML結(jié)構(gòu) -->
<div id="list">
  <p id="java">Java</p>
  <p id="haskell">Haskell</p>
  <p id="python">Python</p>
  <p id="scheme">Scheme</p>
</div>

可見(jiàn)，使用insertBefore重點(diǎn)是要拿到一個(gè)“參考子節(jié)點(diǎn)”的引用。很多時(shí)候，需要循環(huán)一個(gè)父節(jié)點(diǎn)的所有子節(jié)點(diǎn)，可以通過(guò)迭代children屬性實(shí)現(xiàn)：

var
  i, c,
  list = document.getElementById('list');
for (i = 0; i < list.children.length; i++) {
  c = list.children[i]; // 拿到第i個(gè)子節(jié)點(diǎn)
}

刪除

刪除一個(gè)DOM節(jié)點(diǎn)就比插入要容易得多。
要?jiǎng)h除一個(gè)節(jié)點(diǎn)，首先要獲得該節(jié)點(diǎn)本身以及它的父節(jié)點(diǎn)，然后，調(diào)用父節(jié)點(diǎn)的removeChild把自己刪掉：

// 拿到待刪除節(jié)點(diǎn):
var self = document.getElementById('to-be-removed');
// 拿到父節(jié)點(diǎn):
var parent = self.parentElement;
// 刪除:
var removed = parent.removeChild(self);
removed === self; // true

注意到刪除后的節(jié)點(diǎn)雖然不在文檔樹(shù)中了，但其實(shí)它還在內(nèi)存中，可以隨時(shí)再次被添加到別的位置。
當(dāng)你遍歷一個(gè)父節(jié)點(diǎn)的子節(jié)點(diǎn)并進(jìn)行刪除操作時(shí)，要注意，children屬性是一個(gè)只讀屬性，并且它在子節(jié)點(diǎn)變化時(shí)會(huì)實(shí)時(shí)更新。

例如，對(duì)于如下HTML結(jié)構(gòu)：

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

當(dāng)我們用如下代碼刪除子節(jié)點(diǎn)時(shí)：

var parent = document.getElementById('parent');
parent.removeChild(parent.children[0]);
parent.removeChild(parent.children[1]); // <-- 瀏覽器報(bào)錯(cuò)

瀏覽器報(bào)錯(cuò)：parent.children[1]不是一個(gè)有效的節(jié)點(diǎn)。原因就在于，當(dāng)<p>First</p>節(jié)點(diǎn)被刪除后，parent.children的節(jié)點(diǎn)數(shù)量已經(jīng)從2變?yōu)榱?，索引[1]已經(jīng)不存在了。

因此，刪除多個(gè)節(jié)點(diǎn)時(shí)，要注意children屬性時(shí)刻都在變化。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論