querySelector()//querySelectorAll()是一种很方便的在页面中选取元素的方法. 前者只返回页面中第一个匹配的元素（以文档顺序），而后者可以选取页面中所有匹配的元素。
1.首先，我们来回顾一下DOM定义的其它几种选取元素的方式
1.1 用指定的id属性
收藏
var id = document.getElementById('id');1.2 用指定的name属性
var name = document.getElementByName('name');note：针对HTML文档可用，对xml文档不可用。在ie中，getElementByName()也返回id属性匹配指定值的元素，为了兼容，应该小心谨慎，不要让name和id同名。并且name属性只在少数html元素中有效，包括表单，表单元素，<iframe>和<img>元素。
1.3 用指定的标签名字
var p = document.getElementByTagName('p')[i];
var allElement = document.getElementByTagName('*') //传入通配符将获得一个代表文档中所有元素的节点（nodelist）
对象。1.4通过css类选取元素(html的class属性值）
var class = document.getElementByClassName('class')2 通过css选择器选取元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jq初体验</title>
<style>
body {
margin: 0;
padding: 0;
}
div{
margin: 50px auto;
width: 250px;
height: 250px;
text-align: center;
}
img {
display: block;
margin: 0 auto;
}
button {
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<div>
<img src="1.jpg" alt="" width="200">
<button id="a">A</button>
<button id="b">B</button>
<button id="c" class="CC">C</button>
<button id="d">D</button>
</div>
<script>
// //querySelector(cssSelector) 和 querySelectorAll(cssSelector)
var a = document.getElementById('a'); //获取a按钮（id方式）
a.onclick = function () {
// //用css选择器的方式来获取js对象[见图1]
document.querySelector('img').style.borderRadius = '150px'
}
var b = document.getElementsByTagName('button')[1];//获取b按钮（标签方法）
b.onclick = function () {
//选取了第一个匹配的button元素，将a按钮变蓝[见图2]
document.querySelector('button').style.backgroundColor = 'blue'
}
var c = document.getElementsByClassName('CC')[0];//获取c按钮（class属性）
c.onclick = function () {
//将c按钮文字变绿[见图3]
document.querySelector('button[class]').style.color = 'green'
}
var d = document.getElementById('d') //获取d按钮
d.onclick = function () {
//可以为所有的button循环添加样式，省去了遍历元素[见图4]
var btn = document.querySelectorAll('button')
var len =btn.length;
for (var i=0; i<len; i++ ){
btn[i].style.backgroundColor = 'red'
}
}
</script>
</body>
</html>原网页：
图1：
图2：
图3
图4：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
