Worauf kommt es an, ein ID-Attribut in einem Script-Tag zu verwenden?

id ist nur ein weiterer Accessor des <script> -Tags innerhalb der DOM-Struktur. Sie könnten theoretisch document.getElementById() verwenden, um den Knoten <script> abzurufen und ihn zu löschen oder andere Attribute hinzuzufügen (obwohl ich nicht glaube, dass Sie das Attribut src ändern können, sobald es im DOM geladen ist). Der id ist jedoch für diese Operationen nicht erforderlich - auf ihn könnte auch von jeder DOM-Funktion wie getElementsByTagName("script") zugegriffen worden sein.

Wenn Sie auf das <script> -Tag mit DOM-Manipulationen zugreifen müssen, macht das id es ein wenig einfacher. Sonst gibt es wenig Nutzen ¹ .

¹ Das entspricht dem Hinzufügen eines id -Attributs zu beliebigen DOM-Knoten, obwohl Knoten, die die Darstellung beeinflussen, auch von CSS profitieren, das auf id abzielt. im Gegensatz zu einem <script> -Tag ...

Wie die früheren Antworten erwähnt haben, werden die Ergebnisse nach dem Ausführen des Codes im Skript-Tag nicht mehr rückgängig gemacht, indem der Script-Knoten ersetzt / gelöscht wird.

Aber die ID kann nützlich sein, wenn der Code bisher nicht ausgeführt wurde. Folgendes ist ein solches Skript-Tag:

Da der Browser diesen Skripttyp nicht kennt, ignoriert er die Ausführung, aber das Tag und sein Code sind weiterhin im DOM verfügbar.

Arbeitsbeispiel: Ссылка

Dies wird hauptsächlich für Client-seitige Vorlagen verwendet. Eine Vorlage, Beispiel für Moustache.js , wird in einem solchen Skript-Tag gespeichert. Wenn es kompiliert werden muss, wird es von einem Tag unter Verwendung seiner ID erhalten. Vorteil bei diesem Ansatz ist, dass die Ansicht (Vorlagen) und das Modell (Variable js, die Daten enthalten, die in der Ansicht angezeigt werden sollen) vollständig getrennt sind.

Abgesehen von dieser Vorgehensweise gibt es keine allgemeine Verwendung für eine ID für ein Skript-Tag

Es ist nicht sinnvoll, Ihren Skript-Tags eine ID zu geben, da die Skripts auf einer Seite nur in der Reihenfolge ausgeführt werden, in der sie sich auf der Seite befinden.

Das Hinzufügen eines ID-Attributs zu Ihren Skriptelementen dient zwei spezifischen Zwecken:
1. Sie können Ihre Skripts beim Lesen des Quellcodes der Webseite erkennen; 2. Die HTML-Referenz besagt, dass Sie in der Lage sein sollten, den Inhalt eines identifizierbaren Elements zu überschreiben (aber die Erfahrung lehrt uns, dass dies nur wenige Browser tun).

Wenn Sie beispielsweise bereits ein Skript mit id="myParticularScript" haben, sollte das Hinzufügen eines neuen Skriptelements mit derselben ID das alte ersetzen, indem Sie eine neue (oder dieselbe) Quelle laden, die Sie im src-Attribut angegeben haben .

Obwohl meine Erfahrung mit dem dynamischen Laden von Javascripts beweist, dass das neue Skript in den Browser geladen wird, konnte kein Browser, den ich getestet habe, das ältere Element ersetzen, das dieselbe ID enthält.

Damit bleibt nur der erste Zweck: einfache Erkennung. In meiner Arbeit verwenden wir Systeme, um Webseiten zu generieren, und wir wussten nicht immer, welches Skript (oder welcher CSS-Link) von welcher Komponente hinzugefügt wurde. Wir haben dies gelöst, indem wir IDs sowohl den Skript-Tags als auch den CSS-Link-Tags hinzugefügt haben - IDs, die wir erkennen und auf unsere Systeme zurückverfolgen konnten.

Es gibt eine Verwendung, die niemand erwähnt: Das Attribut id="test" setzt die globale Variable test , die auf das Element selbst zeigt. Siehe:

Ich fand eine sehr neue Verwendung, um einem script -Tag ID zu geben. Ich hatte tawk.to Skript in meine Website eingebettet, um das Chat-Widget anzuzeigen. Das Problem ist, das Widget versteckt sich nicht, wenn ich die Seite drucken möchte. So würden Sie das Widget auf jeder Seite in der Druckvorschau wiederholt sehen, was oft den Seiteninhalt verdeckt!

Um das Problem zu lösen, habe ich zuerst beobachtet, wie das Widget hinzugefügt wird. Ich habe herausgefunden, dass das Widget direkt nach dem Skript-Tag hinzugefügt wird. Aber das Widget (eingeschlossen in einem div -Tag) hat keine Klasse und es hat eine zufällig erzeugte ID, die jedes Mal anders ist.

Es musste einen anderen Weg geben, dieses Widget zu finden (das div -Tag), ohne auf JavaScript-Tricks angewiesen zu sein. Das ist, als ich erfuhr, dass CSS einen "benachbarten Geschwister" oder "nächsten Geschwister" Selektor hat , die überraschenderweise sehr gute Browserunterstützung bietet.

Also zuerst, Ich habe eine ID für das Script-Tag vergeben.

Dann habe ich die ID und den nächsten gleichgeordneten Selektor verwendet, um CSS auf das Widget anzuwenden.

Viola! Problem gelöst.