JS中DOM节点的CRUD

素颜马尾好姑娘i 2023-01-21 02:12 137阅读 0赞

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

<!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">
    		
    			window.onload = function() { 
    				
    				//创建一个"广州"节点,添加到#city下
    				myClick("btn01",function(){ 
    					//创建广州节点 <li>广州</li>
    					//创建li元素节点
    					/* * document.createElement() * 可以用于创建一个元素节点对象， * 它需要一个标签名作为参数，将会根据该标签名创建元素节点对象， * 并将创建好的对象作为返回值返回 */
    					document.createElement("di");
    					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>