App下載

javascript刪除HTML結(jié)點(diǎn)操作

猿友 2021-01-04 14:36:29 瀏覽數(shù) (2767)
反饋

HTML 頁(yè)面上刪除結(jié)點(diǎn)的操作跟添加結(jié)點(diǎn)中將段落添加在指定依附點(diǎn)之前相似,將段落添加在指定依附點(diǎn)之前代碼為document.body.insertBefore(newGraf, docForm),刪除的為 document.body.removeChild(deleteNode)就能夠了。使用的是 removeChild 方法,刪除的是 body 域里面的元素。

看個(gè)代碼介紹一下吧。

假設(shè)有下面一段代碼,內(nèi)容有4段。

<html> 
<head> 
<title>Deleting Nodes</title> 
</head> 
<body> 
<p>給你一張過(guò)去的CD,聽(tīng)聽(tīng)那時(shí)我們的愛(ài)情,有時(shí)會(huì)突然忘了,我還在愛(ài)著你</p> 
<p>再唱不出那樣的歌曲,聽(tīng)到都會(huì)紅著臉躲避,雖然會(huì)常常忘了,我仍然愛(ài)著你</p> 
<p>由于愛(ài)情,不會(huì)輕易悲傷,所以一切都是幸福的樣子</p> 
<p>由于愛(ài)情,簡(jiǎn)單的生長(zhǎng),仍然隨時(shí)都能為你瘋狂</p> 
<input type="button" onclick="deleteNodes()" value="delete Nodes"/> 
<script> function deleteNodes() { } </script> 
</body> 
</html>

現(xiàn)在要?jiǎng)h除段落內(nèi)容,該如何實(shí)現(xiàn) deleteNodes 方法呢?

很簡(jiǎn)單,兩行代碼弄定。

var deleteNode =document.getElementsByTagName("p")[0]; 
document.body.removeChild(deleteNode);

var deleteNode =document.getElementsByTagName("p")[0];

獲得到要?jiǎng)h除的段落內(nèi)容,document.getElementsByTagName("p")[0]為 body 標(biāo)簽域內(nèi)的第一個(gè) p 標(biāo)簽內(nèi)容。

document.body.removeChild(deleteNode);

 將獲得到的要?jiǎng)h除的節(jié)點(diǎn)信息從頁(yè)面上面刪除,使用 removeChild 方法。

如果段落有 id 的話,那就能夠直接使用 getElementById 方法來(lái)指定的獲得要?jiǎng)h除的對(duì)象,不用再使用  getElementsByTagName 方法獲得到對(duì)象集合,再通過(guò)數(shù)組下標(biāo)來(lái)指定刪除對(duì)象了。

 

我們的示例中刪除的是 document.getElementsByTagName("p")[0],也能夠刪除其他段落,比如document.getElementsByTagName("p")[3] 等真實(shí)存在的段落信息。


0 人點(diǎn)贊