Javascript 搜索div是否包含类（vanilla js）

我从香草JS开始，所以不要生气；） 试着编写井字游戏

我有这个HTML：

<div class="container">
    <div class="row">
        <div class="cel empty" id="a1">
            <p>x</p>
        </div>
        <div class="cel empty" id="a2">
            x
        </div>
        <div class="cel empty" id="a3">
            x
        </div>
    </div>
    <div class="row">
        <div class="cel empty" id="b1"> x</div>
        <div class="cel empty" id="b2"> x</div>
        <div class="cel empty" id="b3"> x</div>
    </div>
    <div class="row">
        <div class="cel empty" id="c1"> x</div>
        <div class="cel empty" id="c2"> x</div>
        <div class="cel empty" id="c3">x </div>
    </div>
</div>

x

x
x
x
x
x
x
x
x

此外，本JS：

var fieldEmptyElements = document.querySelectorAll('div.cel');//pobieram divy które zawierają klasę empty

    window.addEventListener('load', checkHowManyEmpty);//po załadowaniu strony wczytuje funkcję o nazwie checkHowManyEmpty


    //funkcja ma za zadanie sprawdzić jak dużo pól div ma klasę empty
    function checkHowManyEmpty(){
        for(var i=0, max=fieldEmptyElements.length; i<max; i++){
            if(fieldEmptyElements.classList.contains('empty')){
                alert('there is one element with empty class');
            }
            else{
                alert('no element with empty class');
            }
        }
    }

var fieldEmptyElements=document.queryselectoral（'div.cel'）//pobieram divy które zawierająklasęempty
window.addEventListener（'load'，checkHowManyEmpty）//你的工资是多少
//扎达尼·斯普拉德齐·贾克·杜奥·波尔·迪夫·马·克拉斯
函数checkHowManyEmpty（）{
对于（var i=0，max=fieldEmptyElements.length；i我认为您实际上是有意这么做的：（您应该访问集合的当前索引）

我认为您实际上是有意这样做的：（您应该访问集合的当前索引）

fieldEmptyElements是一个数组。要访问数组中的项，您需要索引，在本例中，索引是i变量。
对于循环的每一次迭代，i增加1

if (fieldEmptyElements[i].classList.contains('empty'))

通过这种方式，您可以使用当前索引访问数组中的项。
fieldEmptyElements是一个数组。要访问数组中的项，您需要索引，在本例中，索引是i变量。
对于循环的每一次迭代，i增加1

if (fieldEmptyElements[i].classList.contains('empty'))

通过这种方式，您可以使用当前索引访问数组项。
document.querySelectorAll（）返回一个节点列表。然后查看节点列表的classList属性。这是错误的，因为您需要检查节点列表中的每个元素，然后检查其类列表

在for循环中，可以使用var i为节点列表编制索引

fieldEmptyElements[i].classList
document.querySelectorAll（）返回节点列表。然后查看节点列表的classList属性。这是错误的，因为需要检查节点列表中的每个元素，然后检查其类列表

在for循环中，可以使用var i为节点列表编制索引

fieldEmptyElements[i].classList
为什么要在一个循环中检查自己，而不让选择器引擎完成工作？毕竟这是它的优化目标

document.querySelectorAll（'div.cel.empty'）。length
将告诉您在一个简单的方法调用中，这些
div.cell
元素中是否有类为
empty
的元素

注释中的函数示例-如果替换为简单的else，则不需要else：

function checkHowManyEmpty() {
    var fieldEmptyElements = document.querySelectorAll('div.cel.empty');
    if (fieldEmptyElements.length >= 1) {
        console.log('at least one element');
    } else {
        console.log('no empty elements');
    }
}

为什么要在一个循环中检查自己，而不让选择器引擎完成工作呢？毕竟这就是它优化的目的

document.querySelectorAll（'div.cel.empty'）。length
将告诉您在一个简单的方法调用中，这些
div.cell
元素中是否有类为
empty
的元素

注释中的函数示例-如果替换为简单的else，则不需要else：

function checkHowManyEmpty() {
    var fieldEmptyElements = document.querySelectorAll('div.cel.empty');
    if (fieldEmptyElements.length >= 1) {
        console.log('at least one element');
    } else {
        console.log('no empty elements');
    }
}

fieldEmptyElements是一个节点列表，请使用
fieldEmptyElements[i].classList.contains（..）
。为什么要在循环中检查自己，而不让选择器引擎执行此操作？这正是它优化的目的。
document.querySelectorAll（'div.cel.empty'））.length
将告诉您在一个干净、简单的方法调用中是否有类为
空的
div.cell
元素…@Cbroe-但是当我编写此函数时：
函数checkHowManyEmpty（）{var fieldEmptyElements=document.queryselectoral（'div.cel.empty'）；如果（fieldEmptyElements.length>=1）{console.log（“至少一个元素”）；}else if（fieldEmptyElements.length=0）{console.log（“无空元素”）；}}
它显示console.log中是否有类为空的元素，但在没有此类元素的情况下则不显示…
else if（fieldEmptyElements.length=0）
-这是一个赋值；比较运算符是
=
…但是如果在这里，为什么还需要一个else呢？如果长度不是
=1
，那么它必须是0…它不能变成负数。@CBroe是啊！在你回答之前，我看到了一个错误几秒钟：D无论如何，当你使用比较时它是有效的！而我呢使用它是因为我正在学习，这种表示法最好记住什么是什么；）谢谢！fieldEmptyElements是节点列表，请使用
fieldEmptyElements[I].classList.contains（…）
。为什么要在循环中检查自己，而不让选择器引擎完成工作？这就是它优化的目的。
document.querySelectorAll（'div.cel.empty'））.length
将告诉您在一个干净、简单的方法调用中是否有类为
空的
div.cell
元素…@Cbroe-但是当我编写此函数时：
函数checkHowManyEmpty（）{var fieldEmptyElements=document.queryselectoral（'div.cel.empty'）；如果（fieldEmptyElements.length>=1）{console.log（“至少一个元素”）；}else if（fieldEmptyElements.length=0）{console.log（“无空元素”）；}}
它显示console.log中是否有类为空的元素，但在没有此类元素的情况下则不显示…
else if（fieldEmptyElements.length=0）
-这是一个赋值；比较运算符是
=
…但是如果在这里，为什么还需要一个else呢？如果长度不是
=1
，那么它必须是0…它不能变成负数。@CBroe是啊！在你回答之前，我看到了一个错误几秒钟：D无论如何，当你使用比较时它是有效的！而我呢使用它，因为我正在学习，这种记法更好地记住什么是什么；）谢谢！