Heim > Web-Frontend > js-Tutorial > Hauptteil

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

青灯夜游
Freigeben: 2018-10-25 15:43:56
nach vorne
3422 Leute haben es durchsucht

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:cnblogs.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage