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="http://miracleart.cn/link/a725c77dfdec0a53250d0709ed36e1fe" title="http://miracleart.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="http://miracleart.cn/link/65dfa16ba6de9bdb34ea435c9fe2a425" class="toggle">Panel 1</a> | <a href="http://miracleart.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!