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';
- }
DOM(三):querySelector和querySelectorAll的更多相关文章
- DOM API querySelector与querySelectorAll的用法
DOM API querySelector与querySelectorAll的用法: http://www.qttc.net/201309371.html querySelectorAll与quer ...
- 强大的原生DOM选择器querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- 原生JS强大DOM选择器querySelector与querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- 原生DOM选择器querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- 跟随标准与Webkit源码探究DOM -- 获取元素之querySelector,querySelectorAll
使用CSS选择器获取元素 -- querySelector,querySelectorAll(HTML5) 标准 W3C Selector API Level 1为Document,DocumentF ...
- 原生的强大DOM选择器querySelector - querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- javascript DOM扩展querySelector()和和querySelectorAll()
选在符的API的核心有两个方法:querySelector()和querySelectorAll() querySelector(a):a是一个css选择符,返回与该模式匹配的第一个元素,如果没有匹配 ...
- javascript选择器querySelector和querySelectorAll的使用和区别
querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...
- js高级选择器querySelector和querySelectorAll
querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...
- querySelector和querySelectorAll方法介绍
module dom { [Supplemental, NoInterfaceObject] interface NodeSelector { Element querySelector(in DOM ...
随机推荐
- http 协议的简单学习 虽然有点老但是 还不错
HTTP简介 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传送 ...
- Nvelocity中格式化金钱和日期
//格式化金钱( 9,999.00)function formatCurrency(num) { num = num.toString().replace(/\$|\,/g, ''); ...
- 未来HTML6出现的10个特性
网络技术正趋向于发展为一个巨大的移动APP市场,在Web开发的革命浪潮中起着指示性作用,自HTML引入以来,创建可转换,有新意的网络移动应用程序变得So easy,web开发中运用先进技术也很容易处理 ...
- STM32 从M3到M4
一 考虑STM32不同系列移植的外设资源情况: STM32微控制器应用的移植和兼容性指南AN3364 二 M4的DSP/FPU的使用方法https://blog.csdn.net/electrocra ...
- Surface Shader(表面着色器)
Shader "Custom/Surface_Shadeer" { Properties { ...
- (转)AIX下的MPIO、RDAC、SDDPCM多路径软件操作 (AIX下的MPIO,查看AIX下hdisk与盘柜卷lun的对应关系)
AIX下的MPIO.RDAC.SDDPCM多路径软件操作 (AIX下的MPIO,查看AIX下hdisk与盘柜卷lun的对应关系) 原文:http://blog.163.com/huangbao_007 ...
- Cloudera Kudu是什么?
不多说,直接上干货! Cloudera Kudu是什么? kudu是cloudera在2012开始秘密研发的一款介于hdfs和hbase之间的高速分布式列式存储数据库.兼具了hbase的实时性.hdf ...
- eclipse启动的时候报错An internal error occurred during: "Initializing Java Tooling"
eclipse ->windows ->Perspactive -> Reset perspactive 重置视图可以解决
- jq学习总结之方法
三.方法 1.length 2.index()3.get() reverse()4.not()5.filter()6.find()7.each()8.addBack()9.attr()10.toggl ...
- C# 字节数组和十六进制字符串之间转换的另类写法
今天从http://www.cnblogs.com/NanaLich/archive/2012/05/24/2516860.html看到的,记录下来 主要是XmlSerializationReader ...