页面元素查找之Selectors API

DOM操作    

在HTML5之前，页面元素查找使用的是原生javascript的方法，主要有以下三个基本的操作方法

1.getElementById()： 查找指定id值的元素

2.getElementsByName()：查找指定name值得所有元素

3.getElementsByTagName()：查找指定标签名的所有元素

    这几个方法用起来也挺方便的，但是DOM操作的代价是非常高的，因为这会导致浏览器执行回流操作，而执行了过多的回流操作后，你会发现网站变得越来越慢了，用户体验也就下降了，所以要尽量减少DOM操作。

DOM操作实例

//取得ID为mydiv的元素
var myDiv=document.getElementById("#myDiv");

//取得name为myName的所有元素。
var myName=document.getElementsByName("myName");

//取得标签为li的元素
 var myLi=document.getElementsByTagName("li");

Selectors API

    HTML5中引入了Selectors API, Selectors API致力于让浏览器原生支持CSS查找。Selectors API与现在CSS中使用的选择规则一样，通过它可以查找页面中的一个或多个元素。Selectors API 中有两个基本操作

1.querySelector（）：根据参数中指定的选择规则，返回在页面中找到的第一个匹配元素

2.querySelectorAll（）：根据参数中指定的选择规则，返回在页面中找到的所有匹配元素

    Selectors API 函数还支持或操作：

//返回类名为first或second的第一个元素
var selector = document.querySelector（‘.first’，‘.second’）；

//返回类名为first或second的所有元素
var selector = document.querySelectorAll（‘.first’，‘.second’）；

    对于queryselector来说，选择的是满足规则中任意条件的第一个元素。对于querySelectorAll来说，页面中的元素只要满足规则中的任何一个条件，都会被返回。不同规则间用逗号隔开。

Selectors API实例

//取得li元素
 var body=document.querySelector("li");
 
//取得ID为mydiv的元素
var myDiv=document.querySelector("#myDiv");

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

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

//取得<div>中的所有em元素。
var ems=document.getElementById("myDiv").querySelectorAll("em");

//取得所有<p>元素中的所有<span>元素
var spans  = document.querySelectorAll("p span");