DOM修改

最新推荐文章于 2022-06-23 16:33:31 发布

一只丽丽猪

最新推荐文章于 2022-06-23 16:33:31 发布

阅读量1.2k

点赞数

分类专栏： JavaScript练习文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_44522602/article/details/123455990

版权

JavaScript练习专栏收录该内容

16 篇文章 1 订阅

订阅专栏

- 可以根据标签名创建一个元素节点对象： document.createElement()

- 可以根据文本内容创建一个文本节点对象：document.createTextNode()

- 向父节点中添加指定的子节点：父节点.appendChild(子节点)

- 将一个新的节点插入到旧节点的前边：父节点.insertBefore(新节点,旧节点)

- 使用一个新的节点去替换旧节点：父节点.replaceChild(新节点,旧节点)

- 删除指定的子节点：父节点.removeChild(子节点)

或者：子节点.parentNode.removeChild(子节点)（推荐方式，不用再获取父节点）

练习：DOM增删改操作

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script type="text/javascript">
			function myClick(idStr, fun){
				var btn = document.getElementById(idStr);
				btn.onclick = fun;
			}

			window.onload = function(){
				//创建一个"广州"节点,添加到#city下
				myClick("btn01", function(){
					var li  = document.createElement("li");//创建一个li节点
					var gzText = document.createTextNode("广州");//创建文本节点
					li.appendChild(gzText);//把文本节点插入li节点
					var city = document.getElementById("city");
					city.appendChild(li);//再把li插入到父节点city中
					
				})

				//将"广州"节点插入到#bj前面
				myClick("btn02",function(){
					var li  = document.createElement("li");//创建一个li节点
					var gzText = document.createTextNode("广州");//创建文本节点
					li.appendChild(gzText);//把文本节点插入li节点，新节点
					var city = document.getElementById("city");//父节点
					var bj = document.getElementById("bj");//旧节点
					city.insertBefore(li,bj);
				})

				//使用"广州"节点替换#bj节点
				myClick("btn03",function(){
					var li  = document.createElement("li");//创建一个li节点
					var gzText = document.createTextNode("广州");//创建文本节点
					li.appendChild(gzText);//把文本节点插入li节点，新节点
					var city = document.getElementById("city");//父节点
					var bj = document.getElementById("bj");//旧节点
					city.replaceChild(li,bj);
				})

				//删除#bj节点
				myClick("btn04",function(){
					var bj = document.getElementById("bj");//bj节点
					/* var city = document.getElementById("city");//父节点
					city.removeChild(bj); */

					bj.parentNode.removeChild(bj);	

				})

				//读取#city内的HTML代码
				myClick("btn05",function(){
					var city = document.getElementById("city");//父节点
					alert(city.innerHTML)
				})

				//设置#bj内的HTML代码
				myClick("btn06",function(){
					var bj = document.getElementById("bj");//bj节点
					bj.innerHTML = 'Beijing';

				})

				//创建一个"广州"节点,添加到#city下
				//innerHTML也可以进行的一些增删改的动作，但是会把整个city进行修改，动作较大，不推荐使用
				myClick("btn07",function(){
					var city = document.getElementById("city");
					city.innerHTML += "<li>广州</li>"
				})

				//结合使用innerHTML和appendChild
				myClick("btn08",function(){
					var li = document.createElement("li");
					li.innerHTML = "广州";
					var city = document.getElementById("city");
					city.appendChild(li);

				})
			}
		</script>
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>
				
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
			<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
			<div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
			<div><button id="btn04">删除#bj节点</button></div>
			<div><button id="btn05">读取#city内的HTML代码</button></div>
			<div><button id="btn06">设置#bj内的HTML代码</button></div>
			<div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
			<div><button id="btn08">创建一个"广州"节点,添加到#city下</button></div>
		</div>
	</body>
</html>