005-根据css选择器访问HTML元素

根据CSS选择器来访问HTML元素由document的如下方法提供支持。

  • Element querySelector(selectors); 该方法参数既可以是一个CSS选择器,也可以是用多个逗号隔开的多个CSS选择器,该方法返回HTML文档中第一个符合选择器参数的HTML元素。
  • NodeList querySelectorAll(selectors);该方法与前一个方法用法类似,只是该方法将返回所有符合CSS选择器的HTML元素。

对于指定了唯一的id属性值的HTML元素,既可以使用前面介绍的getElementById()方法来获取,也可以使用此处的querySelector()方法来获取,此处只要传入CSS的ID选择器即可。
下面代码示范了querySelector()用法。

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html"/>
		<title>根据ID访问HTML元素</title>
		<script type="text/javascript">
			var accessById = function(){
				alert(document.querySelector("#a").innerHTML+"\n"
				+document.querySelector("#b").value);}
		</script>
	</head>
	<body>
		<div id="a">test1</div>
		<textarea id="b" row="3" cols="25">这是一首简单的小情歌</textarea>
		
		<input type="button" value="访问两个元素" onclick="accessById()" />
	</body>
	
</html>

在这里插入图片描述
从上面代码可以看出,该示例与前一个示例基本相同,只是不再使用getElementById()方法来获取HTML元素,而是使用querySelector()方法来获取----由此处使用ID选择器来获取HTML元素,因此需要使用#idVal的形式。

下面代码示范了querySelectorAll()方法同时获取多个HTML元素情形。

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html"/>
		<title>根据ID访问HTML元素</title>
		<script type="text/javascript">
			var change = function(){
				var divList = document.querySelectorAll("div");
				alert(divList);
				for(var i in divList){
					divList[i].innerHTML = '测试内容'+i;
					divList[i].style.width = '300px';
					divList[i].style.height = '50px';
					divList[i].style.margin = '10px';
					divList[i].style.background='#faa';
				}
			}
		</script>
	</head>
	<body>
		<div ></div>
		<div ></div>
		<div ></div>
		<input type="button" name="sad" id="sad" value="修改全部div元素" onclick="change()" />
	</body>
	
</html>

在这里插入图片描述
上面页面代码中定义了3个<div……>元素,粗体字代码使用querySelectorAll(“div”)获取页面上所有<div……>元素,这样既可同时返回3个<div……>元素组成的nodeList。接下来程序采用循环遍历NodeList所包含的每哥HTML元素,并逐个修改他们的宽度、高度、背景色等。

在浏览器中浏览该页面,并单击页面上的按钮既可以看到如上效果。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值