本章内容
理解Selectors API
使用HTML5 DOM 扩展
尽管DOM API 已经相当不错,但仍然不断有标准或专有的扩展出现,以支持更多功能。2008 年以
前,大部分浏览器对DOM的扩展是专有的。此后,W3C 开始着手将这些已成为事实标准的专有扩展编
制成正式规范。
基于以上背景,诞生了描述DOM扩展的两个标准:Selectors API 与HTML5。这两个标准体现了社
区需求和标准化某些手段及API 的愿景。另外还有较小的Element Traversal 规范,增加了一些DOM属性。
专有扩展虽然还有,但这两个规范(特别是HTML5)已经涵盖其中大部分。本章也会讨论专有扩展。
本章所有内容已经得到市场占有率名列前茅的所有主流浏览器支持,除非特别说明。
Selectors API
JavaScript 库中最流行的一种能力就是根据CSS 选择符的模式匹配DOM 元素。比如,jQuery 就完全
以CSS 选择符查询DOM获取元素引用,而不是使用getElementById()和getElementsByTagName()。
Selectors API(参见W3C 网站上的Selectors API Level 1)是W3C 推荐标准,规定了浏览器原生支
持的CSS 查询API。支持这一特性的所有JavaScript 库都会实现一个基本的CSS 解析器,然后使用已有
的DOM 方法搜索文档并匹配目标节点。虽然库开发者在不断改进其性能,但JavaScript 代码能做到的
毕竟有限。通过浏览器原生支持这个API,解析和遍历DOM 树可以通过底层编译语言实现,性能也有
了数量级的提升。
Selectors API Level 1 的核心是两个方法:querySelector()和querySelectorAll()。在兼容浏
览器中,Document 类型和Element 类型的实例上都会暴露这两个方法。
Selectors API Level 2 规范在Element 类型上新增了更多方法,比如matches()、find()和
findAll()。不过,目前还没有浏览器实现或宣称实现find()和findAll()。
querySelector()
querySelector()方法接收CSS 选择符参数,返回匹配该模式的第一个后代元素,如果没有匹配
项则返回null。下面是一些例子:
// 取得元素
let body = document.querySelector(“body”);
// 取得ID 为"myDiv"的元素
let myDiv = document.querySelector(“#myDiv”);
// 取得类名为"selected"的第一个元素
let selected = document.querySelector(“.selected”);
// 取得类名为"button"的图片
let img = document.body.querySelector(“img.button”);
在Document 上使用querySelector()方法时,会从文档元素开始搜索;在Element 上使用
querySelector()方法时,则只会从当前元素的后代中查询。
用于查询模式的CSS 选择符可繁可简,依需求而定。如果选择符有语法错误或碰到不支持的选择符,
则querySelector()方法会抛出错误。
javascript基础学习系列五百三十二:DOM 扩展
最新推荐文章于 2024-08-14 15:45:18 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)