document.querySelector() document.querySelectAll()

最新推荐文章于 2025-07-07 16:36:50 发布

zhanglongdream

最新推荐文章于 2025-07-07 16:36:50 发布

阅读量4.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/zhanglongdream/article/details/76522294

js 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何使用document.querySelector和document.querySelectorAll方法来选取HTML文档中的元素。详细解释了这两个方法的用法，包括它们如何处理选择器及返回结果的形式，并提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

document.querySelector()

  返回文档中陪陪指定的选择器的第一个元素（使用深度优先先序遍历文档的节点|并且通过文档标记中的第一个元素，并按照子节点数量的顺序迭代顺序节点）。

element = document.querySelector(selectors)

element 是一个element对象(Dom元素)

selectors是一个字符串，包含一个或者多个css选择器，多个则以逗号分开。。

兼容到IE8 ，

例子

var el = document.querySelector(".myclass");

    <div id="div" class="longdiv">
    	<input name="login" type="text" />
    </div>
	var el = document.querySelector('#div.longdiv input[name=login]')
		console.log(el)

这里有几个注意点：

如果没有找到匹配的元素，就会返回null，如果找到多个匹配元素，就会返回第一个元素

选择器的名字必须是合法的其中css伪类是不会返回的

document.querySelectorAll()
       返回与指定的选择器匹配的文档中的元素列表，返回的是一个nodeList

elementList = dcument.querySelectorAll(selectors)

elementList 是一个nodeList类型的对象

selectors 是一个由逗号链接的包含一个或者多个css选择器的字符串

ps 注意

如果selectors中包含有css伪元素，则会返回一个空的elementList.

例子

var matches = document.querySelectorAll("div.note, div.alert");

兼容到IE8