javascript 高级选择器:querySelector 和 querySelectorAll
2016-01-26 14:09
288 查看
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>
相关文章推荐
- 使用jqgrid从后台获取List后得到list的json字符串
- MVC表单提交加JS验证
- js中创建桌面网页快捷方式代码
- extjs getel 怎么用
- javascript 抽奖程序
- 原生javascript实现ajax 发送post请求
- JSON解析与生成
- JavaScript定时调用函数(SetInterval与setTimeout)
- js 格式华货币
- JS组件系列——使用HTML标签的data属性初始化JS组件
- JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
- js中的控制结构for-in语句
- JavaScript+html5 canvas制作的百花齐放效果完整实例
- JS面向对象及组件开发
- 60行JavaScript俄罗斯方块
- Json数据的序列化与反序列化的三种经常用法介绍
- JavaScript+html5 canvas绘制渐变区域完整实例
- Javascript中匿名函数的调用与写法实例详解(多种)
- JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
- js中的操作符