DOM中html元素节点的增，删，改，查的学习

最新推荐文章于 2020-08-20 23:18:15 发布

zhangchaochao

最新推荐文章于 2020-08-20 23:18:15 发布

阅读量894

点赞数

本文链接：https://blog.csdn.net/persional_zhangchao/article/details/18405541

版权

dom中html文档中元素的增，删，改，查。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM中对网页中文本内容增，删，改,查</title>

<style type="text/css">

.textdiv{
	border:none;
	width:300px;
	height:50px;
	margin:10px;
	padding:10px;
}

#div_1{
	background-color:#F80;
}

#div_2{
	background-color:#00C;
}

#div_3{
	background-color:#0F0;
}

#div_4{
	background-color:#0bF;
}

</style>
</head>

<body>	

	<!--
    查找在下面的方法中有部分体现，通过以下几种方式进行查找:
    1.getElementById("id");
    2.getElementsByName(oName);
    3.getElementsByTagName(tagName);
    -->

	<script type="text/javascript">
	/*
	添加操作指定的是div_1
	*/
    /*
	需求：给指定节点添加新的文本节点
	思路:
	1.首先创建新的文本节点；
	2.获取指定的节点；
	3.将新的文本节点添加到指定节点
	*/
   	function addElement_1() {		
		var oTextNode = document.createTextNode("这是新增加的文本");
		var oDivNode = document.getElementById("div_1");
		oDivNode.appendChild(oTextNode);
	}
	
	/*
	需求：给指定节点添加一个button节点
	思路：
	1.首先创建button节点；
	2.获取指定节点；
	3.将button节点添加到指定节点；
	*/
	function addElement_2() {
//		都可以使用
//		var oButtonNode = document.createElement("input");
//		oButtonNode.type="button";
//		oButtonNode.value="新按钮";
		var oButtonNode = document.createElement("<input type='button' value='新按钮'/>");
		var oDivNode = document.getElementById("div_1");
		oDivNode.appendChild(oButtonNode);
		
		//这里也可以采用属性的方式添加节点，但是这中方式和appendChild是有区别的
		//oDivNode.innerHTML = "<input type='button' value='新按钮'>";
	}
	
	/*
	用不同的方法实现节点的添加，实现的效果有差异
	直接通过修改节点的属性来实现节点的添加
	*/
	function addElement_3() {
		//var oTextNode = document.createTextNode("这是新增加的文本");
		var oDivNode = document.getElementById("div_1");
		oDivNode.innerHTML = "这是新增加的文本";
	}
    </script>
    
    <!--删除节点-->
    <script type="text/javascript">
	
	/*
	需求：删除div_3节点
	思路：
	1.获取div_3节点；
	2.获取div_3的父节点；
	3.调用removeChild方法删除该节点
	*/
	function delElement() {
		var oDivNode = document.getElementById("div_3");
		oDivNode.parentNode.removeChild(oDivNode);
		/*
		这种方式不建议使用
		1.如果参数为false，则只删除子节点；
		2.如果为true，则全部删除；
		oDivNode.removeNode(true);
		*/
	}	
    </script>
    
    <script type="text/javascript">
    <!--更新节点-->
	function updateElement() {
		var oNewNode = document.createTextNode("修改后的节点");
		var oDivNode = document.getElementById("div_2");
		oDivNode.replaceChild(oNewNode,oDivNode.firstChild);
	}
    
    </script>
    <div>
    	<input type="button" value="增加文本" οnclick="addElement_2()" />
        <input type="button" value="删除文本" οnclick="delElement()" />
        <input type="button" value="修改文本" οnclick="updateElement()" />        
    </div>
	<hr/>
	<div class="textdiv" id="div_1"></div>
	<div class="textdiv" id="div_2">---div区域2---</div>    
    <div class="textdiv" id="div_3">---div区域3---</div>    
    <div class="textdiv" id="div_4">---div区域4---</div>    
</body>
</html>