Verbesserung des strukturellen Markups mit JavaScript

Schlüsselpunkte

Verbessertes strukturiertes Markieren mit JavaScript kann die Zugänglichkeit und Wartbarkeit des Webseiteninhalts erheblich verbessern und gleichzeitig die Dateigröße reduzieren.
JavaScript kann effektiv verwendet werden, um HTML -Elementen dynamisch Funktionen hinzuzufügen, z.
• cite Integrieren Sie JavaScript in strukturierte Tags mit dynamischen Benutzeroberflächen, z. B. Registerkarte ohne Seiten -Aktualisierung.
• Es ist entscheidend sicherzustellen, dass JavaScript -Verbesserungen die grundlegende Funktionalität von Webseiten nicht behindern.
• Erweiterte JavaScript -Technologien wie Ereignisbearbeitung und DOM -Operationen können verwendet werden, ohne vorhandene Skripte oder Browser -Standardeinstellungen zu stören, um die Kompatibilität zu gewährleisten und die Benutzererfahrung zu verbessern.
Vor einigen Jahren war die wichtigste Fähigkeit beim Schreiben von HTML darin, genügend Tabellenfähigkeiten zu beherrschen, um zwei Hauptbrowser davon zu überzeugen, mehr oder weniger wie Sie möchten. Das moderne Web ist sehr unterschiedlich, und die Qualität Ihres Markups hängt davon ab, wie geschickt Sie strukturelle Elemente wie Titel, Absätze und Listen verwenden, um Ihre Inhalte zu beschreiben. Die Vorteile dieses Ansatzes wurden mehrmals erläutert: einfacher zu verwalten Code, kleinere Dateigrößen, bessere Zugänglichkeit und die Möglichkeit, das Erscheinungsbild einer Website von einem einzelnen Stylesheet zu steuern, anstatt ihn in einem riesigen Block mit markierten Blöcken zu ändern, die mehrere Seiten umfassen. Ein weniger häufig besprochener Vorteil ist, dass gut strukturierte Tags die Tür für zusätzliche Website-Verbesserungen öffnen, die auf der clientseitigen Web-Drittanbieter-Technologie JavaScript basieren. In diesem Artikel können zwei Möglichkeiten untersucht, wie JavaScript und gut strukturierte Tags zusammenarbeiten können. Das erste Beispiel zeigt, wie die Blockreferenzen verbessert werden, indem sich eine Verbindung zu seinem CITE -Attribut verbindet. Das zweite Beispiel demonstriert ein Skript "Best Practice", um Links zu erstellen, die auf der Seite sichtbar umschalten.

Blockreferenz

Für unser erstes Beispiel schauen wir uns die unauffälligen Blockreferenzelemente an. Dieses Element wird oft für die Anwendung der Eindrücke verwechselt, aber seine korrekte Verwendung ist, dass die Markierungsreferenzen, die visuell vom umgebenden Text getrennt werden sollten. Das Startblock -Referenz -Tag kann ein optionales Zitatattribut haben, das die URL der Zitierquellenseite enthalten sollte. Das einzige Problem mit der Cite -Eigenschaft ist, dass der Browser sie vollständig ignoriert. Tag -Puristen mögen es zu schätzen wissen, aber aus rein praktischer Sicht hat es keinen Nutzen, um die Zufriedenheit der Verwendung der richtigen Marke zu erhalten. Hier kommt JavaScript ins Spiel. Mit DOM können Sie eine Link zur Quelle des Zitats am Ende jeder Blockreferenz mit dem Zitatattribut hinzufügen. Hier ist der Funktionscode, der dies tut:

Schauen wir uns den Körper der Funktion genauer an.

function extractBlockquoteCitations() {
    var quotes = document.getElementsByTagName('blockquote');
    for (var i = 0; i < quotes.length; i++) {
        var cite = quotes[i].getAttribute('cite');
        if (cite) {
            var a = document.createElement('a');
            a.setAttribute('href', cite);
            a.setAttribute('title', cite);
            a.appendChild(document.createTextNode('Source'));
            var p = document.createElement('p');
            p.className = 'blockquotesource';
            p.appendChild(a);
            quotes[i].appendChild(p);
        }
    }
}

Diese Codezeile verwendet die DOM -Methode getElementsByTagName, um alle Blockreferenzelemente auf der aktuellen Seite zu finden und sie einem Array mit dem Namen quotes zuzuweisen (tatsächlich htmlcollection, aber es handelt sich um eine Datenstruktur, die sich wie ein Array verhält).

for (var i = 0; i < quotes.length; i ) { ... }

Jetzt durchqueren wir den gesammelten Blockreferenzknoten. Jedes Mal, wenn wir schleifen, verwenden wir die getAttribute -Methode, um das Zitatattribut aus dem Element abzurufen. Wenn die Cite -Eigenschaft festgelegt ist, werden wir mit dem interessanten Teil fortfahren: Erstellen Sie am unteren Rand des Zitats einen "Quell" -Link.

var a = document.createElement('a'); a.setAttribute('href', cite); a.setAttribute('title', cite);

Wenn wir mit der DOM die richtige Möglichkeit dazu haben, diese Elemente mithilfe der createElement -Methode programmgesteuert zu erstellen, wenn wir mithilfe der

-Methode neue HTML -Elemente hinzufügen möchten. Die obigen Zeilen erstellen ein neues 'A' Element und weisen ihm die HREF- und Titelattribute zu, die beide als URLs des Zitats festgelegt werden.

a.appendChild(document.createTextNode('Source'));

createTextNode Wir möchten, dass das Link -Element einen Text enthält, den Benutzer klicken können, um den Link zu aktivieren. Der ursprüngliche Textknoten wird mit der appendChild -Methode erstellt. DOM behandelt HTML -Elemente als einen Baum aus. Um unseren neu erstellten Link Text hinzuzufügen, müssen wir seine

-Methode aufrufen.

var p = document.createElement('p'); p.className = 'blockquotesource'; p.appendChild(a);

appendChild Damit wir neue Links mit CSS flexibel stylen können, können wir sie in ein Absatzelement einwickeln. Der obige Code erstellt ein solches Element, legt seine Klasse auf "blockquotesource" fest, um einen CSS -Haken bereitzustellen, und fügt dann den Link mit

hinzu. Zu diesem Zeitpunkt entspricht das von uns erstellte neue Dokumentfragment dem folgenden HTML:

<p> <a href="https://www.php.cn/link/a725c77dfdec0a53250d0709ed36e1fe" title="https://www.php.cn/link/a725c77dfdec0a53250d0709ed36e1fe">Source</a> </p>

function%20extractBlockquoteCitations()%20%7B%0A%20%20%20%20var%20quotes%20=%20document.getElementsByTagName('blockquote');%0A%20%20%20%20for%20(var%20i%20=%200;%20i%20<%20quotes.length;%20i++)%20%7B%0A%20%20%20%20%20%20%20%20var%20cite%20=%20quotes%5Bi%5D.getAttribute('cite');%0A%20%20%20%20%20%20%20%20if%20(cite)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20a%20=%20document.createElement('a');%0A%20%20%20%20%20%20%20%20%20%20%20%20a.setAttribute('href',%20cite);%0A%20%20%20%20%20%20%20%20%20%20%20%20a.setAttribute('title',%20cite);%0A%20%20%20%20%20%20%20%20%20%20%20%20a.appendChild(document.createTextNode('Source'));%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20p%20=%20document.createElement('p');%0A%20%20%20%20%20%20%20%20%20%20%20%20p.className%20=%20'blockquotesource';%0A%20%20%20%20%20%20%20%20%20%20%20%20p.appendChild(a);%0A%20%20%20%20%20%20%20%20%20%20%20%20quotes%5Bi%5D.appendChild(p);%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D%0A

%20Folgendes%20ist%20der%20Code,%20der%20unsere%20Blockquotes%20-Funktion%20zum%20Ladeereignis%20des%20Fensterobjekts%20hinzuf%C3%BCgt:%20

%0A

%20addEvent(window,%20'load',%20extractBlockquoteCitations);%20

%0A

%20Der%20letzte%20Schritt%20besteht%20darin,%20das%20Zitat%20mit%20CSS%20zu%20stylen.%20Hier%20ist%20ein%20relativ%20einfacher%20CSS%20-Code%20-Snippet,%20der%20Blockreferenzen%20behandelt:%20

%0A

function%20addEvent(obj,%20evType,%20fn)%7B%0A%20%20%20%20if%20(obj.addEventListener)%7B%0A%20%20%20%20%20%20%20%20obj.addEventListener(evType,%20fn,%20false);%0A%20%20%20%20%20%20%20%20return%20true;%0A%20%20%20%20%7D%20else%20if%20(obj.attachEvent)%7B%0A%20%20%20%20%20%20%20%20var%20r%20=%20obj.attachEvent(" on fn return r else false>
 Das fertige Produkt kann hier angezeigt werden. 
 Panel Switch 
 Betrachten wir nun einen fortgeschritteneren dynamischen Effekt - den Panel -Switcher. Das Ziel hier ist es, mehrere Panels auf der Seite (mit Div -Tags) zu platzieren und jeweils nur ein Panel anzuzeigen. Eine Reihe von immer sichtbaren Links kann verwendet werden, um das aktuell angezeigte Panel auszuwählen. Dies ist nützlich, um Registerkarten Schnittstellen zu erstellen, um eine Reihe verwandter Bildschirme zu durchsuchen, ohne die Seite jedes Mal zu aktualisieren, wenn Sie eine Registerkarte auswählen. 
 Wenn Sie JavaScript verwenden, um Ihre Seite zu verbessern, müssen Sie sich an eine gute Regel erinnern, dass die Seite noch verfügbar sein muss, auch wenn JavaScript deaktiviert ist. In diesem Fall bedeutet dies, dass die ideale Lösung wie angekündigt funktionieren sollte, wenn JavaScript aktiviert ist. In einer Nicht-JavaScript-Umgebung sollten jedoch alle Panels auf der Seite angezeigt werden, wobei jeder Link direkt mit dem relevanten Panel und mit URL-Snippets verknüpft wird. 
 dann ist dies die einfachste Marke, die funktionieren kann: 
 ` Panel 1  |
  Dies ist Panel 1 
 Dies ist Panel 2 
`
 überraschenderweise ist das obige fast das gesamte Markup, das wir brauchen, um ein JavaScript zu senken, um den gewünschten Effekt zu erzielen. Wir können mit dem obigen Code fortfahren, aber lassen Sie uns dem Link eine Klasse hinzufügen, um klar zu machen, dass wir spezielle Vorgänge ausführen möchten: 
 <a href="https://www.php.cn/link/65dfa16ba6de9bdb34ea435c9fe2a425" class="toggle">Panel 1</a> | <a href="https://www.php.cn/link/379d08c7a38df48c777c07ea990a3bcf" class="toggle">Panel 2</a> 
 // 
 Folgendes ist, wie JavaScript funktioniert. Wenn die Seite geladen wird, scannt das Skript alle Links auf der Seite nach Links, die in seiner Klasse "Umschütteln" enthalten. Für alle gefundenen Links wird das HREF -Attribut überprüft und das angegebene Element positioniert und zum Zielelementarray hinzugefügt. Alle anderen Elemente mit Ausnahme des ersten Elements werden "geschlossen". Wenn also die Seite geladen wird, bleibt nur das erste Feld sichtbar. Der Link selbst hängt einen JavaScript -Ereignis -Handler bei, damit ihre entsprechenden Panels bei der Aktivierung angezeigt werden können. 
 Das vollständige Skript kann hier angezeigt werden. Das Folgende ist eine Schritt-für-Schritt-Erklärung, wie der Code funktioniert. 
 var et_toggleElements = []; 
 Die erste Zeile erstellt ein globales leeres Array, das Verweise auf die Panel -Elemente auf der Seite speichert. Da dieses Skript globale Variablen und viele Funktionen enthält, präfix wir jede Funktion mit "et_" (für "Easy Toggle") - was die Möglichkeit verringert, dass unsere Funktion Konflikte mit anderen Skripten auf derselben Seite hat. 
 /* Initialisation */ function et_init() { var i, link, id, target, first; first = true; for (i = 0; (link = document.links[i]); i  ) { ... } 
 Bisher haben wir einige Variablen initialisiert, das erste Flag auf True gesetzt und über alle Links im Dokument iteriert. Das Deklarieren von Variablen mit var ist sehr wichtig, da sie sicherstellt, dass die Variable für die Funktion lokal ist. Ohne diesen Schritt sind sie global zugänglich und können andere Skripte beeinträchtigen. 
 if (/btoggleb/.exec(link.className)) { ... } 
 Diese Bedingung überprüft, ob die derzeit verknüpfte Klasse "Toggle" enthält. Wir verwenden reguläre Ausdrücke, anstatt nur link.className == 'toggle' zu überprüfen, da Klasseneigenschaften mehrere Klassen enthalten können, die durch Leerzeichen getrennt sind. /btoggleb/ ist ein regulärer Ausdruck; b
 
 id = link.href.split('#')[1];
 Wenn die Liste der verknüpften Klassen umschaltet, gehen wir davon aus, dass das Ziel des Links ein URL -Snippet ist. 

 
 Teilen Sie den Link HREF am # tag - Wir wissen, dass der Teil, an dem wir interessiert sind, nach # ist. Daher indizieren wir das Ergebnisarray direkt mit link.href.split('#'), um die Ziel -ID zu extrahieren. [1]
 
 target = document.getElementById(id); et_toggleElements[et_toggleElements.length] = target;
 Hier gehen wir noch einmal davon aus, dass der Link angibt, dass das Element existiert. Wir verwenden die getElementById() -Methode, um das Element zu erhalten und es dann zu unserem Elementarray hinzuzufügen, indem wir es einem Array -Index zuweisen, der der aktuellen Länge des Arrays entspricht. Dies funktioniert, weil das Array die Indexierung von 0 beginnt, aber die Arraylänge zählt von 1. 
 if (first) { first = false; } else { target.style.display = 'none'; } 
 Hier kommt das erste Logo, das wir zuvor definiert haben, ins Spiel. Wir möchten, dass das erste Panel auf der Website sichtbar bleibt, während die anderen mit JavaScript -Äquivalent zu "Anzeige: Keine" in CSS verborgen sind. Diese Flagge ermöglicht es uns, dies zu tun. 
 link.onclick = et_toggle; 
 Schließlich weisen wir die Funktion et_toggle dem verknüpften onclick -Ereignis zu, wodurch die Funktion jedes Mal aufgerufen wird, wenn die Verbindung aktiviert wird. Der nächste Schritt besteht darin, die Funktion zu definieren. 
function extractBlockquoteCitations() {
    var quotes = document.getElementsByTagName('blockquote');
    for (var i = 0; i < quotes.length; i++) {
        var cite = quotes[i].getAttribute('cite');
        if (cite) {
            var a = document.createElement('a');
            a.setAttribute('href', cite);
            a.setAttribute('title', cite);
            a.appendChild(document.createTextNode('Source'));
            var p = document.createElement('p');
            p.className = 'blockquotesource';
            p.appendChild(a);
            quotes[i].appendChild(p);
        }
    }
}
 Auch hier verwenden wir die split -Methode, um die ID aus dem Link zu extrahieren. 
 Jetzt, wo wir wissen, welches Panel angezeigt werden soll, können wir unser Element -Array durchführen und alle anderen Elemente schließen, mit Ausnahme derjenigen, deren ID mit der ID des gewünschten Panels übereinstimmt. 
 Durch die Rückgabe von Falsch verhindern wir, dass der Link beim Aktivieren tatsächlich befolgt wird, was unerwünschte Sprünge auf Seiten verursachen kann, die im Browser angezeigt werden. 
 Der letzte Schritt besteht darin, die Funktion addEvent mit der zuvor beschriebenen Funktion et_init in das Laden des Fensters zu registrieren. 
 addEvent(window, 'load', et_init); 
 Sie können den laufenden Abschlusscode hier anzeigen. 
 Schlussfolgerung 
 In diesem Artikel sehen wir zwei Möglichkeiten, wie gut strukturierte Marker mit JavaScript und W3C DOM für nützliche Effekte verwendet werden können. Ich hoffe, dieser Beitrag inspiriert Sie dazu, neue Möglichkeiten zu finden, JavaScript und Smart Tagging zu verwenden. 
 Weiteres Lesen 
 Es gibt viele andere hervorragende Beispiele für JavaScript -Effekte basierend auf strukturierten Tags. Hier sind einige Beispiele, die es wert sind, auf: 
 geachtet zu werden,

 Aaron Boodman's Labels.js 
 schöne Titel von Stuart Langridge 
 Stuart Langridge's aqlists 
 Stuart Langridge's Sorttable 
 Inhaltsverzeichnis von Peter Paul-Koch 

 häufig gestellte Fragen zu strukturierten Tags in JavaScript 
 Was sind strukturierte Tags in JavaScript? 
 strukturierte Tags in JavaScript sind die Verwendung von HTML -Elementen zur Beschreibung des Inhalts und der Struktur eines Webdokuments. Diese Elemente enthalten Titel, Absätze, Listen und mehr. JavaScript kann diese Elemente manipulieren, um dynamische und interaktive Webseiten zu erstellen. Beispielsweise kann JavaScript den Inhalt eines HTML -Elements ändern, den Stil (CSS) eines HTML -Elements ändern und sogar neue HTML -Elemente hinzufügen. 
 Wie interagiert JavaScript mit HTML -Elementen? 
 JavaScript interagiert mit HTML -Elementen über das Dokumentobjektmodell (DOM). DOM repräsentiert die Struktur einer Webseite, die JavaScript betreiben kann. Beispielsweise kann JavaScript die document.createTextNode() -Methode zum Erstellen eines neuen Textknotens verwenden und anschließend an ein vorhandenes HTML -Element anhängen. 
 Was sind Textknoten in JavaScript? 
 Ein Textknoten in JavaScript ist ein Knotentyp, der den Textinhalt eines Elements oder eines Attributs darstellt. Es kann mit der Methode document.createTextNode() erstellt werden. Diese Methode erstellt einen neuen Textknoten, der an ein vorhandenes HTML -Element angehängt werden kann, sodass Sie der Webseite dynamisch Text hinzufügen können. 
 Wie füge ich HTML JavaScript hinzu? 
 JavaScript kann HTML auf verschiedene Weise hinzugefügt werden. Sie können das <script></script> -Tag verwenden, um es direkt in eine HTML -Datei aufzunehmen, oder Sie können das Attribut <script></script> des src -Tags verwenden, um mit einer externen JavaScript -Datei zu verknüpfen. Sie können auch Ereigniseigenschaften wie onclick oder onload verwenden, um den Javascript -Code auszuführen, wenn ein bestimmtes Ereignis auftritt. 
 wie kann ich document.createTextNode() Methode verwenden? 
Die 
 document.createTextNode() -Methode wird verwendet, um einen neuen Textknoten zu erstellen. Nennen Sie zuerst diese Methode mit dem Text, den Sie als Parameter hinzufügen möchten. Dies gibt einen neuen Textknoten zurück, der dann mit der appendChild() -Methode an ein vorhandenes HTML -Element angehängt werden kann. 
 Was ist das DOMM -Model (DOM)? 
 Dokumentobjektmodell (DOM) ist die Programmierschnittstelle für HTML- und XML -Dokumente. Es repräsentiert die Struktur eines Dokuments als ein Objektbaum, wobei jedes Objekt einen Teil des Dokuments darstellt. JavaScript kann mit dem DOM interagieren, um den Inhalt und die Struktur einer Webseite zu manipulieren. 
 Wie ändere ich den Inhalt von HTML -Elementen mit JavaScript? 
 Sie können den Inhalt eines HTML -Elements mit dem Attribut innerHTML in JavaScript ändern. Diese Eigenschaft kann verwendet werden, um den HTML -Inhalt eines Elements zu erhalten oder festzulegen. Wenn es beispielsweise ein Element mit der ID "Myelement" gibt, kann es so geändert werden: document.getElementById('myElement').innerHTML = 'New content';. 
 Wie kann man den Stil von HTML -Elementen mit JavaScript ändern? 
 Sie können den Stil von HTML -Elementen unter Verwendung des style -attributs in JavaScript ändern. Diese Eigenschaft ist ein Objekt, das alle CSS -Eigenschaften des Elements enthält. Wenn es beispielsweise ein Element mit der ID "Myelement" gibt, kann es so geändert werden: document.getElementById('myElement').style.color = 'red';. 
 Wie füge ich neue HTML -Elemente mit JavaScript hinzu? 
 Sie können neue HTML -Elemente mit der createElement() -Methode in JavaScript hinzufügen. Diese Methode erstellt ein neues Element, das dann mit der appendChild() -Methode an ein vorhandenes Element angehängt werden kann. Sie können beispielsweise einen neuen Absatz erstellen und ihn wie folgt zum Körper des Dokuments hinzufügen: var p = document.createElement('p'); document.body.appendChild(p);. 
 Was sind die Ereigniseigenschaften in JavaScript? 
 Das Ereignisattribut in JavaScript wird verwendet, um den JavaScript -Code zu definieren, der ausgeführt wird, wenn ein bestimmtes Ereignis auftritt. Diese Ereignisse können auf eine Schaltfläche klicken (onclick), das Laden einer Seite (onload) oder das Verschieben der Maus über ein Element (onmouseover) usw. Der Code für das Ereignis ist direkt in den Eigenschaften des HTML -Elements definiert. 
Das obige ist der detaillierte Inhalt vonVerbesserung des strukturellen Markups mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!