函数说明：
querySelector()：获取第1个元素
querySelectorAll()：获取元素列表
实例代码：
收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>querySelector和querySelectorAll方式</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h3>设置一个元素的样式</h3>
<button>querySelector方式</button>
<button>querySelectorAll方式</button>
<h3>批量设置多个元素的样式</h3>
<button>querySelectorAll方式</button>
<script>
var btn1 = document.getElementsByTagName('button')[0];
btn1.onclick = function () {
//QuerySelector方法，自动选取li数组的第1个元素
//返回的是一个对象，不是数组
document.querySelector('li').style.background = 'yellow';
//等价于：
// var li = document.getElementsByTagName('li')[0];
// li.style.background = 'yellow';
// 或者 document.getElementsByTagName('li')[0].style.background = 'yellow';
}
var btn2 = document.getElementsByTagName('button')[1];
btn2.onclick = function () {
//querySelectorAll方法，返回的是数组，加下标访问
document.querySelectorAll('li')[0].style.background = 'green';
}
var btn3 = document.getElementsByTagName('button')[2];
btn3.onclick = function () {
//querySelectorAll方法，返回的是数组
//循环遍历访问
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
//循环体内容
lis[i].style.background = 'blue';
}
}
</script>
</body>
</html>效果图：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
