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. NETCORE openSUSE docker 安装

    openSUSE docker 安装https://www.jianshu.com/p/c725a06447d5 zypper命令使用示例https://www.cnblogs.com/linuxpr ...

  2. Linux安装Sqlmap等工具

    简单记录一下安装过程,都是小白教程,省的哪天又忘了要去百度. 1.下载sqlmap 源码进行安装 wget https://github.com/sqlmapproject/sqlmap/tarbal ...

  3. JS 中Math.ceil()、Math.floor()和Math.round()的区别

    var arg1 = 12.2; var arg2 = 12.5; var arg3 = 12.7; ceil():将小数部分一律向整数部分进位 var c1 = Math.ceil(arg1); v ...

  4. Win10通过SSH与树莓派Raspbain系统互传文件

    1.在Linux系统上安装ssh-server(由于Raspbain系统自带ssh-server,这个步骤可以省略) 查看ssh是否运行的命令: ps -ef | grep ssh 如果没有安装,则安 ...

  5. CAD安装失败怎样卸载CAD 2015?错误提示某些产品无法安装

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...

  6. [转]用JS获取地址栏参数的方法(超级简单)

    本文转自:http://www.cnblogs.com/fishtreeyu/archive/2011/02/27/1966178.html 方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用 ...

  7. Linux下wget下载软件小技巧以及安装jdk、tomcat与ftp服务器

    一.ftp的安装 装个ftp搞了一下午,感觉以前没那么麻烦的呀,结果到晚上才发现是实验室网的问题,换连手机的热点马上可以了,真是尴尬,把基本安装步骤记录一下: 1.检查安装vsftpd软件 使用如下命 ...

  8. DIV+CSS如何让图片和文字在同一行!

    在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新手都会遇到问题,我的解决方法有三: 1.添加CSS属性:vertical-align ...

  9. pop协议,邮件密码嗅探 使用说明

    思路与源代码 可以查看 https://www.cnblogs.com/likehc/p/10140174.html 因为软件用的是Wincap,所以 第一步安装下 WinPcap 第二步,打开 sn ...

  10. 粗看ES6之面向对象写法

    标签: es6 在es6以前,js没有类的概念,虽然有构造函数原型的方式用来做面向对向开发,但是对于书法并不是十分友好,而且对于继承实现也不是十分友好. es6引入class constructor ...