JS Selectors API

Selectors API是由w3c发起的一个标准，致力于让浏览器原生支持CSS查询。Selectors API的两个核心方法：querySelector()和querySelectorAll()。

1.querySelector()方法
该方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。
  
//取得body元素
 var body=document.querySelector("body");
 
//取得ID为mydiv的元素
var myDiv=document.querySelector("#myDiv");

//取得类为“Selected”的第一个元素
var selected = document.querySelector(".selected");

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

2.querySelectorAll()方法

querySelectorAll方法接收的参数与querySelector()方法一样，都是一个css选择符，但是返回的是NodeList的实例。如果没有找到匹配的元素，NodeList就是空的。
 //取得<div>中的所有em元素。
var ems=document.getElementById("myDiv").querySelectorAll("em");

//取得所有<p>元素中的所有<strong>元素

var strong  = document.querySelectorAll("p strong");

要取得返回的NodeList中的每一个元素，可以使用item()方法，也可以使用方括号