querySelector()接受一个CSS选择符,返回匹配的第一个元素,反之则NULL。

如:

  var body = document.querySelector('body');

  var mydiv = document.querySelector('#mydiv');

  var myclass = document.querySelector('.selected');

以上三个用来代替getElementById()和getElementByTagName().

其次如果要限定范围查找  则可以

  var img = document.body.querySelector('img.button');

相对于querySelectorAll(); 则是取得一个NodeList

js之querySelector方法的更多相关文章

  1. 异步加载js文件的方法

    # 异步加载js文件 - js的加载默认是同步的,因为js是单线程执行,只能完成一件再执行下一件. - 一些外部引入的js文件可以因为文件太大,在加载资源的过程中会影响dom元素的加载,影响了用户体验 ...

  2. JS选择器querySelector和~All,三个原生选择器

    定义: querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素. 注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素.如果你需要返回所有的元素,请 ...

  3. 自动化测试中,元素无法点击定位等问题的解决:js的使用方法

    在自动化测试中经常会遇到使用selenium方法定位元素点击操作失败的情况,例如,我们想实现在浏览器输入http://www.baidu.com,进入百度首页后,鼠标悬停在“更多产品”上,点击“全部产 ...

  4. TODO:Node.js pm2使用方法

    TODO:Node.js pm2使用方法 pm2 是一个带有负载均衡功能的Node应用的进程管理器. 当你要把你的独立代码利用全部的服务器上的所有CPU,并保证进程永远都活着,0秒的重载, PM2是完 ...

  5. 【转载】JS中bind方法与函数柯里化

    原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情 ...

  6. 前端Js跨域方法汇总—剪不断,理还乱,是跨域

    1.通过jsonp跨域2.通过修改document.domain来跨子域(iframe)3.隐藏的iframe+window.name跨域4.iframe+跨文档消息传递(XDM)5.跨域资源共享 C ...

  7. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  8. JS调用OC方法并传值,OC调用JS方法并传值////////////////////////zz

     iOS开发-基于原生JS与OC方法互相调用并传值(附HTML代码)     最近项目里面有有个商品活动界面,要与web端传值,将用户在网页点击的商品id 传给客户端,也就是js交互,其实再说明白一点 ...

  9. 原生JS中apply()方法的一个值得注意的用法

    今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...

随机推荐

  1. Error: Program type already present: com.google.gson.FieldAttributes 的解决方法

    在app中的build.gradle中加入如下代码, configurations { all*.exclude group: 'com.google.code.gson' all*.exclude ...

  2. Django中ORM简介与单表数据操作

    一. ORM简介  概念:.ORM框架是用于实现面向对象编程语言种不同类型系统的数据之间的转换 构建模型的步骤:重点 (1).配置目标数据库信息,在seting.py中设置数据库信息 DATABASE ...

  3. Data Structure 基本概念

    数据(data) 描述客观事物的数值 数据项(data item) 具有原子性,不可分割的最小单位 数据元素(data element)集合的个体,通常由很多数据组成 数据对象(data object ...

  4. eclipse里安装SVN插件的两种方式

    eclipse里安装SVN插件,一般来说,有两种方式: 直接下载SVN插件,将其解压到eclipse的对应目录里 使用eclipse 里Help菜单的“Install New Software”,通过 ...

  5. 你想了解Go语言开发吗?

    大家先了解一下什么是Go语言? Go语言是谷歌2009发布的第二款开源编程语言.Go语言专门针对多处理器系统应用程序的编程进行了优化,使用Go编译的程序可以媲美C或C++代码的速度,而且更加安全.支持 ...

  6. python + lisp hy的新手注记1

    想在python里用lisp方言hy的目的: 1 用lisp去parse 包含 “数据+简单if控制流(代码.AST)”的配置文件,或者说用包含s-exp的.hy文件作为这类配置文件的实现(而不是用y ...

  7. 修改Anaconda中的Jupyter Notebook默认工作路径

    这二天,安装了anaconda想更改jupyter的工作路径,在网上找了一下 方式1. 打开Windows的cmd,在cmd中输入jupyter notebook --generate-config如 ...

  8. Study之6 Neutron(配置使用 Routing)-devstack

    ●Neutron 的路由服务是由 l3 agent 提供的. 除此之外,l3 agent 通过 iptables 提供 firewall 和 floating ip 服务. l3 agent 需要正确 ...

  9. 子数组最小值的总和 Sum of Subarray Minimums

    2018-09-27 23:33:49 问题描述: 问题求解: 方法一.DP(MLE) 动态规划的想法应该是比较容易想到的解法了,因为非常的直观,但是本题的数据规模还是比较大的,如果直接使用动态规划, ...

  10. js插件---bootstrap插件daterangepicker是什么

    js插件---bootstrap插件daterangepicker是什么 一.总结 一句话总结:日期段选择插件,也可选择日期 日期段选择插件,也可选择日期 1.daterangepicker 控件如何 ...