用querySelectorAll 和getElementsBy* 怎么return?

做 getElementsByClassName (或者类似的函数 getElementsByTagName 和querySelectorAll) 类似 getElementById 还是返回一组元素?
我问这个问题的原因是,我正在尝试使用 getElementsByClassName更改所有elements 的样式。见下文。

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

document.getElementsByClassName('myElement') 返回的是一个数组,试试逐个遍历数组元素来设置。

您的 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');

使用数组作为对象,getElementbyId 和 getElementsByClassName 的区别在于:
• getElementbyId 会还给你一件物品
• getElementsByClassName 会返回一个数组
getElementsByClassName
Getelementsbyclassname (classNames)接受一个字符串,该字符串包含一组表示类的无序的空格分隔令牌。 当调用该方法时,该方法必须返回一个活动的 NodeList 对象,该对象包含文档中在该参数中指定了所有类的所有元素,该方法通过在空格上分割字符串获得了类。 如果参数中没有指定标记,那么该方法必须返回空的 NodeList。
getElementById
Getelementbyid ()方法访问具有指定 id 的第一个元素。
在你的代码里有酱紫的:
1- document.getElementsByClassName('myElement').style.size = '100px';
1-document.getElementsByClassName (‘ myElement')。 100px;
因为 getElementByClassName 将返回一个数组,而且该数组不具有 style 属性,所以您可以通过迭代访问每个元素。
这就是 getElementById 函数为什么适用于您的原因,这个函数将返回直接对象。 因此,您将能够访问 style 属性。

Getelementsbyclassname ()方法以 NodeList 对象的形式返回文档中具有指定类名的所有元素的集合。
Nodelist 对象表示一组节点。 可以通过索引号访问节点。 指数从0开始。
提示: 您可以使用 NodeList 对象的 length 属性来确定具有指定类名的元素的数量,然后可以循环遍历所有元素并提取所需的信息。
因此,作为参数 getElementsByClassName 可以接受class name。
若这是你的 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个上

的集合(而不是数组) ,因为它们与给定的类名相匹配。
然后可以使用以下命令迭代这个节点(本例中是
)集合:
for (var menuItemIndex = 0 ; menuItems.length ; menuItemIndex ++) {
   var currentMenuItem = menuItems[menuItemIndex];
   // do stuff with currentMenuItem as a node.}