Javascript querySelectorAll和getElementsBy*方法返回什么?
Javascript querySelectorAll和getElementsBy*方法返回什么?,javascript,getelementsbyclassname,dom-traversal,Javascript,Getelementsbyclassname,Dom Traversal,getElementsByClassName(以及类似的函数,如getElementsByTagName和querySelectorAll)是否与getElementById工作相同,或者它们是否返回元素数组 我问这个问题的原因是因为我试图使用getElementsByClassName更改所有元素的样式。见下文 //doesn't work document.getElementsByClassName('myElement').style.size = '100px'; //works d
getElementsByClassName
(以及类似的函数,如getElementsByTagName
和querySelectorAll
)是否与getElementById
工作相同,或者它们是否返回元素数组
我问这个问题的原因是因为我试图使用getElementsByClassName
更改所有元素的样式。见下文
//doesn't work
document.getElementsByClassName('myElement').style.size = '100px';
//works
document.getElementById('myIdElement').style.size = '100px';
您的getElementById()
代码可以工作,因为ID必须是唯一的,因此该函数始终只返回一个元素(如果没有找到,则返回null
)
但是,、和其他getElementsBy*
方法返回类似数组的元素集合。像使用真实数组一样对其进行迭代:
var elems = document.getElementsByClassName('myElement');
for(var i = 0; i < elems.length; i++) {
elems[i].style.size = '100px';
}
您的getElementById()
代码可以工作,因为ID必须是唯一的,因此该函数始终只返回一个元素(如果没有找到,则返回null
)
但是,、和其他getElementsBy*
方法返回类似数组的元素集合。像使用真实数组一样对其进行迭代:
var elems = document.getElementsByClassName('myElement');
for(var i = 0; i < elems.length; i++) {
elems[i].style.size = '100px';
}
有了ES5+(现在任何浏览量-2017年),您应该能够
[].forEach.call(document.getElementsByClassName('answer'),函数(el){
el.style.color='红色';
});代码>使用ES5+(现在任何浏览量-2017年),您应该能够
[].forEach.call(document.getElementsByClassName('answer'),函数(el){
el.style.color='红色';
});代码>以下描述摘自:
getElementsByCassName()方法以节点列表对象的形式返回文档中具有指定类名的所有元素的集合
NodeList对象表示节点的集合。节点可以是
通过索引号访问。索引从0开始
提示:您可以使用NodeList对象的length属性来确定具有指定类名的元素的数量,然后可以遍历所有元素并提取所需的信息
因此,作为参数,getElementsByCassName
将接受类名
如果这是您的HTML正文:
<div id="first" class="menuItem"></div>
<div id="second" class="menuItem"></div>
<div id="third" class="menuItem"></div>
<div id="footer"></div>
有关元素和节点之间差异的更多信息,请参阅。以下描述摘自:
getElementsByCassName()方法以节点列表对象的形式返回文档中具有指定类名的所有元素的集合
NodeList对象表示节点的集合。节点可以是
通过索引号访问。索引从0开始
提示:您可以使用NodeList对象的length属性来确定具有指定类名的元素的数量,然后可以遍历所有元素并提取所需的信息
因此,作为参数,getElementsByCassName
将接受类名
如果这是您的HTML正文:
<div id="first" class="menuItem"></div>
<div id="second" class="menuItem"></div>
<div id="third" class="menuItem"></div>
<div id="footer"></div>
有关元素和节点之间差异的更多信息,请参阅。您使用的是数组作为对象,getElementbyId
和
getElementsByClassName
是:
getElementbyId
如果找不到具有该ID的元素,将返回一个或null
getElementsByClassName
将返回一个字符串,如果找不到匹配的元素,则长度可能为0
getElementsByClassName
getElementsByClassName(classNames)
方法接受一个
包含一组无序的唯一空格分隔标记
代表类。调用时,该方法必须返回一个活动的
NodeList
对象,该对象包含文档中
在获得
通过在空格上拆分字符串来初始化。如果没有代币
在参数中指定,则该方法必须返回空
点球手
getElementById
getElementById()方法访问具有指定id的第一个元素
在代码中,输入以下行:
1-document.getElementsByClassName('myElement').style.size='100px'
由于getElementByClassName
将返回一个数组,并且数组将NOT具有style
属性,因此可以通过迭代访问每个元素
这就是函数getElementById
为您工作的原因,该函数将返回直接对象。因此,您将能够访问style
属性。如果将数组用作对象,则getElementbyId
与
getElementsByClassName
是:
getElementbyId
如果找不到具有该ID的元素,将返回一个或null
getElementsByClassName
将返回一个字符串,如果找不到匹配的元素,则长度可能为0
getElementsByClassName
getElementsByClassName(classNames)
方法接受一个
包含一组无序的唯一空格分隔标记
代表类。调用时,该方法必须返回一个活动的
NodeList
对象,该对象包含文档中
在获得
通过在空格上拆分字符串来初始化。如果没有代币
在参数中指定,则该方法必须返回空
点球手
getElementById
getElementById()方法访问具有指定id的第一个元素
在代码中,输入以下行:
1-document.getElementsByClassName('myElement').style.size='100px'
由于getElementByClassName
将返回一个数组,并且数组将NOT具有style
属性,因此可以通过迭代访问每个元素
这就是函数getElementById
为您工作的原因,
var el = getElementsByClassName("elem");
el = Array.prototype.slice.call(el); //this line
el[0].appendChild(otherElem);
document.querySelector('.myElement').style.size = '100px';
document.querySelectorAll('.myElement').forEach(function(element) {
element.style.size = '100px';
});
/*
* 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