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. 3.1 vue组件的使用

    1. 组件 组件: 组件是一个局部功能界面,它包含了所有要实现这个功能界面的相关资源,如css.html等. 组件化编程: vue文件包含3个部分 <template> <div&g ...

  2. 关于oracle函数listagg的使用说明

    做项目的过程中遇到过一个这样的需求,在“用户查询”前台加一个字段“用户角色”,要将用户的所有角色查询出来放到一个字段中,角色之间用“,”分隔. 发现一个办法是使用Oracle的listagg方法. W ...

  3. django信号 signal

    django自带一套信号机制来帮助我们在框架的不同位置之间传递信息.也就是说,当某一事件发生时,信号系统可以允许一个或多个发送者(senders)将通知或信号(signals)发送给一组接受者(rec ...

  4. linux学习笔记--程序与进程管理

    .工作管理 1.前台程序放后台程序  命令后 加  & 2.任务执行时将前台任务任务放到后台中并[暂停]  ctr + z 3.jobs 观察后台工作状态 及多少任务在执行,可以通过 help ...

  5. Oracle中判断(case when),截取(substr),位置(instr)用法

    转自:http://rainbowdesert.iteye.com/blog/1677911 博客分类: SQL   1.  判断(case when) SELECT col1, col2, CASE ...

  6. 几种RAID介绍(总结)

    概念 RAID是Redundent Array of Inexpensive Disks的缩写,简称为“磁盘阵列”.后来RAID中的字母I被改作了Independent,RAID就成了“独立冗余磁盘阵 ...

  7. 雷林鹏分享:XML 命名空间

    XML 命名空间 XML 命名空间提供避免元素命名冲突的方法. 命名冲突 在 XML 中,元素名称是由开发者定义的,当两个不同的文档使用相同的元素名时,就会发生命名冲突. 这个 XML 携带 HTML ...

  8. android -------- 蓝牙Bluetooth

    什么是蓝牙? 也可以说是蓝牙技术.所谓蓝牙(Bluetooth)技术,实际上是一种短距离无线电技术,是由爱立信公司公司发明的.利用“蓝牙”技术,能够有效地简化掌上电脑.笔记本电脑和移动电话手机等移动通 ...

  9. asyncio创建协程解析——分析廖雪峰的Python教程之创建WEB服务(转)

    第一步,搭建开发环境 所需第三方库: aiohttp,异步 Web 开发框架:jinja2,前端模板引擎:aiomysql,异步 mysql 数据库驱动 所需内置库: logging,系统日志:asy ...

  10. python 构造函数作用

    1. 构造函数的作用        构造函数主要用来在创建对象时完成对对象属性的一些初始化等操作, 当创建对象时, 对象会自动调用它的构造函数.一般来说, 构造函数有以下三个方面的作用:        ...