在javaScript的運用中,我們經常需要對某個節點進行刪除操作, 對於節點的增加(appendChid/insertBefore),刪除(removeChild),替換(replaceChid)等操作最關鍵的地方,我覺得應該是找準他們的父節點,以及要操作的子節點.這樣就會思路清晰的進行各種花樣的操作.接下來,我主要總結一下,我在運用中刪除節點的操作方法;
第一種方法,通過訪問節點的getElementsByTagName()方法返回的集合結果集來操作刪除.代碼如下(代碼只附body部分):
<body><div id="div1">
<h2 id="p3">我是h2元素的內容</h2>
<h2>好好學習,增量式收穫</h2>
<h2>hello,JavaScript!!!</h2>
</div>
<input type="button" id="btnclick2" value="click"/>
<!--以下部分是JavaScript-->
<script type="text/javascript">
function deleteele(){
var oldh2=document.getElementsByTagName("h2")
if(oldh2.length>0){
document.getElementById("div1").removeChild(oldh2[0]);
}
else{
alert("沒有可刪除的東西了")
}
return false;
}
document.getElementById("btnclick2").onclick=deleteele;//刪除h2元素
</script>
</body>
在以上的方法中,document.getElementById("div1")所得到的就是父節點,而oldh2[0]就是即將刪除的節點
第二種方法,通過訪問節點的getElementById()方法返回指定的元素節點.代碼如下(代碼只附JavaScript部分):
<script type="text/javascript">
function deleteele(){
var oldh2=document.getElementById("div1");
if(oldh2.hasChildNodes()){
oldh2.removeChild(oldh2.firstChild);
}
else{
alert("沒有可刪除的東西了")
}
return false;
}
document.getElementById("btnclick2").onclick=deleteele;//刪除h2元素
</script>
以上的document.getElementById("div1")就是父節點,oldh2.firstChild是即將刪除的子節點.