【Javascript】【DOM】document.querySelector和document.getElementByClassName的区别

当通过js去改变DOM结构时 document.getElementByClassName会更新旧的查询结果 document.querySelector则不会

html代码

测试document.getElementByClassName

    
        $(() => {
            let items = document.getElementsByClassName("clz");
            console.log(items.length); //5

            let appendNode = document.createElement("div");
            appendNode.classList.add("clz");
            document.body.appendChild(appendNode);
            console.log(items.length); //6，自动更新旧的查询结果
        });
    

测试document.querySelector

    
        $(() => {
            let items = document.querySelectorAll(".clz");
            console.log(items.length); //5

            let appendNode = document.createElement("div");
            appendNode.classList.add("clz");
            document.body.appendChild(appendNode);
            console.log(items.length); //5，不会更新查询结果
        });
    

document.getElementByClassName更胜一筹！