回答1：

您的getElementById()代码可以正常工作，因为ID必须是唯一的，因此该函数始终只返回一个元素(如果未找到则为null)。

但是， getElementsByClassName() ， querySelectorAll() 以及其他getElementsBy*方法返回类似数组的元素集合。像使用真实数组那样遍历它：

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

如果您希望使用较短的内容，请考虑使用 jQuery ：

$('.myElement').css('size', '100px');

回答2：

您使用数组作为对象，getElementbyId和getElementsByClassName之间的区别是：

• getElementbyId将返回 Element对象；如果找不到具有ID的元素，则为null
• getElementsByClassName将返回实时HTMLCollection ，如果找不到匹配的元素，则长度可能为0

getElementsByClassName

getElementsByClassName(classNames)方法采用一个字符串，该字符串包含无序的一组唯一的，由空格分隔的表示类的标记。调用该方法时，该方法必须返回一个实时的NodeList对象，该对象包含文档中具有该参数中指定的所有类的所有元素，并且已通过在空格上拆分字符串来获得了这些类。如果参数中未指定令牌，则该方法必须返回一个空的NodeList。

https://www.w3.org /TR/2008/WD-html5-20080610/dom.html#getelementsbyclassname

getElementById

getElementById()方法访问具有指定ID的第一个元素。

https://developer.mozilla.org/en -US / docs / Web / API / Document / getElementById

在代码行中：

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

将不正常工作，因为getElementByClassName将返回一个数组，并且该数组不将具有样式 属性，您可以通过遍历每个element来访问它们。

回答3：

以下描述摘自此页面：

getElementsByClassName()方法以NodeList对象的形式返回文档中具有指定类名的所有元素的集合。

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>

然后varmenuItems=document.getElementsByClassName('menuItem')将返回3个上部

for (var menuItemIndex = 0 ; menuItems.length ; menuItemIndex ++) {
   var currentMenuItem = menuItems[menuItemIndex];
   // do stuff with currentMenuItem as a node.
}

回答4：

ES6 提供 Array.from() 方法，该方法从类似数组或可迭代的对象创建新的Array实例。

let boxes = document.getElementsByClassName('box');

Array.from(boxes).forEach(v => v.style.background = 'green');
console.log(Array.from(boxes));

使用 Array.from() 函数，然后您就可以对每个元素进行操作。

使用 jQuery 的相同解决方案。

.box {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: blue;
  display: inline-block;
}

回答5：

换句话说

• document.querySelector()仅选择指定选择器的第一个 one 元素。因此它不会吐出一个数组，它是一个值。与document.getElementById()相似，后者仅获取ID元素，因为ID必须是唯一的。

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

为什么使用querySelector？

仅用于轻松和简洁的目的。

为什么使用getElement / sBy？*

更快的性能。

为什么会有这种性能差异？

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

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

信息

所有方法的演示
NodeList文档
性能测试

回答6：

它返回类似数组的列表。

您以该数组为例

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

回答7：

您可以通过运行

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

但它适用于类.myElement的第一个元素。

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

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

回答8：

/*
 * 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

回答9：

使用ES5 +(如今已浏览过-2017年)，您应该可以

[].forEach.call(document.getElementsByClassName('answer'), function(el) {
    el.style.color= 'red';
});