024dom增删改

最新推荐文章于 2024-08-25 15:00:00 发布

Manta__

最新推荐文章于 2024-08-25 15:00:00 发布

阅读量228

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Manta__/article/details/104778901

版权

JavaScript 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

方法	含义
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild	()替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute( )	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute( )	把指定属性设置或修改为指定的值。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http:/ /www. w3. org/TR/html4/strict.dtd">
<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">
		window.onload = function() {
		
			//创建一个"广州"节点，添加到#city下
			myClick("btn01" , function(){
				//创建广州节点<li>广州</li>
				//创建1i元素节点
				/*
				document . createElement( )
				可以用于创建一个元素节点对象，
				它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，
				并将创建好的对象作为返回值返回
				*/
				var li = document . createElement("li");
				//创建广州文本节点
				/*
				* document. createTextNode( )
				可以用来创建一个文本节点对象
				需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
				*/
				var gzText = document . createTextNode("广州");
				//将gzText设置li的子节点
				/*appendChild()
				*-向一个父节点中添加一个新的子节点
				-用法:父节点.appendChild(子节点);
				*/
				li . appendChild(gzText);
				//获取id为city的节点
				var city = document . getElementById("city");
				//将广州添加到city下
				city. appendChild(li);
			});
			
			//将"广州"节点插入到#bj前面
			myClick("btn02" , function(){
				//创建一一个广州
				var li = document . createElement("li");
				var gzText = document . createTextNode("广州");
				li. appendChild(gzText);
				//获取id为bj的节点
				var bj = document . getElementById("bj");
				//获取city
				var city = document . getElementById("city");
				/* insertBefore()-可以在指定的子节点前插入新的子节点
				*语法：父节点.insertBefore (新节点,旧节点);
				*/
				city . insertBefore(li,bj);
			});
			
			//使用"广州"节点替换#bj节点
			myClick("btn03", , function(){
				//创建一个广州
				var li = document . createElement("li");
				var gzText = document . createTextNode("广州");
				li . appendChild(gzText);
				//获取id为bj的节点
				var bj = document . getElementById("bj");
				//获取city
				var city = document. getElementById("city");
				/*
				* replaceChild(
				可以使用指定的子节点替换已有的子节点
				语法:父节点.replaceChild(新节点,旧节点);
				*/
				city. replaceChild(li，bj);
			});

			//删除#bj节点
			myClick("btn04", function(){
				//获取id为bj的节点
				var bj = document. getElementById("bj");
				//获取city
				var city = document. getElementById("city");
				/*removeChild( )-可以删除一一个子节点
				-语法:父节点.removeChild(子节点):|
				*/
				city. removeChild(bj);
				/*子节点. parentNode . removeChild(子节点) ;*/
				//city. removeChild(bj);
				bj. parentNode . removeChild(bj);

			});
			//读取#city内的HTML代码
			myClick("btn05" , function(){
				//获取city
				var city = document. getElementById("city");
				alert(city . innerHTML);
			});
	
			//设置#bj内的HTML代码
			myClick("btn06",function(){
				//获取bj
				var bj = document. getElementById("bj");
				bj. innerHTML ="昌平";
				alert(bj. innerHTML);
			});
				
				
		};
		function myClick(idStr, fun) {
				var btn = document. getElementById(idStr);
				btn.onclick = fun;
		}
	</script>
</head>
<body>
	<div id="total">
		<div class="inner">
			<p>
				你喜欢哪个城市?
			</p>
			<ul id="city">
				<li id="bj">北京</li>
				<li>上海</li>
				<li>东京</li>
				<li>首尔</li>
			</u1>
		</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>
</body>