文章导航

JavaScript removeChild()

2018-10-31 01:30| 作者: admin| 查看: 915| 评论: 0|来自: 蚂蚁部落

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方法只能删除它的一级子节点,也就是说可以删除它的儿子节点。

不能删除孙子节点或者更加晚辈的节点,这一点要注意,否则代码会报错。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部