dom查询

缺乏、安全感 2022-04-12 13:58 41阅读 0赞

1.dom元素查询以及结点查询

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>DOM查询练习</title>
    <style type="text/css">
    *{
    	margin:0px;
    	
    }
    .inner{
    	width:600px;
    	border:1px solid;/*外边框*/
    	margin:20px auto;/*设置为居中*/
    }
    .inner1{
    	width:600px;
    	border:1px solid;/*外边框*/
    	margin:20px auto;/*设置为居中*/
    	padding:10px 0px;/*设置内边距*/
    	padding-left:5px;
    }
    #city,#game{
    	list-style:none;
    	width:208px;
    	overflow:hidden;/*解决高度塌陷*/
    	
    	
    }
    #city li,#game li{
    	float:left;
    	width:40px;/*设置宽度*/
    	background-color:#0C0;/*设置背景颜色px*/
    	margin-right:10px;/*设置右外边距为10px*/
    	border:1px solid;/*加一个外边框*/
    	text-align:center;/*字体居中*/
    
    	
    }
    #phone{
    	width:318px;
    	list-style:none;
    	overflow:hidden;/*解决高度塌陷*/
    }
    #phone li{
    	width:60px;
    	float:left;/*向左浮动*/
    	background-color:#0C0;/*设置背景颜色px*/
    	margin-right:10px;/*设置右外边距为10px*/
    	border:1px solid;/*加一个外边框*/
    	text-align:center;/*字体居中*/
    }
    #phone .li3{
    	width:160px;
    	margin-bottom:10px;
    }
    p{
    	text-indent:2em;
    	margin:10px 0px;
    	
    }
    #btnlist
    {
    	width：300px;
        float:left;
    	margin:5px 10px;
    }
    #total{
    	float:left;
    	margin-left:200px;
    }
    button{
    	width:300px;
    	margin-top:15px;
    }
    </style>
    <script type="text/javascript">
    window.onload=function()
    {
    	//1.查找#bj结点
    	//获取01按钮
    	var bt1=document.getElementById("btn01");
    	//绑定单击响应事件
    	bt1.onclick=function()
    	{
    		//获取北京结点
    	     var bjjd=document.getElementById("bj");
    		 //打印出结点文本
    		alert(bjjd.innerHTML);
    	};
    	
    	//2.查找所有li结点
    	//获取02按钮
    	var bt2=document.getElementById("btn02");
    	//绑定单击响应事件
    	bt2.onclick=function()
    	{   // 获取所有的li结点（通过标签名获取一组元素结点）
    		var allli=document.getElementsByTagName("li");
    		//遍历所有的li结点（这个方法返回的是一个类数组对象，所有查询到的元素都会保存在这个数组中）
    		for(var i=0;i<allli.length;i++)
    		alert(allli[i].innerHTML);
    	};
    	//3.查找name=gender的所有结点
    	//获取03按钮
    	var bt3=document.getElementById("btn03");
    	//绑定点击响应事件
    	bt3.onclick=function()
    	{
    		//获取name=gender的结点
    		var nameall=document.getElementsByName("gender");
    		//遍历
    		for(var i=0;i<nameall.length;i++)
    		alert(nameall[i].value);//注意读取class属性时需要用到元素.className(其他都是元素.属性名例如元素.id,元素.value)
    	};
    	
    	
    	//4.查找#city下的的所有li结点
    	//调用myclick函数
    	myclick("btn04",function()
    	{
    		var cityz=document.getElementById("city");
    		var allz=cityz.getElementsByTagName("li");//注意是#city下面的所有li并不是document下面的所有li
    		//遍历
    		for(var i=0;i<allz.length;i++)
    		alert(allz[i].innerHTML);
    	});
    	//5.返回#city下的所有子结点
    	//childNodes用返回所有结点包括文本结点（根本DOM标准标签间的空白算文本节点）在IE8及其以下版本中不会将标签间的空白算文本节点
    	//调用myclick函数
    	myclick("btn05",function()
    	{
    		var cityz=document.getElementById("city");
    		//写法1 
    		//var allz=cityz.childNodes;//注意是#city下面的所有li并不是document下面的所有li
    		
    		//写法2children，获取当前元素的所有子元素(所有浏览器都兼容)
    		var allz=cityz.children;
    		//遍历
    		for(var i=0;i<allz.length;i++)
    		alert(allz[i].innerHTML);
    	});
    	//6.返回#phone的第一个子结点
    	//firstchild当前元素的第一个子节点（firstElementChild当前元素的第一个子元素,但是此方法不兼容IE8及其以下浏览器）
    	//调用函数
    	myclick("btn06",function()
    	{
    		var ph=document.getElementById("phone");
    		var dy=ph.firstChild;
    		alert(dy.innerHTML);
    	});
    	//7.返回#Android的前一个兄弟结点(previousSibling)
    	//perviousElementSibling获取前一个兄弟元素不包括空白文本，但是此方法不兼容IE8及其以下浏览器
    	myclick("btn07",function()
    	{
    		var ad=document.getElementById("android");
    		var qx=ad.previousSibling;
    		alert(qx.innerHTML);
    		
    	});
    	//8.读取#username的value属性值
    	//文本框的value属性值，就是文本框中填写的内容
    	myclick("btn08",function()
    	{
    		//获取id为username的元素
    		var us=document.getElementById("username");
    		//读取#username的value属性值
    		alert(us.value);
    		
    	});
    	//9.设置#username的value属性值
    	myclick("btn09",function()
    	{
    		var us=document.getElementById("username");
    		us.value="dweblover";
    	});
    	//10.返回#bj的父结点(parentNode)
    	myclick("btn10",function()
    	{
    		var bj=document.getElementById("bj");
    		var fj=bj.parentNode;
    		alert(fj.innerHTML);//alert(fj.innerText)
    		
    	});
    	//11.返回#bj的文本值
    	myclick("btn11",function()
    	{//获取北京结点
    		var bj=document.getElementById("bj");
    		alert(bj.innerHTML);//alert(fj.innerText)
    		
    	});
    	//12.补充,获取body标签
    	//写法1
    	//var bd=document.getElementsByTagName("body")[0];
    	//写法2
    	var bd=document.body;
    	console.log(bd);
    	//13.获取html标签
    	var hl=document.documentElement;
    	console.log(hl);
    	//getElementByClassName()可以根据class属性值获取一组元素结点对象，但是此方法不支持IE8及其以下的浏览器
    	
    };
    //idstr要绑定单击响应函数对象的id属性值
    //fun为事件回调函数，单击时此函数会被触发
    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>
    <br/></br/>
    <p>你喜欢哪款单机游戏?</p>
    <ul id="game">
    <li id="hj">红警</li>
    <li>实况</li>
    <li>飞车</li>
    <li>魔兽</li>
    </ul>
    <br/></br/>
    <p>你手机操作系统是?</p>
    <ul id="phone"><li>IOS</li><li id="android">android</li><li class="li3">windows phone</li>
    </ul>
    </div>
    <div class="inner1">
    gender:
    <input type="radio" name="gender" value="male">male
    <input type="radio" name="gender" value="female">female
    <br/><br/>
    name:
    <input type="text" name="name" id="username">
    </div>
    </div>
    <div id="btnlist">
    <div><button  id="btn01">查找#bj结点</button></div>
    <div><button  id="btn02">查找所有li结点</button></div>
    <div><button  id="btn03">查找name=gender的所有结点</button></div>
    <div><button  id="btn04">查找#city下的的所有li结点</button></div>
    <div><button  id="btn05">返回#city下的所有子结点</button></div>
    <div><button  id="btn06">返回#phone的第一个子结点</button></div>
    <div><button  id="btn07">返回#Android的前一个兄弟结点</button></div>
    <div><button  id="btn08">读取#username的value属性值</button></div>
    <div><button  id="btn09">设置#username的value属性值</button></div>
    <div><button  id="btn10">返回#bj的父结点</button></div>
    <div><button  id="btn11">返回#bj的文本值</button></div>
    </div>
    </body>
    </html>

**效果图如下**  
![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70]  
2.querySelector()和querySelectorAll()

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>dom查询剩余方法</title>
    <script type="text/javascript">
    window.onload=function()
    {
    	//获取所有的div
    	var alldiv=document.getElementsByTagName("div");
    	//获取class=box1中所有的div
    	//document.querySelector()需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素结点对象,使用该方法总会返回唯一的一个元素
    	//如果满足条件的元素有多个，那么它只会返回第一个
    	var bdiv=document.querySelector(".box1 div");
    	console.log(bdiv.innerHTML);
    	//document.querySelectorAll()方法和querySelector()方法用法类似，不同的是他会将符合条件的元素封装到一个数组中返回,即使符合条件的只有一个也会返回一个数组
    	var bx1=document.querySelectorAll(".box1");
    	console.log(bx1.length);
    };
    
    </script>
    </head>
    <body>
    <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>
    </body>
    </html>

3.dom增删改

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>DOM查询练习</title>
    <style type="text/css">
    *{
    	margin:0px;
    	
    }
    .inner{
    	width:600px;
    	border:1px solid;/*外边框*/
    	margin:20px auto;/*设置为居中*/
    }
    
    #city{
    	list-style:none;
    	width:408px;
    	overflow:hidden;/*解决高度塌陷*/
    	
    	
    }
    #city li{
    	float:left;
    	width:40px;/*设置宽度*/
    	background-color:#0C0;/*设置背景颜色px*/
    	margin-right:10px;/*设置右外边距为10px*/
    	border:1px solid;/*加一个外边框*/
    	text-align:center;/*字体居中*/
    
    	
    }
    p{
    	text-indent:2em;
    	margin:10px 0px;
    	
    }
    #btnlist
    {
    	
        float:left;
    	margin:5px 10px;
    }
    #total{
    	float:left;
    	margin-left:200px;
    	overflow:hidden;
    }
    button{
    	width:300px;
    	margin-top:15px;
    }
    </style>
    <script type="text/javascript">
    window.onload=function()
    {
    	//1.创建一个广州节点点添加到#city下
    	myclick("btn01",function()
    	{
    		//创建一个li节点
    		var myli=document.createElement("li");
    		//创建一个文本节点
    		var mytext=document.createTextNode("广州");
    		//将广州文本节点插入到li中
    		myli.appendChild(mytext);
    		//将li插入到父节点#city中
    		//获取#city节点
    		var ct=document.getElementById("city")
    		ct.appendChild(myli);//语法：父节点.appendChild(子节点);
    		//说明:创建一个广州结点可以写成var myli=document.createElement("li");myli.innerHTML="广州";ct.appendChild(myli);
    		
    		});
    	//2.将广州节点插入到#bj前面
    	myclick("btn02",function(){
    		//获取#bj节点
    		var bjd=document.getElementById("bj");
    		//创建一个li节点
    		var myli=document.createElement("li");
    		//创建一个文本节点
    		var mytext=document.createTextNode("广州");
    		//将广州文本节点插入到li中
    		myli.appendChild(mytext);
    		//获取#city结点(city为父节点)
    		var ct=document.getElementById("city")
    		ct.insertBefore(myli,bjd);//语法：父节点.insertBefore(新节点,旧节点);
    		
    		});
    	//3.使用广州结点替换#bj节点
    	myclick("btn03",function(){
    		//获取#bj节点
    		var bjd=document.getElementById("bj");
    		//创建一个li节点
    		var myli=document.createElement("li");
    		//创建一个文本节点
    		var mytext=document.createTextNode("广州");
    		//将广州文本节点插入到li中
    		myli.appendChild(mytext);
    		//获取#city节点(city为父节点)
    		var ct=document.getElementById("city")
    		ct.replaceChild(myli,bjd);//语法：父节点.replaceChild(新节点,旧节点);
    		
    		});
    		//4.查找#city下的的所有li节点
    		myclick("btn04",function(){
    		
    		var ct=document.getElementById("city")
    		alert(ct.innerHTML);
    		
    		});
    		
    		//5.删除#bj节点
    		myclick("btn05",function(){
    		//获取#bj节点
    		var bjd=document.getElementById("bj");
    		//获取#city节点(city为父节点)
    		var ct=document.getElementById("city")
    		//删除北京节点
    		//写法一：ct.removeChild(bjd);//语法：父节点.removeChild(子节点)
    		//第二种写法
    		bjd.parentNode.removeChild(bjd);//语法：子节点.parentNode.removeChild(子节点)
    
    		});
    		//6.读取#city内的HTML代码
    		myclick("btn06",function(){
    		
    		var ct=document.getElementById("city")
    		alert(ct.innerHTML);
    		
    		});
    	//7.设置#city内的HTML代码
    	myclick("btn07",function(){
    		
    		var bjd=document.getElementById("bj")
    		bj.innerHTML="合肥";
    		
    		});
    };
    //idstr要绑定单击响应函数对象的id属性值
    //fun为事件回调函数，单击时此函数会被触发
    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>
    <br/></br/>
    </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">查找#city下的的所有li结点</button></div>
    <div><button  id="btn05">删除#bj结点</button></div>
    <div><button  id="btn06">读取#city内的HTML代码</button></div>
    <div><button  id="btn07">设置#bj内的HTML代码</button></div>
    </div>
    </body>
    </html>

![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70]: /images/20220412/b361b170195d45fe87f6be89c35c072b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 1]: /images/20220412/f5cd73e49d264f18bcc7c3956a716be0.png