DOM(三)：querySelector和querySelectorAll

querySelector()方法
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');

 

querySelectorAll()方法
querySelectorAll()方法接收的参数与querySelector()方法一样，都是一个css选择服，但返回的是所有匹配的元素而不仅仅是一个元素。
这个方法返回的是一个NodeList实例

//取得某<div>中的所有<em>元素（类似于getElementsByTagName('em')）
var ems = document.getElementById('myDiv').querySelectorAll('em');

//取得类为'selected'的所有元素
var selecteds = document.querySelectorAll('.selected');

//取得所有<p>元素的所有<strong>元素
var strongs = document.querySelectorAll('p strong');

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

var i,len,strong;
for(i=0; len=strongs.length; i<len; i++){
    strong = strongs[i]; //或者strongs.item(i)
    strong.className = 'import';
}