document.querySelector()和document.querySelectorAll()

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']");