JavaScript学习-DOM扩展_选择符API

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
    }