【JavaScript小练习2】DOM查询

最新推荐文章于 2022-11-15 23:21:14 发布

Happy_Ranmo

最新推荐文章于 2022-11-15 23:21:14 发布

阅读量93

点赞数

分类专栏：前端小练习文章标签： js

本文链接：https://blog.csdn.net/m0_51252051/article/details/114339736

版权

前端小练习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.4 DOM查询

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>02_DOM查询</title>
</head>
<style>
	.{
		margin: 0;
		padding: 0;
	}
	#total{
		border-style: solid;
		border-width: 1px;
		width: 500px;
		position: absolute;
	}
	#city {
		list-style:none;
	}
	.inner li {
		border-style: solid;
		border-width: 1px;
		float: left;
		margin: 5px;
		padding: 5px;
		background: rgba(160,245,173,1.00);
	}
	.inner li:hover{
		background: rgba(94,177,255,1.00);
		display: block;
	}
	
	#right{
		position: absolute;
		left: 550px;
		width: 200px;
	}
	#right button{
		width: 200px;
	}
</style>


	
<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>
			<ul>
				gender:
				<input type="radio" name="gender" value="male" />
				male:
				<input type="radio" name="gender" value="female" />
				<br>
				hhhhhh:
				<input type="text" id="username" value="abcde"/>
			</ul>
		</div>
		
	</div>
	<div id="right">
		<button id="btn01">查找#bi节点</button>
		<button id="btn02">查找所有li节点</button>
		<button id="btn03">查找name=gender的所有节点</button>
		<button id="btn04">查找#city下的所有li节点</button>
		<button id="btn05">返回#city下的所有子节点</button>
		<button id="btn06">获取#username的value，并更改</button>
		<button id="btn07">测试</button>
	</div>
</body>
	
<script type="text/javascript">
	
		
	var myclick = function(btn,fun){
		var btn = document.getElementById(btn);
		btn.onclick = fun;
	}
		
	//查找#bi节点
	myclick("btn01",function(){
		var bj = document.getElementById("btn01");
		alert(bj);
	});
	
	//查找所有li节点
	myclick("btn02",function(){
		var li = document.getElementsByTagName("li");
		for(i=0;i<li.length;i++){
			alert(li[i].innerHTML);
		};
	});
	
	//查找name=gender的所有节点
	var btn03 = document.getElementById("btn03");
	btn03.onclick = function(){
		var inputs = document.getElementsByName("gender");
		for(i=0;i<inputs.length;i++){
			alert(inputs[i].value);
		}
	};
	
	//查找#city下的所有li节点
	myclick("btn04",function(){
		var cityli = document.getElementById("city").getElementsByTagName("li");
		btn04.onclick = function(){
			for(i=0;i<cityli.length;i++)
			alert(cityli[i].innerHTML);
		}
	})
	
	//返回#city下的所有子节点---------childNodes属性会获取包括文本节的所有节点,DOM标签标签间空白也会当成文本节点。
	//-----------------------------children只会获取子元素
	//-----------------------------firstChild可以获取当前元素的一个子节点，包括空白文本-----lastChild
	//-----------------------------firstElementChild获取当前元素的所有子元素
	//-----------------------------parentNode返回一个父节点 
	//-----------------------------previousSibling 返回当前元素的前一个兄弟节点(含空白文本)  previousElementSibling无空白
	myclick("btn05",function(){
		var allcity = document.getElementById("city").childNodes;  
		btn05.onclick = function(){
			for(i=0;i<allcity.length;i++)
			console.log(allcity[i].innerHTML);   //innerText不带标签，innerHTML带标签
		}
	})
	
	//获取#username的value，并更改
	myclick("btn06",function(){
		var text = document.getElementById("username");
		btn06.onclick = function(){
			alert(text.value);
			text.value = "哈哈哈哈哈";
		}
	})
	
	
	
		
	
</script>
</html>

Happy_Ranmo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【JavaScript小练习2】DOM查询

1.4 DOM查询<!doctype html><html><head><meta charset="utf-8"><title>02_DOM查询</title></head><style> .{ margin: 0; padding: 0; } #total{ border-style: solid; border-width: 1px; width: 500px;
复制链接

扫一扫

专栏目录