getElementsByclassName与querySelectorAll的对比

最新推荐文章于 2023-12-28 16:24:57 发布

liun_n

最新推荐文章于 2023-12-28 16:24:57 发布

阅读量250

点赞数 1

分类专栏： JavaScript 文章标签： javascript html

本文链接：https://blog.csdn.net/qq_39706777/article/details/119953871

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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进行遍历

liun_n

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
getElementsByclassName与querySelectorAll的对比

getElementByclassName与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, i
复制链接

扫一扫

专栏目录