JavaScript学习-DOM扩展-选择符API
1,介绍
- 根据CSS选择符查询DOM文档中某个模式匹配的元素。
2,Selectors API Level 1
- 核心是两个方法:querySelector()和querySelectorAll()。通过Document及Element类型的实例调用它们。
querySelector()
- 参数接收一个CSS选择符,返回与该模式匹配的第一个元素,若没找到,返回null。
- 通过Document类型调用在文档元素的范围内,通过Element类型调用,在该元素后代元素范围内查找。
- 如果传入了不支持的选择符,会抛出错误。
代码示例:
//取得body元素 var body = document.querySelector("body"); //取得ID为“myDiv”元素 var myDov = document.querySelector("#myDiv"); //取得类为“selected”的第一个元素 var selected = document.querySelector(".selected"); //取的类为“button"的第一个图像元素 var img = document.body.querySelector("img.button");
querySelectorAll()
- 参数和返回值同querySelector()。
- 返回的是一个NodeList的实例。
- Document,DocumentFragment和Element可以调用querySelectorAll()方法。
代码示例
//取的某<div>中所有<em>元素 var ems = document.getElementById("myDiv").querySelectorAll("em"); //取的类为“selected”的所有元素 var selecteds = document.querySelectorAll(".selected"); //取的所有<p>元素中的所有<strong>元素 var strongs = document.querySelectorAll("p strong");
3,Selectors API Level 2
matchesSelector()
- 参数同上
- 支持Element调用,如果调用元素与该选择符匹配,返回true,返回false。
代码示例
if (document.body.matchesSelector("body.page1")){ //true }