document.querySelector()和document.querySelectorAll()
一、总结
一句话总结：
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。而querySelectorAll() 则会返回匹配到的所有元素。CSS 选择器支持的语法，querySelector() 都可以使用。
1、获取文档中有 "target" 属性的第一个 <a> 元素？
document.querySelector("a[target]");
2、获取文档中 <h1> 或 <h2> 第一个匹配到的元素（多选择器用逗号”，“隔开）？
document.querySelector("h1, h2");
3、获取文档中一个class属性为"user-panel main"的div元素内包含一个name属性为"login"的input元素？
document.querySelector("div.user-panel.main input[name='login']");
二、document.querySelector()和document.querySelectorAll()用法
转自或参考：document.querySelector()和document.querySelectorAll()用法_小妖666个人笔记-CSDN博客
https://blog.csdn.net/weixin_38883338/article/details/88530299
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。而querySelectorAll() 则会返回匹配到的所有元素。
所以CSS 选择器支持的语法，querySelector() 都可以使用。下面例举了一些常用的用法：
实例：获取文档中第一个 <p> 元素
document.querySelector("p");
实例：获取文档中 id="demo" 的元素
document.querySelector("#demo");
实例：获取文档中 class="example" 的第一个元素
document.querySelector(".example");
实例：获取文档中有 "target" 属性的第一个 <a> 元素
document.querySelector("a[target]");
实例：获取文档中 <h1> 或 <h2> 第一个匹配到的元素（多选择器用逗号”，“隔开）
document.querySelector("h1, h3");
实例：获取文档中一个class属性为"user-panel main"的div元素内包含一个name属性为"login"的input元素
document.querySelector("div.user-panel.main input[name='login']");