javascript删除html结点操作

港控/mmm° 2022-08-05 15:17 188阅读 0赞

html页面上删除结点的操作跟[添加结点][Link 1]中将段落添加在指定依附点之前相似，将段落添加在指定依附点之前代码为**document.body.insertBefore(newGraf, docForm)**,删除的为**document.body.removeChild(deleteNode)**就可以了。使用的是**removeChild** 方法，删除的是body域里面的元素。

看个代码介绍一下吧。

假如有下面一段代码，内容有四段。

<html>
    	<head>
    		<title>Deleting Nodes</title>
    	</head>
    	<body>
    		<p>给你一张过去的CD，听听那时我们的爱情，有时会突然忘了，我还在爱着你</p>
    		<p>再唱不出那样的歌曲，听到都会红着脸躲避，虽然会经常忘了，我依然爱着你</p>
    		<p>因为爱情，不会轻易悲伤，所以一切都是幸福的模样</p>
    		<p>因为爱情，简单的生长，依然随时都能为你疯狂</p>
    		<input type="button" οnclick="deleteNodes()" value="delete Nodes"/>
    		
    		<script>
    			function deleteNodes() {
    				
    			}
    		</script>
    	</body>
    </html>

现在要删除段落内容，该如何实现deleteNodes方法呢？

很简单，两行代码搞定。

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

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

获取到要删除的段落内容，document.getElementsByTagName("p")\[0\]为body标签域内的第一个p 标签内容。

**document.body.removeChild(deleteNode)**;

将获取到的要删除的节点信息从页面上面删除，使用removeChild方法。

如果段落有id的话，那就可以直接使用getElementById 方法来指定的获取要删除的对象，不用再使用  getElementsByTagName 方法获取到对象集合，再通过数组下标来指定删除对象了。

我们的示例中删除的是document.getElementsByTagName("p")\[0\]，也可以删除其他段落，比如document.getElementsByTagName("p")\[3\] 等真实存在的段落信息。

[Link 1]: http://blog.csdn.net/magi1201/article/details/43991157