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");