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的更多相关文章

  1. DOM API querySelector与querySelectorAll的用法

    DOM API querySelector与querySelectorAll的用法:  http://www.qttc.net/201309371.html querySelectorAll与quer ...

  2. 强大的原生DOM选择器querySelector和querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  3. 原生JS强大DOM选择器querySelector与querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  4. 原生DOM选择器querySelector和querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  5. 跟随标准与Webkit源码探究DOM -- 获取元素之querySelector,querySelectorAll

    使用CSS选择器获取元素 -- querySelector,querySelectorAll(HTML5) 标准 W3C Selector API Level 1为Document,DocumentF ...

  6. 原生的强大DOM选择器querySelector - querySelector和querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  7. javascript DOM扩展querySelector()和和querySelectorAll()

    选在符的API的核心有两个方法:querySelector()和querySelectorAll() querySelector(a):a是一个css选择符,返回与该模式匹配的第一个元素,如果没有匹配 ...

  8. javascript选择器querySelector和querySelectorAll的使用和区别

    querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...

  9. js高级选择器querySelector和querySelectorAll

    querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...

  10. querySelector和querySelectorAll方法介绍

    module dom { [Supplemental, NoInterfaceObject] interface NodeSelector { Element querySelector(in DOM ...

随机推荐

  1. spring espect XX but YY

    注入和查找问题 HSF Consumer bean, 注入的是beanName='实际接口名', type='HSFSpringConsumerBean',  造成Autowire时查询出来的类型不匹 ...

  2. css连续的纯数字或字母强制换行

    white-space:normal; word-break:break-all; white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;w ...

  3. wget访问tomcat管理界面

    tomcat已经部署了管理界面,通过如下命令,将tomcat的状态信息打印到status.xml文件中,对于不方便使用浏览器访问该页面的情况,还是很有用的. wget http://localhost ...

  4. PCB的版本控制

    http://club.szlcsc.com/article/details_1783_1.html 转载自:http://www.amobbs.com/thread-5606014-1-1.html ...

  5. [转]jquery.pagination.js分页

    本文转自:http://www.cnblogs.com/knowledgesea/archive/2013/01/03/2841554.html 序言 这一款js分页使用起来很爽,自己经常用,做项目时 ...

  6. Linux 下 zip 文件解压乱码解决方案,ubuntu16.10亲测可用

    文章来源: https://www.zhihu.com/question/20523036 今天邮件中收到了一个压缩文件,解压后却是乱码,从网上也找了几个方法,目前这个方法还是比较可靠的,如下所示: ...

  7. 解决MyEclipse报errors running builder ‘javascript validator’ on project

    今天导入项目的时候,报了以下错误 MyEclipse测到功能代码变化(保存动作触发)就报错: errors running builder ‘javascript validator’ on proj ...

  8. .NET面试题3

    1.什么是拆箱和装箱? 2.什么是箱子? 3.箱子放在哪里? 4.装箱和拆箱有什么性能影响? 5.如何避免隐身装箱? 6.箱子的基本结构? 7.装箱的过程? 8.拆箱的过程? 9.下面这段代码输出什么 ...

  9. [转].NET Core配置文件加载与DI注入配置数据

    本文转自:http://www.cnblogs.com/skig/p/6079187.html .NET Core配置文件 在以前.NET中配置文件都是以App.config / Web.config ...

  10. php 设置虚拟目录

    php 设置虚拟目录两个步骤,很简单. 第一,打开安装apache目录下的conf下面的httpd.conf文件.   找到IfModule 标记, 再它下面添加红色方框中的内容.注意不能少东西.   ...