dom查询

最新推荐文章于 2024-06-26 19:47:51 发布

dweblover

最新推荐文章于 2024-06-26 19:47:51 发布

阅读量1.9k

点赞数 3

分类专栏： JavaScript 文章标签： dom操作

本文链接：https://blog.csdn.net/dweblover/article/details/84779821

版权

JavaScript 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

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>

效果图如下

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>

效果图

dweblover

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
dom查询

1.dom元素查询以及结点查询&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;DOM查询练习&lt;/title&gt;&lt;style type="text/css"&gt;*{ margin:0px; }.i
复制链接

扫一扫

专栏目录