dom增删查改：

最新推荐文章于 2024-08-11 18:40:36 发布

Erin_coast

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量38

点赞数

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/Erin_coast/article/details/133737761

版权

本文详细介绍了如何使用JavaScript进行DOM操作，包括querySelector和querySelectorAll的选择器方法，以及如何动态创建、插入、替换和删除HTML元素，以及读取和修改元素的HTML内容。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>otherTest</title>
	<script type="text/javascript">
		window.onload = function () {
			/* body... */
			/*var body = document.body;
			var all = document.all;
			for(var i = 0 ;i<all.length;i++){
				alert(all[i]);
			}
			var box = document.getElementsByClassName('box1')[0].childNodes[1];
			var div_ = document.getElementsByTagName('div');
			/*var box2 = document.getElementsByClassName('box2')[0];
			var box2 = document.getElementsByTagName('div')[5];*/
			// console.log(box);


			// querySelector只查找符合条件的第一个 
			var child =  document.querySelector(".box1 div");
			var div =  document.querySelector("#a div");

			// querySelectorAll返回数组
			var all = document.querySelectorAll(".box1")
			// console.log(all);
			
			function myClick(str,fun){
				var str = document.getElementById(str);
				str.onclick = fun;
			}
			// 增加节点
			
			myClick("btn1",function () {
				/* body... */	
				var city = document.getElementById("city");
				var li = document.createElement("li");
			li.innerHTML = "广州";		
				city.appendChild(li);
				
			})
			//在北京前插入元素
			myClick("btn2",function () {
				/* body... */
				var bj = document.getElementById('bj');
				var city = document.getElementById("city");
					var li = document.createElement("li");
				li.innerHTML = "广州";
				city.insertBefore(li,bj);
			})
			// 替换北京节点
			myClick("btn3",function () {
				/* body... */
				var bj = document.getElementById('bj');
				var city = document.getElementById("city");
					var li = document.createElement("li");
				li.innerHTML = "广州";
				city.replaceChild(li,bj);
			})
			// 删除东京节点
			myClick("btn4",function () {
				/* body... */
				var dj = document.getElementById("dj");
				dj.parentNode.removeChild(dj);
			})
			// 读取city中html代码
			myClick("btn5",function () {
				/* body... */
				var city = document.getElementById("city");
				alert(city.innerHTML);
			})
			// 设置bj中的html代码
			myClick("btn6",function () {
				/* body... */
				var bj = document.getElementById('bj');
				bj.innerHTML = 'hello!beijing';
			})
			// 在city的html代码中添加li
			myClick("btn7",function () {
				/* body... */
				var city = document.getElementById("city");
				city.innerHTML += "<li>广州</li>";
			})
		}
	</script>
</head>
<body>
	<!-- <div class="box1" id="上海">
		<div id="child"></div>
	</div> 
	<div class="box1" id="bj">北京</div>
	<div class="box1" id='sh'>上海</div>
	<div class="box1" id='dj'>东京</div>
	<div>
		<div class="box2">
		</div>
	</div> -->
	<ul id="city">
		<li id="bj">北京</li>
		<li id="sh`">上海</li>
		<li id="dj">东京</li>
	</ul>
	<button id="btn1">新增</button>
	<button id="btn2">插入</button>
	<button id="btn3">替换</button>
	<button id="btn4">删除</button>
	<button id="btn5">读取city中html代码</button>
	<button id="btn6">设置bj中的html代码</button>
	<button id="btn7">在city的html代码中添加li</button>
</body>
</html>

Erin_coast

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
dom增删查改：

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>otherTest</title> <script type="text/javascript"> window.onload = functi
复制链接

扫一扫