document.querySelector() document.querySelectAll()

本文介绍了如何使用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



### Document.querySelectordocument.getElementById 的用法区别 `document.querySelector` 和 `document.getElementById` 都是用来获取文档中的元素,但是两者之间存在一些显著的区别。 #### 获取方式不同 - `document.getElementById` 只能通过 ID 属性来定位单个唯一的 HTML 元素。ID 应该在整个页面中唯一[^1]。 - `document.querySelector` 支持 CSS 选择器语法,可以基于标签名、类名、属性等多种条件查询第一个匹配的节点[^2]。 #### 返回值差异 - 使用 `document.getElementById` 方法返回的是具有指定 ID 的首个 Element 对象;如果找不到,则返回 null。 - 而对于 `document.querySelector` 来说,当没有找到任何符合条件的元素时也会返回 null,但如果找到了多个满足条件的元素它只会选取并返回其中的第一个。 #### 示例代码对比 使用 `getElementById` 获取元素: ```javascript var elementById = document.getElementById('uniqueId'); console.log(elementById); ``` 利用 `querySelector` 进行更灵活的选择操作: ```javascript // 根据 id 查询 var elementByIdSelector = document.querySelector('#uniqueId'); // 或者根据其他 css 选择符如 class name, tag name 等 var firstElementOfClass = document.querySelector('.className'); // 类名为 className 的第一个元素 var specificTag = document.querySelector('div'); // 文档流里遇到的第一个 div 标签 console.log(firstElementOfClass, specificTag); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值