使用js如何獲取頁面上的所有標簽

發(fā)布時間：2020-10-29 10:49:58 來源：億速云閱讀：213 作者：小新欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)使用js如何獲取頁面上的所有標簽的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

我們先來捋捋思路，那要從頁面上獲取標簽，不用說我們肯定會想到DOM操作，那獲取到了之后呢，我們又不確定某個元素有沒有子元素，那怎么辦呢，這個時候我們肯定會想到遞歸啊

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <ul></ul>
</body>

</html>
<script>
    var map = {};
    //采用遞歸調(diào)用的方法，比較方便和簡單。
    function fds(node) {
        
        if (node.nodeType === 1) {
            //這里我們用nodeName屬性，直接獲取節(jié)點的節(jié)點名稱
            var tagName = node.nodeName;
            //判斷對象中存在不存在同類的節(jié)點，若存在則添加，不存在則添加并賦值為1
            map[tagName] = map[tagName] ? map[tagName] + 1 : 1;
        }
            //獲取該元素節(jié)點的所有子節(jié)點
        var children = node.childNodes;
        for (var i = 0; i < children.length; i++) {
            //遞歸調(diào)用
            fds(children[i])
        }
    }
    fds(document);
    console.log(map)
</script>

感謝各位的閱讀！關(guān)于使用js如何獲取頁面上的所有標簽就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細節(jié)

使用js如何獲取頁面上的所有標簽

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽