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 ...
随机推荐
- 事物及exec
事物3要出不多讲: 1.BEGIN TRANSACTION--开启事务 2.COMMIT TRANSACTION--事务执行 3.ROLLBACK TRANSACTION--事务回滚 俩总捕捉事物的方 ...
- idea生成springBoot 报错403
问题: idea创建springboot失败 Initialization failed Cannot download 'https://start.spring.io': Status: 403 ...
- Error: Duplicate key name 'PCS_STATS_IDX' (state=42000,code=1061) ----Hive schematool -initSchema -dbType mysql
schematool -initSchema -dbType mysqlMetastore connection URL: jdbc:mysql://localhost/metastore_db?cr ...
- 转 oracle 默认自动统计信息 时间修改
############sql3: https://blog.csdn.net/dataminer_2007/article/details/41363417http://blog.51cto.com ...
- VS 开发中觉得不错的几款插件
1.C# Outline 2013 {}折叠 2.Indent Guides:为缩进添加竖直线 3.ResXManager:多语言资源文件编辑 4.C# Formatter:代码清理 5.Highl ...
- Flag-2019上半年
1.坚持做博客记录,把日常学习到的技能以日记的形势进行呈现,每周进行总结: 2.2月底完成吴老师的机器学习视频课程: 3.6月底完成吴老师的深度学习视频课程: 相信自己,可以的,半年后见!
- shell 重定向 1> 2> &>
0表示标准输入1表示标准输出2表示标准错误输出> 默认为标准输出重定向,与 1> 相同2>&1 意思是把 标准错误输出 重定向到 标准输出.&>file 意思是 ...
- .NET面试题2
常见面试题目: 1. 值类型和引用类型的区别? 2. 结构和类的区别? 3. delegate是引用类型还是值类型?enum.int[]和string呢? 4. 堆和栈的区别? 5. 什么情况下会在堆 ...
- 零基础逆向工程33_Win32_07_创建线程
1 什么是线程(Threads)? 什么是多线程? 怎么在windows中观察多线程? 线程可以简单理解为主程序为解决一个问题而选择的其中一条路线. 同理,多线程就是同时选择不同的路线来解决此问题. ...
- sharepoint2007就地升级2010系列(三)升级系统
OK,上两篇我们完成sharepoint2007的预览,以及升级前的补丁准备.今天我们来正式进行升级windows server系统以及SQL数据库 升级之前首先确定 search服务停止而且被禁用, ...