可以在JavaScript中更改其名称的访问元素可以

Question

我想将元素类的类别从 score -box1 更改为 score -box1. -Active 。我创建了一个const $ target，以尝试访问类得分-box1，但它不起作用。

const $target = document.getElementByClassname('score -box1')
function PlayerScore(score = 0){
    if(score == 1){
        $target.toggle('-active');
    }else if(score == 2){
        $target.toggle('-active');
    }else if(score == 3){
        $target.toggle('-active');
    }

    return( /*html*/
    `
        <div class = "container">
            <div class = "score -box1">one</div>
            <div class = "score -box2">two</div>
            <div class = "score -box3">three</div>
        </div>
    `
    )
}

Answer 1

正确的方法是.querySelectorall，并且它返回节点列表，如果您在下面的末尾添加[0]，您将获得该节点列表的第一个元素（也许您现在想要的），但是，如果您想要所有目标元素使用for loop通过document.queryselectorall（'scorce -box1'）循环循环。

const $target = document.querySelectorAll('score -box1')[0]
function PlayerScore(score = 0){
    if(score == 1){
        $target.toggle('-active');
    }else if(score == 2){
        $target.toggle('-active');
    }else if(score == 3){
        $target.toggle('-active');
    }

    return( /*html*/
    `
        <div class = "container">
            <div class = "score -box1">one</div>
            <div class = "score -box2">two</div>
            <div class = "score -box3">three</div>
        </div>
    `
    )
}

或者，您可以用.querySelectorAll使用.querySelector，它将自动删除第一个元素： https://www.w3schools.com/jsref/met_document_queryselector.asp