我想知道querySelector和querySelectorAll对getElementsByClassName和getElementById的区别到底是什么?

从这个链接,我可以用querySelector收集,我可以写document.querySelector(".myclass")来获得类myclass的元素,文档.querySelector("#myid")来获得ID为myid的元素。但我已经可以做到getElementsByClassName和getElementById。应该优先选择哪一种?

我还在XPages中工作,其中ID是用冒号动态生成的,类似于以下视图:_id1:inputText1。所以当我写document.querySelector(“#view:_id1:inputText1”)时,它不起作用。但是写document.getElementById("view:_id1:inputText1")是有效的。知道为什么吗?


当前回答

我想知道querySelector和querySelectorAll对getElementsByClassName和getElementById的区别到底是什么?

语法和浏览器支持。

当您想使用更复杂的选择器时,querySelector更有用。

例:所有从foo类成员元素派生的列表项:.foo li

document.querySelector("#view:_id1:inputText1")不起作用。但是写document.getElementById("view:_id1:inputText1")是有效的。知道为什么吗?

字符在选择器中有特殊的含义。你必须逃离它。(选择器转义字符在JS字符串中也有特殊的含义,所以你也必须转义它)。

document.querySelector("#view\\:_id1\\:inputText1")

其他回答

querySelector可以是一个完整的CSS(3)-Selector,包括id、类和伪类,如下所示:

'#id.class:pseudo'

// or

'tag #id .class .class.class'

使用getElementsByClassName,你可以定义一个类

'class'

使用getElementById,你可以只定义一个id

'id'

关于差异,querySelectorAll和getElementsByClassName的结果中有一个重要的差异:返回值不同。querySelectorAll将返回一个静态集合,而getElementsByClassName将返回一个活动集合。如果你将结果存储在变量中供以后使用,这可能会导致混乱:

使用querySelectorAll生成的变量将包含在调用方法时实现选择器的元素。 使用getElementsByClassName生成的变量将包含在使用选择器时实现选择器的元素(这可能与调用方法时不同)。

例如,注意即使你没有重新赋值变量aux1和aux2,它们在更新类后包含不同的值:

// storing all the elements with class "blue" using the two methods var aux1 = document.querySelectorAll(".blue"); var aux2 = document.getElementsByClassName("blue"); // write the number of elements in each array (values match) console.log("Number of elements with querySelectorAll = " + aux1.length); console.log("Number of elements with getElementsByClassName = " + aux2.length); // change one element's class to "blue" document.getElementById("div1").className = "blue"; // write the number of elements in each array (values differ) console.log("Number of elements with querySelectorAll = " + aux1.length); console.log("Number of elements with getElementsByClassName = " + aux2.length); .red { color:red; } .green { color:green; } .blue { color:blue; } <div id="div0" class="blue">Blue</div> <div id="div1" class="red">Red</div> <div id="div2" class="green">Green</div>

querySelector和getlementbyID(Claassname,Tagname等)之间的主要区别是,如果满足条件的元素超过一个,querySelector将只返回一个输出,而getElementBy*将返回所有元素。

让我们考虑一个例子,让它更清楚。

 <nav id="primary" class="menu">
                            <a class="link" href="#">For Business</a>
                            <a class="link" href="#">Become an Instructor</a>
                            <a class="link" href="#">Mobile Applications</a>
                            <a class="link" href="#">Support</a>
                            <a class="link" href="#">Help</a>
   </nav> 

下面的代码将解释其中的区别

**QUERY SELECTOR**
document.querySelector('.link'); // Output : For Business (element)

document.querySelectorAll('.link'); //Out All the element with class link

**GET ELEMENT**
document.getElementsByClassName('link') // Output : will return all the element with a class "link" but whereas in query selector it will return only one element which encounters first.

简而言之,如果我们想选择单个元素,就选择queryslector,如果我们想选择多个元素,就选择getElement

querySelector和querySelectorAll的区别

//querySelector返回单个元素 let listsingle = document.querySelector('li'); console.log (listsingle); //querySelectorAll返回点亮的/数组元素 let list = document.querySelectorAll('li'); console.log(列表); //注意:输出将在Console中可见 < ul > <李类= >“测试”飞行符李< / > <李类=“测试”> vvvv李< / > <李> dddd李< / > <李类=“测试”> ddff李< / > < / ul >

我想知道querySelector和querySelectorAll对getElementsByClassName和getElementById的区别到底是什么?

语法和浏览器支持。

当您想使用更复杂的选择器时,querySelector更有用。

例:所有从foo类成员元素派生的列表项:.foo li

document.querySelector("#view:_id1:inputText1")不起作用。但是写document.getElementById("view:_id1:inputText1")是有效的。知道为什么吗?

字符在选择器中有特殊的含义。你必须逃离它。(选择器转义字符在JS字符串中也有特殊的含义,所以你也必须转义它)。

document.querySelector("#view\\:_id1\\:inputText1")