getElementsByclassName与querySelectorAll的对比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li class="li"></li>
        <li class="li"></li>
    </ul>
    <script>
        const li_select = document.querySelectorAll(".li")
        const li_class = document.getElementsByClassName('li')

        console.log(li_select)  //NodeList(2)
        console.log(li_class)   //HTMLCollection(2)

        li_select.forEach((li)=>{
      
      
            console.log("li_selcet",li)
        })

        Array.from(li_class).forEach((li)=>{
      
      
            console.log("li_class",li)
        })

        let new_li = document.createElement("li")
        new_li.classList.add('li')
        document.getElementsByTagName("ul")[0].appendChild(new_li)

        console.log(li_select)  //NodeList(2)
        console.log(li_class)   //HTMLCollection(3)

    </script>
</body>
</html>

获取数据方面（动态/静态）

querySelectorAll：保存的是获取的那个时刻的静态dom结构
getElementByclassName：动态获取dom结构

返回数据方面

querySelectorAll：返回NodeList，可以直接使用forEach进行遍历
getElementByclassName：返回HTMLCollection，需要转换为数组后才能使用forEach进行遍历

getElementsByclassName与querySelectorAll的对比

getElementsByclassName与querySelectorAll的对比

获取数据方面（动态/静态）

返回数据方面

猜你喜欢