querySelector和querySelectorAll与JavaScript中的getElementsByClassName和getElementById

我想知道

querySelector

和

querySelectorAll

与

getElementsByClassName

和

getElementById

之间到底有什么区别

从中，我可以通过

querySelector

收集这些信息，我可以编写

document.querySelector（“.myclass”）

来获取类为

myclass

的元素，以及

document.querySelector（“#myid”）

来获取ID为

myid

的元素。但是我已经可以做到了

getElementsByClassName

和

getElementById

。哪一个应该优先

我还使用冒号动态生成ID，看起来像这样的

视图：_id1:inputext1

。因此，当我编写

document.querySelector（“#view:_id1:inputText1”）

时，它不起作用。但是编写

document.getElementById（“视图：\ id1:inputText1”）

是可行的。你知道为什么吗

我想知道querySelector和querySelectorAll与GetElementsByCassName和getElementById之间的区别是什么

语法和浏览器支持

---

当您想使用更复杂的选择器时，

querySelector

更有用

e、 g.从作为foo类成员的元素派生的所有列表项：

.foo li

document.querySelector（“#view:_id1:inputText1”）它不工作。但是编写document.getElementById（“视图：_-id1:inputText1”）是可行的。你知道为什么吗

：

字符在选择器中具有特殊意义。你必须逃避它。（选择器转义字符在JS字符串中也有特殊含义，因此您也必须转义它）

---

querySelector

和

querySelectorAll

是一种相对较新的API，而

getElementById

和

getElementsByClassName

与我们在一起的时间要长得多。这意味着您使用什么主要取决于您需要支持哪些浏览器

---

至于

：

，它有一个特殊的含义，因此如果必须将其用作ID/类名的一部分，则必须将其转义。

查询选择器可以是一个完整的CSS（3）-选择器，ID、类和伪类一起使用，如下所示：

'#id.class:pseudo'

// or

'tag #id .class .class.class'

使用
getElementsByClassName
可以定义一个类

'class'

使用
getElementById
可以定义一个id

'id'

收集

节点选择器接口
本规范向实现文档、DocumentFragment或元素接口的任何对象添加了两个新方法：

查询选择器

返回节点子树中的第一个匹配元素节点。如果
未找到匹配的节点，返回null

查询选择全部

返回一个节点列表，其中包含
节点的子树，如果未找到匹配项，则为空节点列表

及

注意：
querySelectorAll（）
返回的节点列表不是活动的，这
意味着DOM中的更改不会反映在集合中。
这与其他返回live的DOM查询方法不同
节点列表

关于差异，在
querySelectorAll
和
getElementsByClassName
之间的结果中有一个重要的差异：返回值不同
querySelectorAll
将返回静态集合，而
getElementsByClassName
将返回实时集合。如果将结果存储在变量中供以后使用，则可能会导致混淆：


使用
querySelectorAll
生成的变量将包含在调用方法时满足选择器的元素

使用
getElementsByClassName
生成的变量将包含在使用时满足选择器的元素（这可能与调用该方法时不同）


例如，请注意，即使没有重新分配变量
aux1
和
aux2
，它们在更新类后仍然包含不同的值：


//使用这两种方法存储类为“blue”的所有元素
var aux1=document.queryselectoral（“.blue”）；
var aux2=document.getElementsByClassName（“蓝色”）；
//写入每个数组中的元素数（值匹配）
console.log（“带有querySelectorAll=“+aux1.length”的元素数）；
console.log（“getElementsByClassName=“+aux2.length”的元素数）；
//将一个元素的类更改为“蓝色”
document.getElementById（“div1”）.className=“蓝色”；
//写入每个数组中的元素数（值不同）
console.log（“带有querySelectorAll=“+aux1.length”的元素数）；
console.log（“getElementsByClassName=“+aux2.length”的元素数）
.red{color:red；}
.green{颜色：绿色；}
.blue{color:blue；}
蓝色
红色
绿色
我来到本页纯粹是为了找到性能方面更好的方法，即更快的方法：

querySelector / querySelectorAll or getElementsByClassName

我发现：

它在上面的2x示例上运行一个测试，并对jQuery的等效选择器进行测试。我的测试结果如下：

getElementsByClassName = 1,138,018 operations / sec - <<< clear winner
querySelectorAll = 39,033 operations / sec
jquery select = 381,648 operations / sec

GetElementsByCassName=1138018操作/秒-“querySelector”和“querySelectorAll”之间的差异


//querySelector返回单个元素
让listsingle=document.querySelector（'li'）；
console.log（listsingle）；
//querySelectorAll返回元素的lit/数组
let list=document.querySelectorAll（'li'）；
控制台日志（列表）；
//注意：输出将在控制台中可见

ffff
vv
dddd
ddff
查询选择器
是w3c的

getElementBy
是w3c的

国际海事组织
getElementsByClassName = 1,138,018 operations / sec - <<< clear winner
querySelectorAll = 39,033 operations / sec
jquery select = 381,648 operations / sec

// Demo 1 correct
var ul = document.querySelectorAll('ul')[0],
    lis = ul.querySelectorAll("li");
for(var i = 0; i < lis.length ; i++){
    ul.appendChild(document.createElement("li"));
}

// Demo 2 wrong
var ul = document.getElementsByTagName('ul')[0], 
    lis = ul.getElementsByTagName("li"); 
for(var i = 0; i < lis.length ; i++){
    ul.appendChild(document.createElement("li")); 
}

https://codepen.io/bagdaulet/pen/bzdKjL

var q = time_my_script(function() {

    for (i = 0; i < 1000000; i++) {
         var w = document.querySelector('#ll');
    }

});

console.log('querySelector: '+q+'ms');

 <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.