Javascript querySelectorAll和getElementsBy*方法返回什么？

getElementsByClassName

（以及类似的函数，如

getElementsByTagName

和

querySelectorAll

）是否与

getElementById

工作相同，或者它们是否返回元素数组

我问这个问题的原因是因为我试图使用

getElementsByClassName

更改所有元素的样式。见下文

//doesn't work
document.getElementsByClassName('myElement').style.size = '100px';

//works
document.getElementById('myIdElement').style.size = '100px';

您的

getElementById（）

代码可以工作，因为ID必须是唯一的，因此该函数始终只返回一个元素（如果没有找到，则返回

null

）

但是，、和其他

getElementsBy*

方法返回类似数组的元素集合。像使用真实数组一样对其进行迭代：

var elems = document.getElementsByClassName('myElement');
for(var i = 0; i < elems.length; i++) {
    elems[i].style.size = '100px';
}

有了ES5+（现在任何浏览量-2017年），您应该能够

[].forEach.call（document.getElementsByClassName（'answer'），函数（el）{
el.style.color='红色'；
});以下描述摘自：

getElementsByCassName（）方法以节点列表对象的形式返回文档中具有指定类名的所有元素的集合

NodeList对象表示节点的集合。节点可以是
通过索引号访问。索引从0开始

提示：您可以使用NodeList对象的length属性来确定具有指定类名的元素的数量，然后可以遍历所有元素并提取所需的信息

因此，作为参数，
getElementsByCassName
将接受类名

如果这是您的HTML正文：

<div id="first" class="menuItem"></div>
<div id="second" class="menuItem"></div>
<div id="third" class="menuItem"></div>
<div id="footer"></div>

有关元素和节点之间差异的更多信息，请参阅。
您使用的是数组作为对象，
getElementbyId
和
getElementsByClassName
是：


getElementbyId
如果找不到具有该ID的元素，将返回一个或null
getElementsByClassName
将返回一个字符串，如果找不到匹配的元素，则长度可能为0

getElementsByClassName
getElementsByClassName（classNames）
方法接受一个
包含一组无序的唯一空格分隔标记
代表类。调用时，该方法必须返回一个活动的
NodeList
对象，该对象包含文档中
在获得
通过在空格上拆分字符串来初始化。如果没有代币
在参数中指定，则该方法必须返回空
点球手


getElementById
getElementById（）方法访问具有指定id的第一个元素


在代码中，输入以下行：

1-document.getElementsByClassName（'myElement'）.style.size='100px'

由于
getElementByClassName
将返回一个数组，并且数组将NOT具有
style
属性，因此可以通过迭代访问每个
元素

这就是函数
getElementById
为您工作的原因，该函数将返回直接对象。因此，您将能够访问
style
属性。
它返回类似数组的列表

您将其作为一个数组作为示例

var el = getElementsByClassName("elem");
el = Array.prototype.slice.call(el); //this line
el[0].appendChild(otherElem);  

ES6提供了一种方法，该方法从类似数组或可编辑对象创建一个新的数组实例


let box=document.getElementsByClassName（'box'）；
from（box）.forEach（v=>v.style.background='green'）；
console.log（Array.from（box））
.box{
宽度：50px；
高度：50px；
保证金：5px；
背景：蓝色；
显示：内联块；
}
您可以通过运行

document.querySelector('.myElement').style.size = '100px';

但是对于类为.myElement的第一个元素，它将起作用

如果您想将此应用于类的所有元素，我建议您使用

document.querySelectorAll('.myElement').forEach(function(element) {
    element.style.size = '100px';
});

换句话说


document.querySelector（）
仅选择指定选择器的第一个元素。所以它不会吐出一个数组，而是一个值。类似于只获取ID元素的
document.getElementById（）
，因为ID必须是唯一的

document.querySelectorAll（）
使用指定的选择器选择所有元素，并以数组形式返回它们。类似于类的
document.getElementsByClassName（）
，仅用于标记




为什么要使用querySelector？

它的唯一用途是简单和简洁



为什么使用getElement/sBy？*

更快的性能



为什么会出现这种性能差异？

这两种选择方式的目的都是创建一个节点列表，以供进一步使用。
查询选择器使用选择器生成静态节点列表，因此必须首先从头开始创建该列表。

getElement/sBy*立即调整当前DOM的现有活动节点列表

因此，何时使用哪种方法取决于您/您的项目/您的设备



Infos





对德伦齐伊的具体案例的回答

您可以使函数适用于任何
word
元素，并传入要转换的元素的编号，如：


//将`wordButtons`绑定到按钮的（类似数组的）HTMLCollection
const wordButtons=document.getElementsByClassName（“word”）；
//将“slantWord”功能应用于第一个单词按钮
单字（1）；
//定义'slantWord'函数
功能字（字号）{
const index=wordNumber-1；//集合索引是从零开始的
wordButtons[index].style.transform=“旋转(
document.querySelector('.myElement').style.size = '100px';

document.querySelectorAll('.myElement').forEach(function(element) {
    element.style.size = '100px';
});

/*
 * To hide all elements with the same class, 
 * use looping to reach each element with that class. 
 * In this case, looping is done recursively
 */

const hideAll = (className, i=0) => {
if(!document.getElementsByClassName(className)[i]){ //exits the loop when element of that id does not exist
  return; 
}

document.getElementsByClassName(className)[i].style.visibility = 'hidden'; //hide element
return hideAll(className, i+1) //loop for the next element
}

hideAll('appBanner') //the function call requires the class name