querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
这个真的不是我想的那么简单呀呀呀，可以直接控制台输出也可以进行定义选择要输出的元素，在进行颜色定义，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
//这里就是控制台输出然后输出格式是定义的完整句式全部输出
<div id="contatiner">huang</div>
<script>
var destination=document.querySelector("#contatiner");
console.log(destination);//输出的结果为 <div id="contatiner">huang</div>
</script>
</body>
</html>
然后这里是相关的引用就是红红的框框进行突出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a[target]{
background-color:yellow;
}
</style>
</head>
<body>
<!-- querySelector()只能获取第一个元素-->
<!-- 获取文档中第一个p元素 -->
<p>这是第一个P与元素</p>
<p>这也是一个p与元素</p>
<p>点击按按钮修改文档中第一个p与元素的背景颜色</p>
<button onclick="myfunction()">点击我</button>
<script>
function myfunction(){
document.querySelector("p").style.background="red";
}
//也可以这样子写
var desination=document.querySelector("p")
console.log(desination);//但这里是控制台输出，然后输出格式是 <p>这是第一个P与元素</p>
</script>
<!-- 获取文档中class="example"的第一个exmple元素 -->
<h1 class="example">class="example"的标题</h1>
<p class="example">class="example"的段落</p>
<p>点击按钮为第一个class="example"的元素添加背景颜色</p>
<button onclick="bbtn()">点我</button>
<script>
function bbtn(){
document.querySelector(".example").style.background="red";
}
</script>
<!-- 获取文档中calss="example"中的第一个<p>元素 -->
<h2 class="example">class="example"的标题</h2>
<p1 class="example">class="example"的段落</p1>
<p>点击按钮为第一个class="example"的元素添加背景颜色</p>
<button onclick="btn()">点我</button>
<script>
function btn(){
document.querySelector("p1.example").style.background="red";
}
</script>
<!-- 假定你选择了两个选择器: <h3> 和 <h4> 元素,以下代码将为文档的第一个 <h3> 元素添加背景颜色： -->
<h3> h3 元素</h3>
<h4> h4 元素</h4>
<script>
document.querySelector("h3,h4").style.backgroundColor = "red";
</script>
<!-- 但是，如果文档中 <h6> 元素位于 <h5> 元素之前，<h6> 元素将会被设置指定的背景颜色。 -->
<h6>h6元素</h6>
<h5>h5元素</h5>
<script>
document.querySelector("h5,h6").style.backgroundColor="red";
</script>
<!-- 获取文档中有 "target" 属性的第一个 <a> 元素： -->
<p>CSS选择器a[target]确保所有有target属性的链接背景颜色为黄色：</p>
<a href="//www.w3csschool.cc">w3csschool.cc</a>
<a href="//www.disney.com" target="_blank">disney.com</a>
<a href="//www.wikipedia.org" target="_top">wikipedia.org</a>
<p>点击按钮为带有target属性连接添加红色背景</p>
<button onclick="myFunction()">点击</button>
<script>
function myFunction(){
document.querySelector("a[target]").style.border="10px solid red"
}
</script>
</body>
</html>
版权声明：本文为weixin_51855195原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。