【选择符 API】querySelector() 方法 - xiaoxustudy

querySelector() 方法接收一个 CSS 选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回 null。

下面实现一个点击粉色盒子出现 “你好~” 文本。

例 1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>API选择符</title>
		<style>
			#myDiv{
				width: 100px;
				height: 100px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div id="myDiv" onclick="fn()"></div>
		<script>
			function fn(){
				document.querySelector("#myDiv").innerHTML = "你好~";
			}
		</script>
	</body>
</html>

点击粉色盒子之后：

例 2

点击粉色盒子之后：

下面实现点击按钮之后第一个 p 元素的背景颜色变成粉色。

例 3

点击按钮之后：

第一个 p 元素的背景颜色变了。

例 4

点击按钮之后：

类为 sty1 的第一个 p 元素的背景颜色变为 greenyellow。

通过 Element 类型调用 querySelector() 时，会在元素后代元素的范围内查找匹配的元素。

例 1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>API选择符</title>
	</head>
	<body>
		<div id="myDiv">
			<p>你好~</p>
			<p class="sty1">我是小许</p>
			<p class="sty1">i am coding</p>
			<button onclick="fn()">点击</button>
		</div>
		<script>
			function fn(){
				var a = document.getElementById("myDiv");
				a.querySelector("p.sty1").style.backgroundColor = "greenyellow";
			}
		</script>
	</body>
</html>

点击按钮之后：

posted on 2020-05-11 15:14 xiaoxustudy 阅读(519) 评论(0) 收藏举报

刷新页面返回顶部