前端---js（自学笔记20)（dom查询和增删改）

清疚 2023-03-03 11:05 10阅读 0赞

### dom查询的剩余方法： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>dom查询</title>
    		<script type="text/javascript">
    			window.onload = function(){
    				//获取body标签,有俩个方法
    				var body = document.getElementsByTagName("body")[0];
    				//在document中有一个属性body，它保存的是body的引用
    				var body = document.body;
    				//document.documentElement保存的是html根标签
    				var html = document.documentElement;
    				//获得所有all
    				var all =document.all;
    				
    				//根据元素的class属性值查询一组元素节点对象
    				//getElementsByClassName（）可以根据class属性值获取一组元素节点对象，但是该方法不支持IE8及以下的浏览器
    				var box1 = document.getElementsByClassName("box1")
    				//获取页面中的所有的div
    				var divs = document.getElementsByTagName("div")
    				//获取class为box1的所有div
    				//document.querySelector()--需要一个选择器的字符串作为参数，
    				//可以根据一个CSS选择器来查询一个元素节点对象
    				//虽然IE8中没有getElementsByClassName（）但是可以使用querySelector（）代替
    				//使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
    				var div =document.querySelector(".box1 div");
    				
    				var box1 =document.querySelector(".box1")
    				
    				//document.querySelectorAll,和document.querySelector用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
    				//即使符合条件的元素只有一个，他也会返回数组
    				box1 = document.querySelectorAll(".box1");
    				box1 = document.querySelectorAll("#box2")
    				console.log(box1.length);
    				
    				
    				
    			}
    		</script>
    	</head>
    	<body>
    		<div class="box1">
    			<div></div>
    		</div>
    		<div id="box2"></div>
    	</body>
    </html>

### 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="css/CDU.css" />
    		<script type="text/javascript">
    		
    			window.onload = function() {
    				
    				//创建一个"广州"节点,添加到#city下
    				myClick("btn01",function(){
    					//创建广州节点 <li>广州</li>
    					//创建li元素节点
    					/*
    					 * 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(子节点);
    					 * 		
    					 * 		子节点.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 = "昌平";
    				});
    				
    				myClick("btn07",function(){
    					
    					//向city中添加广州
    					var city = document.getElementById("city");
    					
    					/*
    					 * 使用innerHTML也可以完成DOM的增删改的相关操作
    					 * 一般我们会两种方式结合使用
    					 */
    					//city.innerHTML += "<li>广州</li>";
    					
    					//创建一个li
    					var li = document.createElement("li");
    					//向li中设置文本
    					li.innerHTML = "广州";
    					//将li添加到city中
    					city.appendChild(li);
    					
    				});
    				
    				
    			};
    			
    			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>
    				</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>
    	</body>
    </html>

@CHARSET "UTF-8";
    
    body {
    	width: 800px;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    button {
    	width: 300px;
    	margin-bottom: 10px;
    }
    
    #btnList {
    	float:left;
    }
    
    #total{
    	width: 450px;
    	float:left;
    }
    
    ul{
    	list-style-type: none;
    	margin: 0px;
    	padding: 0px;
    }
    
    .inner li{
    	border-style: solid;
    	border-width: 1px;
    	padding: 5px;
    	margin: 5px;
    	background-color: #99ff99;
    	float:left;
    }
    
    .inner{
    	width:400px;
    	border-style: solid;
    	border-width: 1px;
    	margin-bottom: 10px;
    	padding: 10px;
    	float: left;
    }

![20200807144612467.gif][]

[20200807144612467.gif]: /images/20230208/5e2f4e268af14f3182990e0562a066ff.png