Heim > Artikel > Web-Frontend > So erhalten Sie mit js alle Tags auf der Seite (detaillierte Code-Erklärung)

So erhalten Sie mit js alle Tags auf der Seite (detaillierte Code-Erklärung)

青灯夜游nach vorne: 2018-10-25 15:43:563413Durchsuche

Der Inhalt dieses Artikels besteht darin, die Methode zur Verwendung von js zum Abrufen aller Tags auf der Seite vorzustellen (detaillierte Codeerklärung). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Ich habe vor zwei Tagen eine Frage gesehen, in der es darum ging, wie man alle Tags von der Seite erhält und ihre Nummer überprüft. Ich fand es etwas interessant, also werde ich es für alle tun

Lassen Sie uns zuerst darüber nachdenken, ob ein bestimmtes Element Unterelemente hat ?Zu diesem Zeitpunkt werde ich definitiv an Rekursion denken

Da wir nun DOM-Operationen und Rekursion haben, wird es einfacher zu handhaben sein und wir können Code direkt schreiben. Unten finden Sie den Code mit Kommentaren, den Sie abrufen können Notieren Sie es sich als Referenz

<!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>

Das obige ist der detaillierte Inhalt vonSo erhalten Sie mit js alle Tags auf der Seite (detaillierte Code-Erklärung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

递归 JS dom

Stellungnahme：

Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Ein einfaches Verständnis der Klassen in es6 (mit Beispielen)Nächster Artikel：Ein einfaches Verständnis der Klassen in es6 (mit Beispielen)

In Verbindung stehende Artikel

Mehr sehen