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

GetElementsByCassName和类似的函数（如getElementsByTagName和QuerySelector）是否与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.calldocument.getElementsByClassName'answer'，functionel{ el.style.color='红色'；

---

}; 以下描述摘自：

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

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

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

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

如果这是您的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是：

如果找不到ID为的元素，getElementbyId将返回or或null 如果找不到匹配的元素，getElementsByClassName将返回长度可能为0的 getElementsByClassName getElementsByClassNameclassNames方法接受一个 包含一组无序的唯一空格分隔标记 代表类。调用时，该方法必须返回一个活动的 包含文档中所有元素的NodeList对象 在获得 通过在空格上拆分字符串来初始化。如果没有代币 在参数中指定，则该方法必须返回空 点球手

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

在代码中，输入以下行：

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

将无法按预期工作，因为getElementByClassName将返回一个数组，而该数组将不具有style属性，因此可以通过迭代访问每个元素

---

这就是为什么函数getElementById对您有效，这个函数将返回直接对象。因此，您将能够访问style属性。

它返回类似数组的列表

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

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

let box=document.getElementsByClassName'box'； Array.fromboxes.forEachv=>v.style.background='green'； console.logArray.fromboxes； .盒子{ 宽度：50px； 高度：50px； 保证金：5px； 背景：蓝色； 显示：内联块； }

---

您可以通过运行

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

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

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

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

换句话说

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

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

为什么要使用querySelector

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

为什么要使用getElement/sBy*

更快的性能

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

这两种选择方式的目的都是创建节点列表以供进一步使用。 querySelectors使用选择器生成一个静态节点列表，所以必须首先从头开始创建它。 getElement/sBy*立即适应当前DOM的现有活动节点列表

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

信息

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

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

//将“wordButtons”绑定到类似HTMLCollection of buttons的数组 const wordButtons=document.getElementsByClassNameword； //将“slantWord”功能应用于第一个单词按钮 第1字； //定义“单词”乐趣 行动 函数倾斜字数{ const index=wordNumber-1；//集合索引是从零开始的 wordButtons[index].style.transform=rotate7deg；//转换指定的按钮 } 单词1 单词2 单词3 单词4 玩

---

线索是，在名称中：GetElementsByCassName意味着复数，而getElementById意味着一个单数元素项。我明白了，你不能用上面的代码更改所有具有该类名的元素，而不必通过数组循环。jquery方式要好得多，我只是好奇js方式是否也有用：这是否也适用于您的域名的一部分IT的2018。。。只需为querySelectorAll创建一个包装器函数，您就可以获得很好的短代码，而不需要大量的老式依赖项。qSA.myElement.forEachel=>el.style.size=100px可能使包装器接收回调。qas.MyEngel，ELS=＞el.Cype。大小＝100px.如果你喜欢较短的东西，考虑在你的项目中添加一个巨大的库，我知道2012是一个不同的时间，但是即使这样，我也会发现这一点是可笑的。像你用一个真正的数组那样重复它……小心，getElementsByClassName返回一个可能在循环过程中意外修改的活动节点列表，例如，如果它们所选择的类名被删除-请注意，由浏览器实现的与此处的w3c浏览器不同，前者和当前浏览器返回GetElementsByCassName的HTMLCollection，而不是节点列表。次要的，但可能会混淆一些。@kaido实际的区别是…？据我所知，a是DOM元素的通用集合，在任何DOM中都可用，而不仅仅是HTML DOM（例如XML DOM），而HTMLCollection显然是用于HTML DOM的。我能看到的唯一区别是和的.psnitpick:link的namedItem方法。被选择宠坏了不过，这与您提出的观点没有任何区别。@RobG NodeList具有在HTMLCollection上无法访问的特性。@Kaido确定，但W3C或WHATWG没有将forEach指定为collection或NodeList接口的一部分，而是单独指定的，例如，作为so中泛型集合的属性，应该同时应用于集合和节点列表，尽管我接受您的观点，即getElementsByClassName返回的集合没有forEach方法。我想最重要的一点是，有足够的故事来给你一个好的答案-循环看起来错误，应为var menuItemIndex=0；menuItemIndexvar el = getElementsByClassName("elem"); el = Array.prototype.slice.call(el); //this line el[0].appendChild(otherElem);

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