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 ...
随机推荐
- OSGi中的ServletContext
在OSGi中,不能的bundle分属不同的装载器(Class Loader), 在J2EE 应用中,不同BUNDLE 中的JSP 所相应的ServletContext对象不同,这与通常情况下的应用是不 ...
- LINUX下添加磁盘空间的方法详解
给Linux系统添加磁盘空间在工作会经常遇到. 在添加第二块磁盘一般系统默认为hdb(IDE硬盘)sdb(SCSI 硬盘),以hdb为例. linux-isep:~ # fdisk /dev/hdb ...
- 源码编绎的时候报错 tengine-2.1.0 error: the HTTP rewrite module requires the PCRE library.
./configure: error: the HTTP rewrite module requires the PCRE library. You can either disable the mo ...
- maven(4)------maven核心pom.xml文件常用元素分析
在maven项目中,pom文件是核心文件 pom.xml: <?xml version="1.0" encoding="UTF-8"?> <p ...
- Maven工程pom.xml文件秒变gradle工程的命令
下面是一个maven工程,我想把它转成gradle项目,怎么办? 打开cmd命令行窗口,切换到你的maven工程的pom.xml文件所在目录,然后执行如下命令: gradle init --type ...
- 启用div作为编辑器 添加contentEditalbe = “true”，如何让在Html中特殊字符不被转义
今天项目中碰到了两个难以解决的问题,一个是ctrl + enter键换行,enter键发送和支持html特殊字符的发送,二人会话和群会话都必须支持,发送短信的模块也必须支持特殊的字符,但是现在碰到的问 ...
- 【转】python多版本并存，python3安装pip
python3 与 pip3 安装与使用 1. yum -y install openssl* (pip依赖ssl环境) 2.编译安装python3 下载地址:https://www.python ...
- Linux下crontab内环境变量与Shell环境变量的关系【转】
crontab,总是不会缺省的从用户profile文件中读取环境变量参数 经常导致在手工执行某个脚本时是成功的,但是到crontab中试图执行时就会报错. 解决办法如下: 方法一:在shell文件中获 ...
- LeetCode: Populating Next Right Pointers in Each Node II 解题报告
Populating Next Right Pointers in Each Node IIFollow up for problem "Populating Next Right Poin ...
- Makefile初探
选择一个目录创建一个Makefile文件: 注意第二行的开头需要时TAB建空开,不要用空格 执行make make的时候,无论你创建的是makefile还是Makefile都可以识别 ,不在乎开头的字 ...