queryselector怎么用（再谈querySelector和querySelectorAll的区别与联系）

本文目录

• 再谈querySelector和querySelectorAll的区别与联系
• Javascript里面的querySelector选择的内容是什么
• jquery怎么表达document.queryselector
• document.querySelector这个是什么函数
• JavaScript里的document.querySelectorAll()是什么意思
• queryselector怎么用
• 使用querySelector添加移除style和class

再谈querySelector和querySelectorAll的区别与联系

先按W3C的规范来说这两个方法应该返回的内容吧：
querySelector：
return the first matching Element
node within the node’s subtrees. If there is no such node, the method must
return null.（返回指定元素节点的子树中匹配selector的集合中的第一个，如果没有匹配，返回null）
querySelectorAll：
return a NodeList containing
all of the matching Element nodes within the node’s subtrees, in document order.
If there are no such nodes, the method must return an empty NodeList.
（返回指定元素节点的子树中匹配selector的节点集合，采用的是深度优先预查找；如果没有匹配的，这个方法返回空集合）
使用方法：
复制代码
代码如下:
var element =
baseElement.querySelector(selectors);
var elementList =
baseElement.querySelectorAll(selectors);
这在BaseElement
为document的时候，没有什么问题，各浏览器的实现基本一致；但是，当BaseElement 为一个普通的dom Node的时候（支持这两个方法的dom
Node），浏览器的实现就有点奇怪了，举个例子：
复制代码
代码如下:
《div class="test" id="testId"》
《p》《span》Test《/span》《/p》
《/div》
《script type="text/javascript"》
var testElement=
document.getElementById(’testId’);
var element =
testElement.querySelector(’.test span’);
var elementList =
document.querySelectorAll(’.test span’);
console.log(element); //
《span》Test《/span》
console.log(elementList); // 1
《/script》
按照W3C的来理解，这个例子应该返回：element：null；elementList：;因为作为baseElement的
testElement里面根本没有符合selectors的匹配子节点；但浏览器却好像无视了baseElement，只在乎selectors，也就是说此时baseElement近乎document；这和我们的预期结果不合，也许随着浏览器的不断升级，这个问题会得到统一口径！
人的智慧总是无穷的，Andrew
Dupont发明了一种方法暂时修正了这个怪问题，就是在selectors前面指定baseElement的id，限制匹配的范围；这个方法被广泛的应用在各大流行框架中；
Jquery的实现：
复制代码
代码如下:
var oldContext = context,
old =
context.getAttribute( "id" ),《BR》 nid = old || id,
try {
if (
!relativeHierarchySelector || hasParent ) {
return makeArray(
context.querySelectorAll( " " + query ), extra );
}
}
catch(pseudoError) {} 《BR》finally {
if ( !old )
{oldContext.removeAttribute( "id" );}
}
先不看这点代码中其他的地方，只看他如何实现这个方法的；这点代码是JQuery1.6的片段；当baseElement没有ID的时候，给他设置一个id
= "__sizzle__”，然后再使用的时候加在selectors的前面，做到范围限制；context.querySelectorAll( "[id=’" +
nid + "’] " + query
；最后，因为这个ID本身不是baseElement应该有的，所以，还需要移除：oldContext.removeAttribute( "id" );

Javascript里面的querySelector选择的内容是什么

选择的是CSS选择器，例如id就是“#”，class就是“.”

document.querySelector(’p’);
//获取所有的p元素
document.querySelector(’#p’);
//获取id=p
document.querySelector(’.p’);
//获取class=p
document.querySelector(’’);
//获取p=p
document.querySelector(’p》p’);
//获取p元素的子p元素

jquery怎么表达document.queryselector

$("xxx") ===   document.queryselector("xxx");

document.querySelector这个是什么函数

getElementsByClassName()是HTML5新增的DOMAPI。IE8以下不支持。对于现代浏览器开发，还可以使用querySelector()和querySelectorAll()。他们的功能更加强大。=======================附注=========================解释：getElementsByClassName()是HTML5的DOMAPI。举个栗子：document.getElementsByClassName("wrapper");//取得DOM中所有class="wrapper"的元素解释：querySelector()和querySelectorAll()是新标准的SelectorsAPI(选择符API)。IE8+、FF3.5+、Safari3.1+、Chrome、Opera10+支持querySelector()接受一个css选择器作为参数,然后返回DOM中匹配的第一个元素querySelectorAll()接受一个css选择器作为参数,然后返回DOM中匹配的元素的集合数组举个栗子：document.querySelector("#wrapper")//取得DOM中第一个id=“wrapper”的元素举个栗子：document.querySelector(".wrapper")//取得DOM中第一个class=“wrapper”的元素举个栗子：document.querySelector("p")//取得DOM中第一个元素举个栗子：document.querySelectorAll("p")//取得DOM中所有的元素类比于querySelector()P.S.原生的方法，便是getElementById()和getElementsByTagName()。这两个不会有兼容问题以上内容请参考《Javascript高级程序设计(第三版)》

JavaScript里的document.querySelectorAll()是什么意思

　　querySelectorAll()的作用是：按文档顺序返回指定元素节点的子树中匹配选择器的元素集合，如果没有匹配返回空集合。
相关延伸：
　　在传统的 JavaScript 开发中，查找 DOM 往往是开发人员遇到的第一个头疼的问题，原生的 JavaScript 所提供的 DOM 选择方法并不多，仅仅局限于通过 tag, name, id 等方式来查找，这显然是远远不够的，如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式，或者使用某个库。
　　事实上，现在所有的浏览器厂商都提供了 querySelector 和 querySelectorAll 这两个方法的支持，甚至就连微软也派出了 IE 8 作为支持这一特性的代表，querySelector 和 querySelectorAll 作为查找 DOM 的又一途径，极大地方便了开发者，使用它们，你可以像使用 CSS 选择器一样快速地查找到你需要的节点。
用法：
document.querySelectorAll("#test");
document.querySelectorAll("div.test》p:first-child");
document.querySelectorAll( ’.test span’ );
浏览器兼容性：
　　虽然有些问题，但瑕不掩瑜，这么好用的两个方法咋没火呢？浏览器兼容性。。。其实比起一些HTML5和CSS3的特性来说这两个方法还没那么让人绝望，因为IE8都已经支持了，其它各个主力主流浏览器自然是实现了。
IE8+
Firefox
Chrome
Safari
Opera
Android
所以如果你是针对Mobile web优化，不要引用jQuery了，直接使用这两个方法就可以。

queryselector怎么用

var el = document.getElementsByClassName("aaa");
等同于
var el = document.querySelector(".aaa");
获取一列元素的第一个

使用querySelector添加移除style和class

使用这个方法可以对dom节点添加和移除style样式，其中的styleName可以为css样式的任何值，如：display、color

对dom节点添加一个class

对dom节点移除一个class