querySelectorAll、getElementsByClassName和其他getElementsBy*方法返回什么?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (13)

getElementsByClassName(等类似的功能getElementsByTagNamequerySelectorAll)的工作方式相同getElementById,还是他们返回元素的数组?

我问的原因是因为我试图改变使用所有元素的风格getElementsByClassName。见下文。

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

//works
document.getElementById('myIdElement').style.size = '100px';
提问于
用户回答回答于

你的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');
用户回答回答于

你使用的阵列为对象,getElementbyIdgetElementsByClassName之间的差别是:

  • 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属性。

扫码关注云+社区