JavaScript------querySelector/querySelectorAll的使用

1、基础语法

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。

querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。

属性:指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。

document.querySelector()
document.querySelectorAll()

2、项目实践

1、设置查询的底1个元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>这是一个 p 与元素。</p>
<p>这也是一个 p 与元素。</p>
<p>点击按钮修改文档中第一个 p 元素的背景颜色。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
    document.querySelector("p").style.backgroundColor = "red";
}
</script>
</body>
</html>

  

 

posted on 2024-05-29 09:28  昨夜小楼听风雨  阅读(23)  评论(0编辑  收藏  举报