querySelectorAll和getElementsBy*方法返回什么？

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对象,该活动 对象包含文档中具有该参数中指定的所有类的所有元素,并通过在空格上分割字符串来获取类.如果参数中没有指定标记,则该方法必须返回空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';

将不按预期方式工作,就算是getElementByClassName会返回一个数组,数组将不拥有style产权,你要访问的每个element通过遍历他们.

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

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

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

然后,您可以使用以下命令迭代此节点(<div>在本例中为s)集合:

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

有关元素和节点之间差异的更多信息,请参阅此帖子.

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.

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

相关信息

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

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