javascript getElementsByClassName（“ foo” ||“ bar”）

Question

基本上我想要一段JavaScript代码到浏览器窗口的高度与上述两个类中添加任何元素fullscreen或fullheight

function fullsize(){
    var a = document.getElementsByClassName("fullscreen"),
        b = document.getElementsByClassName("fullheight");
    for (var i=0; i<a.length; i++){
        a[i].style.height = window.innerHeight + "px";
    }
    for (var j=0; j<b.length; j++){
        b[j].style.height = window.innerHeight + "px";
    }
}
window.addEventListener("load", fullsize),
window.addEventListener("resize", fullsize);

这个（上面的）效果很好，我只是想知道是否有任何方法可以像jQuery equiv那样将其压缩为一个for(){...} 。

function fullsizes(){
    $(".fullheight,.fullscreen").each(function(){
      $(this).height($(window).height())
    })
}

Answer 1

您可以使用document.querySelectorAll

返回与指定选择器组匹配的文档中的元素列表（使用文档节点的深度优先顺序遍历）。 返回的对象是NodeList。

代码示例

document.querySelectorAll(".fullscreen, .fullheight"); 

将您的代码更改为

function fullsize(){
    var a = document.querySelectorAll(".fullscreen, .fullheight"); 
    for (var i=0; i<a.length; i++){
        a[i].style.height = window.innerHeight + "px";
    }
}

Answer 2

如果您真的必须使用javascript而不是编写一些CSS

style.css：

.fullscreen, .fullheight {
    height: 100vh;
}

您可以像Satpal所说的那样使用document.querySelectorAll。

Answer 3

您可以使用querySelector()或querySelectorAll()来做到这一点：

querySelector

返回节点的子树中的第一个匹配Element节点。 如果找不到匹配的节点，则返回null。

querySelectorAll

返回一个NodeList，其中包含该节点的子树中所有匹配的Element节点；如果找不到匹配项，则返回一个空的NodeList。

您可能还会发现以下网站很有用； 它包含一些示例，这些示例说明了如何不使用jQuery就可以执行类似jQuery的操作：http: //youmightnotneedjquery.com/

Answer 4

您可以使用concat方法合并数组

var c = a.concat(b)

然后，您可以遍历c 。