【DOM扩展】选择符API

Selectors API是由W3C发起制定的一个标准,致力于让浏览器原生支持CSS查询
selectors API Level 1 的核心方法是两个:

  • querySelector()
  • querySelectorAll()

在兼容的浏览器中,可以通过Document及Element类型的实例调用它们。

目前已完全支持Selectors API Level 1 的浏览器由IE 8+、Firefox 3.5+、Safari 3.1+、Chrome和Opera 10+。

querySelector()方法

/**
 * querySelector()
 * param:接收一个CSS选择符
 * return:返回与该模式匹配的第一个元素;若没有找到匹配的元素,返回null
 */

//取得body元素
var body = document.querySelector("body");

//取得ID名为“myDiv”元素
var div = document.querySelector("#myDiv");

//取得类为“selected”元素
var selected = document.querySelector(".selected");

//取得类为“button”的第一个图像元素
var img = document.querySelector("img.button");

querySelectorAll()方法

/**
 * querySelectorAll()
 * param:接收一个CSS选择符
 * return:返回与该模式匹配的NodeList实例;若没有找到匹配的元素,返回null
 * 实际上,返回的值是带有所有属性和方法的NodeList,而其底层实现则类似一组元素的快照,
 * 而非不断的对文档进行搜索的动态查询。这样可以避免使用NodeList对象通常会引起的大多数性能问题。
 */

//取得某<div>中所有<em>元素(类似于getElementsByTagName("em")
var ems = document.getElementById("myDiv").querySelectorAll("em");

//取得类为“selected”的所有元素
var selecteds = document.querySelectorAll(".selected");

//取得所有<p>元素中的所有<strong>元素
var strongs = document.querySelectorAll("p strong");
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容