queryselector怎么读（javascript中querySelectorAll和getElementsByClassName的问题）

本文目录

• javascript中querySelectorAll和getElementsByClassName的问题
• queryselector怎么读
• queryselector怎么获取多个
• 再谈querySelector和querySelectorAll的区别与联系

javascript中querySelectorAll和getElementsByClassName的问题

你两张图实现的过程其实是有差别的，在图2中，oDiv后面的值是带的，也就是说oDiv是getElementsByClassName(“div1“)的子对象，而这个子对象已经是个静态对象了，改变它的class并不会使它消失。如果你把去掉，再把下面的代码改为 oDiv.className = ... ，你马上就能看到和图1一样的结果了！

queryselector怎么读

英文原文：
query selector
英式音标：
[ˈkwɪərɪ] [sɪˈlektə]
美式音标：
[ˈkwɪri] [səˈlɛktɚ]

queryselector怎么获取多个

两个方法使用差不多的语法，都是接收一个字符串参数，这个参数需要是合法的CSS选择语法。
element = document.querySelector(’selectors’);
elementList = document.querySelectorAll(’selectors’);
其中参数selectors 可以包含多个CSS选择器，用逗号隔开。
element = document.querySelector(’selector1,selector2,...’);
elementList = document.querySelectorAll(’selector1,selector2,...’);
使用这两个方法无法查找带伪类状态的元素，比如querySelector(’:hover’

再谈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
；