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 ...
随机推荐
- jquery插件分页
收藏地址: http://www.jq22.com/yanshi5697
- 配置中心:Nacos, Apollo, Consul, Etcd
Nacos, Apollo, Consul, Etcd 服务.应用不同粒度的配置更丰富的路由规则集中式管理的动态参数规则
- 对Vue.js的认知
一.什么是MVVM? MVVM是Model-View-ViewModel的缩写.MVVM是一种设计思想.Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑:View 代表UI ...
- app常见测试点
安装与卸载: ●应用是否可以在IOS不同系统版本或android不同系统版本上安装(有的系统版本过低,应用不能适配) ●软件安装后是否可以正常运行,安装后的文件夹及文件是否可以写到指定的目录里. ●安 ...
- PlayMaker 对 PlayMakerFSM 里变量的操作
HutongGames.PlayMaker; //需要引用这个命名空间 红色的字体是对变量的操作,其他的没啥关系. #region 判断为 PlayMakerFSM 组件时 if (behaviour ...
- BuildAssetBundles文件打包
BuildAssetBundles文件打包: public class BuildAssetBundlesTest : Editor { //定义打包文件路径 public static string ...
- linux 统计TCP 连接各状态总数
netstat -n|awk '/^tcp/ {++s[$NF]} END {for(k in s) print k, s[k]}' 以前经常只是从笔记中复制下, 这次打算 研究下 awk 语法 . ...
- Java工具-检验ftp服务器的指定文件是否存在
项目工作中,需要检验ftp服务器中指定文件是否存在,在网上查阅了相关资料,可以通过ftpClient类进行实现. import org.apache.commons.net.ftp.FTP; impo ...
- 警告: [SetContextPropertiesRule]{Context} Setting property 'source' to 'org.eclipse.jst.jee.server:esignmanage' did not find a matching property.解决
1.开发环境: 环境:myeclipse2015+tomcat7+win10 2.异常: 偶尔在部署项目的时候回发现tomcat7部署后配置文件按照路径居然找不到自己的项目.httP://localh ...
- wpf 查找父元素、子元素方法
1 /// <summary> 2 /// 根据类型查找子元素 3 /// </summary> 4 /// <typeparam name="T"& ...