选择器 document.querySelector()

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
querySelectorAll() 方法返回文档中所有匹配指定 CSS 选择器的元素，语法跟jQuery类似，返回值是一个NodeList列表。

我们先来回顾一下获取页面中元素的几种方法：

获取 body 元素
获取 html 元素
通过 id 名
通过标签名
通过 class 名
通过 name 的值
匹配指定 CSS 选择器

对应的方法为：

document.body，获取 body 元素。

//获取body
var body = document.body;

document.documentElement，获取 html 元素。

//获取html
var html = document.documentElement;

document.getElementById("")，根据id获取元素，只能获取唯一一个，只能使用document获取。

document.getElementById("");
//根据id获取元素，只能获取唯一一个
//只能使用document获取

document.getElementsByTagName("")，根据标签名获取元素列表，是一个列表，这个列表类型是HTMLCollection HTML标签列表。获取元素列表可以根据父容器来获取。

var divs=document.getElementsByTagName("div");
//根据标签名获取元素列表，是一个列表
// 这个列表类型是HTMLCollection  HTML标签列表
// 获取元素列表是根据父容器可以获取的

打印出的结果如下：
在这里插入图片描述

document.getElementsByClassName("")，这个列表类型是HTMLCollection（HTML标签列表），也可以根据父容器获取子容器的所有class是什么的元素。

var divs=document.getElementsByClassName("divs");
// 这个列表类型是HTMLCollection  HTML标签列表
// 也可以根据父容器获取子容器的所有相同class元素

打印结果如下：
在这里插入图片描述

document.getElementsByName("")，获取的是NodeList列表，节点列表，只能使用document获取。

var ck=document.getElementsByName("sex");
// 获取的是NodeList列表  节点列表
// 只能使用document获取

打印结果如下：
在这里插入图片描述

除此之外，还有document.querySelector("")，根据选择器获取元素，并且只返回元素中的第一个

document.querySelector("div")
document.querySelector(".divs");//根据class
document.querySelector("#div");//根据id
var span=document.querySelector("#div1>.divs");
var span=document.querySelector("span.divs");
var input=document.querySelector("input[type=submit]");
//根据选择器获取元素，并且只返回元素中的第一个

document.querySelectorAll("")，根据选择器获取所有元素，是一个NodeList列表。

document.querySelectorAll("div");
// 根据选择器获取所有元素
// 获取的是NodeList列表  节点列表

打印结果如下：
document.quertSelectorAll

蒲公英芽

发布了46 篇原创文章 · 获赞 26 · 访问量 1万+

私信关注

选择器 document.querySelector()

猜你喜欢