本文目录
- JavaScript里的document.querySelectorAll()是什么意思
- queryselectorall怎样获取元素
- 再谈querySelector和querySelectorAll的区别与联系
- querySelectorAll 方法相比 getElementsBy 系列方法有什么区别
- queryselectorall是jquery的选择器吗
- 火狐支持queryselectorall 吗
- a.querySelectorAll(“*,:x“)报错是什么意思
- 如何循环遍历document.querySelectorAll方法返回的结果
- js 添加节点后不能querySelectorAll
- javascript中querySelectorAll和getElementsByTagName有什么区别
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了，直接使用这两个方法就可以。
queryselectorall怎样获取元素
获取页面I属性D为test的元素：
document.querySelectorAll(“#test“);
获取页面class属性为”red”的元素:
document.querySelectorAll(’.red’)
这里要注意的是：querySelector返回的是一个对象，而是返回的一个集合(NodeList)
再谈querySelector和querySelectorAll的区别与联系
先按
W3C
的规范来说这两个方法应该返回的内容吧，
大家先看下官方的解释，
然后根
据需要选择使用
先按
W3C
的规范来说这两个方法应该返回的内容吧：
querySelector
：
return
the
first
matching
Element
node
within
the
node’s
subtrees.
If
there
is
no
su
ch
node,
the
method
must
return
null.
（
返回指定元素节点的子树中匹配
selector
的集合
中的第一个，如果没有匹配，返回
null
）
querySelectorAll
：
return
a
NodeList
containing
all
of
the
matching
Element
nodes
within
the
node’s
s
ubtrees,
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
：
;
因为作为
base
Element
的
testElement
里面根本没有符合
selectors
的匹配子节点；但浏览器却好像无视
了
baseElement
，只在乎
selectors
，也就是说此时
baseElement
近乎
document
；这和我
们的预期结果不合，也许随着浏览器的不断升级，这个问题会得到统一口径！
人的智慧总是无穷的，
Andrew
Dupont
发明了一种方法暂时修正了这个怪问题，就是在
se
lectors
前面指定
baseElement
的
id
，限制匹配的范围；这个方法被广泛的应用在各大流行
框架中；
Jquery
的实现：
复制代码代码如下
:
var
oldContext
=
context,
old
=
context.getAttribute(
“id“
),《BR》
nid
=
old
||
id,
try
{
if
(
!relativeHierarchySelector
||
hasParent
)
{
return
makeArray(
context.querySelectorAll(
“[id=’“
+
nid
+
“’]
“
+
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
应该有的，所以，还需要移除：
oldCo
ntext.removeAttribute(
“id“
);
，
Mootools
的实现：
复制代码代码如下
:
var
currentId
=
_context.getAttribute(’id’),
slickid
=
’slickid__’;
_context.setAttribute(’id’,
slickid);
_expression
=
’#’
+
slickid
+
’
’
+
_expression;
context
=
_context.parentNode;
Mootools
和
Jquery
类似：只不过
slickid
=
’slickid__’
；其实意义是一样的；
方法兼容性：
FF3.5+/IE8+/Chrome
1+/opera
10+/Safari
3.2+;
IE
8
：不支持
baseElement
为
object
；
-elect
querySelectorAll 方法相比 getElementsBy 系列方法有什么区别
总的来说没什么区别,只不过querySelectorAll实现了多级查找
像：document.querySelectorAll(“div.test》p:first-child“);
document.querySelectorAll( ’.test span’ );
document.querySelectorAll(“.class“)==》document.getElementsByClassName(“class“);
document.querySelectorAll(“#id“)==》document.getElementById(“id“);
document.querySelectorAll(“标签名称“)
==》document.getElementsByTagName(“标签名称“);
-men
queryselectorall是jquery的选择器吗
是的
1. W3C 标准
querySelectorAll 属于 W3C 中的 Selectors API 规范 。而 getElementsBy 系列则属于 W3C 的 DOM 规范 。
2. 浏览器兼容
querySelectorAll 已被 IE 8+、FF 3.5+、Safari 3.1+、Chrome 和 Opera 10+ 良好支持 。
getElementsBy 系列，以最迟添加到规范中的 getElementsByClassName 为例，IE 9+、FF 3 +、Safari 3.1+、Chrome 和 Opera 9+ 都已经支持该方法了。
3. 接收参数
querySelectorAll 方法接收的参数是一个 CSS 选择符。而 getElementsBy 系列接收的参数只能是单一的className、tagName 和 name。代码如下 ：
var c1 = document.querySelectorAll(’.b1 .c’);
var c2 = document.getElementsByClassName(’c’);
var c3 = document.getElementsByClassName(’b2’).getElementsByClassName(’c’);
需要注意的是，querySelectorAll 所接收的参数是必须严格符合 CSS 选择符规范的。所以下面这种写法，将会抛出异常。代码如下 ：
try {
var e1 = document.getElementsByClassName(’1a2b3c’);
var e2 = document.querySelectorAll(’.1a2b3c’);
} catch (e) {
console.error(e.message);
}
console.log(e1 && e1.className);
console.log(e2 && e2.className);
（CSS 选择器中的元素名，类和 ID 均不能以数字为开头。）
4. 返回值
大部分人都知道，querySelectorAll 返回的是一个 Static Node List，而 getElementsBy 系列的返回的是一个 Live Node List。
-elect
火狐支持queryselectorall 吗
支持的，语法格式：
document.querySelector(“#demo”);
document.querySelector(CSS selectors)；
css位置表示的是选择器的类型，selector指的是选择名。
querySelectorAll（）；的格式以及传入值与其类似。
-men
a.querySelectorAll(“*,:x“)报错是什么意思
HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。
用法
两个方法使用差不多的语法，都是接收一个字符串参数，这个参数需要是合法的CSS选择语法。
element = document.querySelector(’selectors’);
elementList = document.querySelectorAll(’selectors’);
其中参数selectors 可以包含多个CSS选择器，用逗号隔开。
element = document.querySelector(’selector1,selector2,...’);
elementList = document.querySelectorAll(’selector1,selector2,...’);
使用这两个方法无法查找带伪类状态的元素，比如querySelector(’:hover’)不会得到预期结果。
-elect
如何循环遍历document.querySelectorAll方法返回的结果
使用JavaScript的forEach方法，我们可以轻松的循环一个数组，但如果你认为document.querySelectorAll()方法返回的应该是个数组，而使用forEach循环它：
/* Will Not Work */
document.querySelectorAll(’.module’).forEach(function() {
});
执行上面的代码，你将会得到执行错误的异常信息。这是因为，document.querySelectorAll()返回的不是一个数组，而是一个NodeList。
对于一个NodeList，我们可以用下面的技巧来循环遍历它：
var divs = document.querySelectorAll(’div’);
.forEach.call(divs, function(div) {
// do whatever
div.style.color = “red“;
});
当然，我们也可以用最传统的方法遍历它：
var divs = document.querySelectorAll(’div’), i;
for (i = 0; i 《 divs.length; ++i) {
divs[i].style.color = “green“;
}
还有一种更好的方法，就是自己写一个：
// forEach method, could be shipped as part of an Object Literal/Module
var forEach = function (array, callback, scope) {
for (var i = 0; i 《 array.length; i++) {
callback.call(scope, i, array[i]); // passes back stuff we need
}
};
// 用法:
// optionally change the scope as final parameter too, like ECMA5
var myNodeList = document.querySelectorAll(’li’);
forEach(myNodeList, function (index, value) {
console.log(index, value); // passes index + value back!
});
还有一种语法：for..of 循环，但似乎只有Firefox支持：
/* Be warned, this only works in Firefox */
var divs = document.querySelectorAll(’div );
for (var div of divs) {
div.style.color = “blue“;
}
最后是一种不推荐的方法：给NodeList扩展一个forEach方法：
NodeList.prototype.forEach = Array.prototype.forEach;
var divs = document.querySelectorAll(’div’).forEach(function(el) {
el.style.color = “orange“;
})
-men
js 添加节点后不能querySelectorAll
class不是节点，是节点属性，不能用document.querySelectorAll（）获得，要用document.getElemetById（your_element）.classNmae
javascript中querySelectorAll和getElementsByTagName有什么区别
功能上大致相同。
querySelectorAll用法：querySelectorAll(“.class“)或者querySelectorAll(“#id“)类似于jquery的$(““)函数。
getElementsByTagName用法：getElementsByTagName(“p“)，和js的源生getElementById这种类似。
区别：
querySelectorAll浏览器支持： IE 8+、FF 3.5+、Safari 3.1+、Chrome 和 Opera 10+
getElementsByTagName浏览器支持：IE 9+、FF 3 +、Safari 3.1+、Chrome 和 Opera 9+
其他的说了你也看不懂。
-elect
