JavaScript removeChild()

admin發表於2018-10-31
JavaScriptREM

removeChild可以刪除指定元素的子節點，由它的名稱也體現了這一點。

如果刪除成功，則返回被刪除的子節點物件，否則返回null。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
fatherObj.removeChild(childrenObj)

引數解析：

（1）.childrenObj：必需，要被刪除的子節點物件。

瀏覽器支援:

（1）.IE瀏覽器支援此方法。

（2）.edge瀏覽器支援此方法。

（3）.谷歌瀏覽器支援此方法。

（4）.opera瀏覽器支援此方法。

（5）.火狐瀏覽器支援此方法。

（6）.safria瀏覽器支援此方法。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  let obox=document.getElementById("box");
  let lis=obox.getElementsByTagName("li");
  obox.removeChild(lis[1]);
}
</script>
</head>
<body>
<ul id="box">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
</ul>
</body>
</html>

上面程式碼可以刪除ul元素下的第二個li元素。

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/31/013145m6el746ggu8vo64o.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

getElementsByTagName參閱JavaScript getElementsByTagName()一章節。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  let obox=document.getElementById("box");
  let childNodes=obox.childNodes;
  obox.removeChild(childNodes[1]);
}
</script>
</head>
<body>
<ul id="box">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
</ul>
</body>
</html>

上述程式碼可以刪除ul元素下的第一個子節點。

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/31/013233pu86krr6ltritt8j.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

看到上述程式碼執行效果後，可能不少朋友會有這樣的疑問。

既然已經刪除第一個子節點了，為什麼第一個li元素依然存在呢。

分析如下：

（1）.首先節點與元素節點不同，節點包括元素節點。

（2）.childNodes屬性返回的是子節點，不是元素節點。

（3）.在標準瀏覽器中，空格與換行被認作文字節點，在IE8-瀏覽器中會被忽略。

所以obox.removeChild(childNodes[1])刪除的是第一個文字節點，而不是第一個li元素節點。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  let obox=document.getElementById("box");
  let lis=obox.getElementsByTagName("li");
  let deletedLi=obox.removeChild(lis[1]);
  console.log(deletedLi.innerHTML);
  
}
</script>
</head>
<body>
<ul id="box">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
</ul>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/31/013303o8o88ovn54ggeove.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

此方法的返回值是本刪除節點物件本身，控制檯列印效果可以證明這一點。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  let obox=document.getElementById("box");
  let ospan=obox.getElementsByTagName("span")[0];
  console.log(obox.removeChild(ospan));
}
</script>
</head>
<body>
<ul id="box">
  <li>
    <span>螞蟻部落</span>
  </li>
</ul>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/31/013339l1pizq440fqoz77q.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

removeChild方法只能刪除它的一級子節點，也就是說可以刪除它的兒子節點。

不能刪除孫子節點或者更加晚輩的節點，這一點要注意，否則程式碼會報錯。

相關文章