querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。 目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。
W3C Selectors API querySelector 和 querySelectorAll 在规范中定义了如下接口： module dom { [Supplemental, NoInterfaceObject] interface NodeSelector { Element querySelector(in DOMString selectors);
NodeList querySelectorAll(in DOMString selectors); }; Document implements NodeSelector; DocumentFragment implements NodeSelector;
Element implements NodeSelector; }; 从接口定义可以看到Document、DocumentFragment、Element都实现了NodeSelector接口。即这三种类型的元素都拥有者两个方法。
querySelector和querySelectorAll的参数须是符合 css selector 的字符串。不同的是querySelector返回的是一个对象，querySelectorAll返回的一个集合(NodeList)。 获取页面I属性D为test的元素： document.getElementById("test");
//or
document.querySelector("#test");
document.querySelectorAll("#test")[0]; 获取页面class属性为”red”的元素: document.getElementsByClassName('red')
//or
document.querySelector('.red')
//or
document.querySelectorAll('.red')
示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body> <div class="con">
<div id="han">
12345678
</div>
</div> <div class="cont"> 12345678999999 </div> <p class="yi">1111111111111
</p> </body>
<script>
// var dataspan = new Date()*1;
// alert(dataspan); // ha = document.getElementById("han");
// alert(ha);
// // w = ha.innerHTML;
// // alert(w); // ha1 = document.getElementsByClassName('cont');
// alert(ha1);
// // g = ha.text;
// // alert(g);
// ha2 = document.querySelector(".cont");
// // hh = ha2.innerHTML; // alert(ha2); ha3 = document.querySelector(".yi");
alert(ha3);
// gg = ha3.innerHTML;
ha3.style.background="#f00";
ha3.style.color="#abcdef";
ha3.style.textAlign="center"; // alert(gg);
</script>
</html>