首頁 > web前端 > js教程 > 使用js取得頁面上的所有標籤的方法(程式碼詳解)

使用js取得頁面上的所有標籤的方法(程式碼詳解)

青灯夜游
發布: 2018-10-25 15:43:56
轉載
3491 人瀏覽過

本篇文章帶給大家的內容是介紹使用js取得頁面上的所有標籤的方法(程式碼詳解)。有一定的參考價值,有需要的朋友可以參考一下,希望對你們有幫助。

前兩天看到一個題,是問如何從頁面上獲取所有的標籤的並查看他們的數量,感覺還是有點意思的,所以給大家來搞一下子

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

那現在我們有了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 = {};
    //采用递归调用的方法,比较方便和简单。
    function fds(node) {
        
        if (node.nodeType === 1) {
            //这里我们用nodeName属性,直接获取节点的节点名称
            var tagName = node.nodeName;
            //判断对象中存在不存在同类的节点,若存在则添加,不存在则添加并赋值为1
            map[tagName] = map[tagName] ? map[tagName] + 1 : 1;
        }
            //获取该元素节点的所有子节点
        var children = node.childNodes;
        for (var i = 0; i < children.length; i++) {
            //递归调用
            fds(children[i])
        }
    }
    fds(document);
    console.log(map)
</script>
登入後複製

以上是使用js取得頁面上的所有標籤的方法(程式碼詳解)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
javascript - js addClass 無效
來自於 1970-01-01 08:00:00
0
0
0
php呼叫js並取得js的回傳值問題
來自於 1970-01-01 08:00:00
0
0
0
js進階教程
來自於 1970-01-01 08:00:00
0
0
0
找不到js檔案程式碼
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板