Question

getElementsByClassName（以及getElementsByTagName和querySelectorAll等类似函数）是否与getElementById的工作方式相同，还是返回元素数组？

我问的原因是因为我试图使用getElementsByClassName更改所有元素的样式。见下文。

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

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

Answer 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');

Answer 2

您正在使用数组作为对象，getElementbyId和之间的差异 getElementsByClassName就是：

getElementbyId会返回一个对象。
getElementsByClassName会返回一个数组。

getElementsByClassName方法

getElementsByClassName(classNames)方法接受一个字符串包含一组无序的空格分隔标记代表类。调用时，该方法必须返回实时 NodeList对象，包含文档中的所有元素拥有该参数中指定的所有类，获得了通过在空格上分割字符串来分类。如果没有令牌在参数中指定，那么该方法必须返回一个空节点列表。

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

的getElementById

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

http://www.w3schools.com/jsref/met_doc_getelementbyid.asp

在代码中

行：

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

将 NOT 按预期工作，因为getElementByClassName将返回一个数组，并且数组 NOT 具有style属性，您可以通过遍历它们来访问每个element。

这就是函数getElementById为你工作的原因，这个函数将返回直接对象。因此，您将能够访问style属性。

Answer 3

以下说明摘自this page：

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>

然后var menuItems = document.getElementsByClassName('menuItem')将返回3个上<div> s的集合（不是数组），因为它们与给定的类名匹配。

然后，您可以使用以下命令迭代此节点（在本例中为<div>）集合

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

有关元素和节点之间差异的更多信息，请参阅this post。

Answer 4

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

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

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

<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>

正如您在代码段中看到的那样，在使用Array.from()函数后，您可以对每个元素进行操作。

使用 jQuery 的相同解决方案。

$('.box').css({'background':'green'});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>

Answer 5

换句话说

document.querySelector()仅选择指定选择器的第一个一个元素。因此，它不会吐出一个数组，它只是一个值。与document.getElementById()类似，仅提取ID元素，因为ID必须是唯一的。
document.querySelectorAll()使用指定的选择器选择所有元素，并将它们返回到数组中。类似于document.getElementsByClassName()类和document.getElementsByTagName()标记。

为什么要使用querySelector？

它仅用于简单和简洁的唯一目的。

为什么要使用getElement / sBy？*

表现更快。

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

两种选择方式都旨在创建 NodeList 以供进一步使用。 querySelectors 使用选择器生成静态NodeList，因此必须首先从头开始创建。 getElement / sBy * 会立即调整当前DOM的现有实时NodeList。

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

<强>的相关信息

Demo of all methods
NodeList Documentation
Performance Test

Answer 6

它返回类似数组的列表。

您将该数组作为示例

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

Answer 7

您可以通过运行

获得单个元素

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

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

如果您希望将此项应用于课堂上的所有元素，我建议您使用

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

Answer 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

Answer 9

使用ES5 +（现在任何浏览 - 2017年），您应该可以

＆＃13;

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

＆＃13;

Answer 10

针对Drenzii的具体情况的答案 ...

您可以使一项适用于任何word元素的功能，并传入要转换的元素的编号，例如：

// Binds `wordButtons` to an (array-like) HTMLCollection of buttons
const wordButtons = document.getElementsByClassName("word");

// Applies the `slantWord` function to the first word button
slantWord(1);

// Defines the `slantWord` function
function slantWord(wordNumber) {
  const index = wordNumber - 1; // Collection index is zero-based
  wordButtons[index].style.transform = "rotate(7deg)"; // Transforms the specified button
}

<div class="wordGameContainer">
  <button class="word word1">WORD 1</button>
  <button class="word word2">WORD 2</button>
  <button class="word word3">WORD 3</button>
  <button class="word word4">WORD 4</button>
</div>

<div>
  <button onclick="moveWord()" class="playButton">PLAY</button>
</div>

querySelectorAll和getElementsBy *方法返回什么？

10 个答案:

getElementsByClassName方法

的getElementById