javascript 高级选择器:querySelector 和 querySelectorAll
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>
javascript 高级选择器:querySelector 和 querySelectorAll的更多相关文章
- javascript高级选择器querySelector和querySelectorAll
querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...
- 高级选择器querySelector和querySelectorAll
Javascript新提供的querySelector和querySelectorAll方法,是仿照CSS选择器功能编写的 querySelector 功能:该方法返回满足条件的单个元素.按照深度优先 ...
- 【前端】强大的javascript原生选择器querySelector 和 querySelectorAll
querySelector 和 querySelectorAll 在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 D ...
- js高级选择器querySelector和querySelectorAll
querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...
- javascript选择器querySelector和querySelectorAll的使用和区别
querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...
- 重要选择器querySelector和querySelectorAll
他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.Opera. queryS ...
- 强大的原生DOM选择器querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- javaScript中的querySelector()与querySelectorAll()的区别
之前,在JavaScript获取文档元素一文中,我曾介绍了获取文档元素的几种方法,最后一种方法是通过选择器获取文档元素.它的核心思想便是利用querySelector()或querySelectorA ...
- 原生JS强大DOM选择器querySelector与querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
随机推荐
- 记一次Animator状态快速切换问题的解决
事情是这样的,我尝试在一帧内多次切换一些状态(当前状态为Idle的情况下): public Animator animator; void OnEnable() { animator.CrossFad ...
- 删除计算机里设备和驱动器中的爱奇艺、PPS、百度云、360云盘图标
转自:http://jingyan.baidu.com/article/86f4a73e59bb3037d6526936.html 点击"开始"找到"运行" 输 ...
- TensorFlow人脸识别
TensorFlow框架做实时人脸识别小项目(一)https://blog.csdn.net/Goerge_L/article/details/80208297 TensorFlow框架做实时人脸识别 ...
- java NIO中的buffer和channel
缓冲区(Buffer):一,在 Java NIO 中负责数据的存取.缓冲区就是数组.用于存储不同数据类型的数据 根据数据类型不同(boolean 除外),提供了相应类型的缓冲区:ByteBufferC ...
- Java 9和Java 10的新特性
http://www.infoq.com/cn/news/2014/09/java9 Java 9新特性汇总 继2014年3月份Java 8发布之后,Open JDK加快了开发速度, Java 9的发 ...
- 安卓开发之Toolbar
根据官网的教程,发现实现与预期不一致,查看相关资料自己整理了一下(官网开发文档:https://developer.android.com/training/appbar/setting-up.htm ...
- [转]一步一步部署SSIS包图解教程
本文就SQL统计分析SSIS包的部署进行一次详细的部署图解教程,Sql Server Integration Services 提供了非常简单的部署工具,利用这些工具可以方便地将包文件(*.dtsx) ...
- VBA学习笔记(6)--抽取第一列中叫“虹虹”的个人信息
说明(2017.3.25): 1. 知识点为dim arr2(1 to 1000, 1 to 4)先定义一个足够大的二维数组,不然后面需要transpose转置成一维数组. '抽取列表中叫“虹虹”的所 ...
- PHP的HashTable实现
转载自: http://it.taocms.org/07/1145.htm 数据结构: HashTable数据结构的描述在Zend/zend_hash.h文件中.首先,HashTable中的每一个元素 ...
- 关于listView的item失去焦点不能点击 Item中包含Button 导致抢占焦点
今天发现一个问题.listView的item点击以后进入到下一个页面,下个页面有个返回按钮,直接返回回去以后点击事件不能触发,滑动或者重新打开这个listView,就可以达到原来的效果.后来发现是因为 ...