1,querySelector() 方法返回匹配指定 CSS 选择器元素的第一个子元素 . 该方法只返回匹配指定选择器的第一个元素.如果要返回所有匹配元素,需要使用 querySelectorAll() 方法替代． 由于querySelector是按css规范来实现的,所以它传入的字符串中第一个字符不能是数字., 2, query选择符选出来的元素及元素数组是静态的,而getElement这种方法选出的元素是动态的.静态的就是说选出的所有元素的数组,不会随着文档操作而改变． 在使用的时候getE…

getElementBy系列 document.getElementsByTagName('tag'); document.getElementById('id'); document.getElementsByClassName('class'); 常见的获取元素的方法有3种,分别是通过元素ID.通过标签名字和通过类名字来获取. getElementById方法,这个方法将返回一个与之对应id属性的节点对象,它是document对象特有的函数,只能通过其来调用该方法,使用方法如下:docume…

获取元素DOM对象有很多种方法,以前一直在用getElementById和getElementsByTagName等,现在对这些方法和querySelector做一个总结． 常见的获取元素的方法有3种,分别是通过元素ID.通过标签名字和通过类名字来获取. DOM提供了一个名为getElementById的方法,这个方法将返回一个与之对应id属性的节点对象,它是document对象特有的函数,只能通过其来调用该方法,使用方法如下:document.getElementById('idName');…

之前,在JavaScript获取文档元素一文中,我曾介绍了获取文档元素的几种方法,最后一种方法是通过选择器获取文档元素.它的核心思想便是利用querySelector()或querySelectorAll()方法,进而对文档元素进行获取操作,而这两种方法之间的区别,正是本文要讲述的内容. querySelector().Document.Element类型均可调用该方法. HTML: <div id="item" class="className1">…

querySelector().Document.Element类型均可调用该方法. 当用Document类型调用querySelector()方法时,会在文档元素范围内查找匹配的元素:而当用Element类型调用querySelector()方法时,只会在这个元素的后代元素中去查找匹配的元素.若不存在匹配的元素,则这两种类型调用该方法时,均返回null. querySelectorAll().Document.DocumentFragment.Element类型均可调用该方法. querySe…

1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null.  2.querySelectorAll返回匹配的元素集合,如果没有匹配项,返回空的nodelist(节点数组). 可通过指定下标的方法获取某个的元素,例如document.querySelectorAll('.ubox')[0],表示获取第一个. 返回的结果是静态的,之后对document结构的改变不会影响到之前取到的结果.  这两个方法都可以接受三种类型的参数:id(#),class(.),标签,很像jque…

1.常见的获取元素的方法有3种,分别是通过元素ID document.getElementById('idName');.通过标签名字document.getElementsByTagName(tagName);和通过类名字document.getElementsByClassName('className');来获取. 2.querySelector(‘.className') 方法返回匹配指定 CSS 选择器元素的第一个子元素 . 该方法只返回匹配指定选择器的第一个元素.如果要返回所有匹配元…

一.querySelector() 的定义 querySelector() 方法选择指定 CSS 选择器的第一个元素 querySelectorAll() 方法选择指定的所有元素 二.与 getElementBy 的区别 这两个新添加的 API 与 getElementById() / getElementsByTagName() 有什么区别呢? 举个例子: HTML 代码: <ul> <li>111</li> <li>222</li> <…

在日常开发中,使用JavaScript获取元素的时候,最常用的方法就是document.getElementById(getXXXByXX)方法.但是最近发现有很多地方使用的是querySelector方法而不是使用前面的方法.去官方文档查看是这么说的: 文档对象模型Document引用的querySelector()方法返回文档中与指定选择器或选择器组匹配的第一个 html元素Element. 如果找不到匹配项,则返回null. 这句话看意思和getElementById(getXXXByXX…

querySelector 和 querySelectorAll 的使用非常的简单,就像标题说到的一样,它和 CSS 的写法完全一样,对于前端开发人员来说,这是难度几乎为零的一次学习.假如我们有一个 id 为 test 的 DIV,为了获取到这个元素,你也许会像下面这样: document.getElementById("test"); document.querySelectorAll("#test")[0]; 现在我们来试试使用新方法来获取这个元素: 比如接下来…

原生的强大DOM选择器querySelector 在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id 等方式来查找,这显然是远远不够的,如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式,或者使用某个库.事实上,现在所有的浏览器厂商都提供了 querySelector 和 querySelectorAll 这两个方法的支持,甚至就连微软也…

在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id 等方式来查找,这显然是远远不够的,如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式,或者使用某个库.事实上,现在所有的浏览器厂商都提供了 querySelector 和 querySelectorAll 这两个方法的支持,甚至就连微软也派出了 IE 8 作为支持这一特性的代表,quer…

在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id 等方式来查找,这显然是远远不够的,如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式,或者使用某个库.事实上,现在所有的浏览器厂商都提供了 querySelector 和 querySelectorAll 这两个方法的支持,甚至就连微软也派出了 IE 8 作为支持这一特性的代表,quer…

我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用呢? 首先,这个接口会返回一个对象实例. var obj=wx.createSelectorQuery(); 下面的就是返回的对象实例 obj 的所有内容. 返回的 obj 有五个方法: 1.  obj.in(component):没用过这个方法,多用于组件的选择器. 2.   obj.select…

一些好的博客 http://www.cnblogs.com/coding4/p/7809063.html canvas http://www.cnblogs.com/coding4/p/5593954.html 自己的原生js库. http://www.cnblogs.com/coding4/p/7872695.html js的点滴2 http://www.cnblogs.com/coding4/p/6721481.html mvvm的原理 https://segmentfault.com/a/…

##2017.10.30收集 面试技巧 5.1 面试形式 1)        一般而言,小公司做笔试题:大公司面谈项目经验:做地图的一定考算法 2)        面试官喜欢什么样的人 ü  技术好.自信.谦虚.善于沟通.表达. ü  喜欢追究原理 5.2 面试内容 1.2.1简历上的项目 ü  介绍下你的项目吧? 1)        第一步:介绍你项目是干嘛的 2)        第二步:介绍下你负责的是哪块 3)        第三步:介绍下里面都有什么功能,你是怎么实现的,怎么分层的? 1…

1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.getElementsByClassName("class名"); 3.通过元素标签去获取元素 document.getElementsByTagName("标签名"); 4.通过css选择器去获取元素 document.querySelectorAll("cs…

querySelector和querySelectorAll的用法和getElementBy大致一样,获取的时候带上符号,getElementBy获取的是元素的动态集合,querySelector获取的是元素的静态集合. 但是需要注意:getElementBy系列和querySelector系列的区别 比如,我们写一个for循环,每次获取li标签的时候,ul生成一个li子元素 <ul id="ul"> <li>a</li> <li>b&l…

参考 http://stackoverflow.com/questions/14377590/queryselector-and-queryselectorall-vs-getelementsbyclassname-and-getelementbyid 区别 querySelector是一个纯粹的CSS选择器 $()则是jQuery选择器 支持更多更高级的用法 比如:checked 另外CSS里面是 :first-child :nth-child(1) 而加Q里面则可以是 :first :las…

1. 通过类似于 document.getElementByTagName('div') 这种方式获取到的类数组,无法通过 forEach 进行遍历(可以通过for循环):而通过document.querySelectorAll(div)可以通过forEach 进行遍历. (1)首先看 getElementByTagName 的这种情况 网页表现 (2)然后看 querySelectorAll 的这种情况 网页表现 2. 通过 getElementBy** 获取这种方式获取到的数组是动态的:而…

querySelector 和  querySelectorAll 相比下面这些方法有什么区别? getElementsByTagName getElementsByClassName getElementsByName 1. W3C 标准 querySelectorAll 属于 W3C 中的 Selectors API 规范 .而 getElementsBy 系列则属于 W3C 的 DOM 规范 . 2. 浏览器兼容 querySelectorAll 已被 IE 8+.FF 3.5+.Safa…

querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.Opera. querySelector 和 querySelectorAll 在规范中定义了如下接口: module dom { [Supplemental, NoInterfaceObject] in…

zepto中的$(".111")出错,jQuery中$(".111")不出错的原因: zepto用document.querySelector实现,jQuery用document.getElementById实现. 二者区别:http://www.zhihu.com/question/24702250 1. W3C 标准querySelectorAll 属于 W3C 中的 Selectors API 规范 [1].而 getElementsBy 系列则属于 W3C…

"querySelector 属于 W3C 中的 Selectors API 规范 .而 getElementsBy 系列则属于 W3C 的 DOM 规范" 1.区别 getXXXByXXX 获取的是动态集合,querySelector获取的是静态集合. 简单的说就是,动态就是选出的元素会随文档改变,静态的不会,取出来之后就和文档的改变无关了. <ul> <li>aaa</li> <li>ddd</li> <li>…

一.概述 今天在看js的时候发现里面的代码基本上都是用querySelector()和querySelectorAll()来获取元素,就有点疑惑为什么不用getElementById(),可能也是因为自己没用过那两个,所以并不清楚原因所在. 参考手册上写querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素,并且其语法document.querySelector(CSS selectors)接收的参数,可以指定一个或多个匹配元素的 CSS 选择器,可以使用它们的 id,…

querySelector和getElementById通过id获取元素的区别 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="02E503E2A1C011CFC85B7B701A0677EC0900000000000001"></div> <script&g…

最近在做的项目中,使用querySelectorAll获取了同class名的元素后,绑定onmouseover事件和onmouseout后,多次在几个元素上移入移出操作时,控制台出现了报错的问题,最后解决方案时采用了getElementsBy系列的方法. 在查阅网络上的几篇相关的文章后,可以这样简单的解释两者的区别: getElementsBy系列返回值是一个动态的HTMLCollection对象集合,每一次调用 li 都会重新对文档进行查询: querySelector系列是一个静态的Node…

前言: 最近学到前端一些知识,看到很多视频上许多老师都用的是querySelector而部分老师用的是getElementById,我就很疑惑,这两有啥区别,都是选择器,于是百度了一下明白了,querySelector选出来的元素及元素数组是静态的,而getElementById这种方法选出的元素是动态的. 写了个例子 <ul> <li>1</li> <li>2</li> <li>3</li> </ul> &l…

1. 返回值:     getElements返回动态集合:       优: 首次查找效率高      缺: 可能造成反复查找DOM树    querySelector返回非动态集合:      优: 包含完整属性,无需反复查找DOM树      缺: 首次查找效率低 2. 易用性:    querySelector更灵活, 且更简单    getElements每次只能查找一种结果,无法设置查找条件,更繁琐 总结:     如果一次查找就能找到元素时,首选getElements    如果查…

<divid="test1"> <a href="http://www.hujuntao.com/">设计蜂巢</a> </div> <pid="bar">111</p> <script> var d1 = document.getElementById('test1'), obj1 = d1.querySelector('div a'), obj2 = d1.q…