Von einem Übersetzer: David Gilbertson ist ein bekannter Autor, der über Web- und Kryptowährungstechnologien schreibt. Er konnte ein großes Publikum von Lesern zusammenbringen, das über alle möglichen Tricks und interessanten Bereiche berichtet.
Kleine EinführungLassen Sie uns den Unterschied zwischen HTML und DOM diskutieren.
Betrachten wir zum Beispiel von HTML das
Tabellenelement. Sie können es in einer Datei mit der Erweiterung .html verwenden. Darin geben wir eine Reihe von Attributen an, die das Erscheinungsbild und das "Verhalten" der Seite bestimmen.
Und das ist alles, es gibt nichts mit JavaScript zu tun.
Mit dem DOM können Sie Ihren JavaScript-Code mit HTML-Elementen in einem Dokument kombinieren, um mit ihnen als Objekte zu interagieren.
Dies ist ein Dokument-in-Objekt-Modell.
Jeder Elementtyp in HTML verfügt über eine eigene "DOM" -Schnittstelle, die Eigenschaften und Methoden definiert. Beispielsweise verfügt die
Tabelle über eine Schnittstelle namens
HTMLTableElement .
Sie können einen Link zu einem bestimmten Element erhalten, indem Sie Folgendes schreiben:
Sie haben Zugriff auf alle Eigenschaften und Methoden, die für einen bestimmten Elementtyp verfügbar sind. Sie können beispielsweise mit searchBox.value auf die Werteigenschaften zugreifen oder den Cursor mit searchBox.focus () auf eine bestimmte Position setzen.
Lassen Sie uns nun eine weitere wichtige Sache diskutieren: Die meisten Elemente verfügen nicht über interessante Methoden. Wenn Sie sich nicht absichtlich mit diesem Thema befassen, können Sie leicht etwas Wichtiges übersehen.
Aber zum Glück ist die Liebe zum Detail und das Studium der Spezifikationen meine Stärke. Deshalb habe ich alles Notwendige getan und schreibe über die Ergebnisse in diesem Artikel.
Wenn Sie versuchen möchten, sich selbst mit dem DOM zu befassen, sollten Sie die Browser-Tools verwenden, um einige Elemente zu lernen. Wählen Sie dazu eine davon im Elementbaum aus und geben Sie $ 0 in die Konsole ein. Dadurch erhalten Sie einen Link zu dem von Ihnen ausgewählten Element. Geben Sie dir ($ 0) ein, um es in ein Objekt zu konvertieren.
In der Konsole können Sie viele Dinge
tun .
Skillbox empfiehlt: Web Developer Online-Kurs
Wir erinnern Sie daran: Für alle Leser von Habr - ein Rabatt von 10.000 Rubel bei der Anmeldung für einen Skillbox-Kurs mit dem Habr-Aktionscode.
Nr. 1. Tabellenmethoden
Es gibt viele praktische Methoden, mit denen Sie Tische wie Möbel in Ikea zusammenbauen können.
const tableEl = document.querySelector('table'); const headerRow = tableEl.createTHead().insertRow(); headerRow.insertCell().textContent = 'Make'; headerRow.insertCell().textContent = 'Model'; headerRow.insertCell().textContent = 'Color'; const newRow = tableEl.insertRow(); newRow.insertCell().textContent = 'Yes'; newRow.insertCell().textContent = 'No'; newRow.insertCell().textContent = 'Thank you';
Hier sehen Sie nicht nur document.createElement (). Beispielsweise wird die Methode .insertRow () inline
inbody, wenn Sie einen Aufruf dieses Elements direkt im Baum organisieren. Ist das nicht großartig?
Nr. 2. scrollIntoView ()
Sie wissen, dass der Browser beim Laden der Seite zu dem Element mit dieser ID blättert, wenn die URL #something enthält.
Dies hilft normalerweise sehr, funktioniert jedoch nicht, wenn Sie dieses Element nach dem Laden der Seite rendern. Um die oben beschriebene Gelegenheit zu nutzen, schreiben Sie einfach document.querySelector (document.location.hash) .scrollIntoView () vor.
Nummer 3. versteckt
Ja, es ist eine Art Methode, aber da es einen Setter (Methode zum Festlegen einer Eigenschaft) gibt, kann dies als Methode betrachtet werden.
Wie auch immer, haben Sie jemals myElement.style.display = 'none' verwendet, um ein Element auszublenden? Wenn ja, dann tun Sie dies nicht.
Wo es besser ist, myElement.hidden = true zu verwenden.
Nummer 4. umschalten ()
Mit dieser Methode können wir eine Elementklasse mit myElement.classList.toggle ('some-class') hinzufügen oder entfernen.
Und wenn Sie jemals eine Klasse mit if hinzugefügt haben, denken Sie: Vielleicht sollten Sie etwas anderes ausprobieren?
Sie können beispielsweise einfach den zweiten Parameter für die Umschaltmethode verwenden. Sie müssen es an die Schaltmethode übergeben. In diesem Fall wird Ihre Klasse dem Element hinzugefügt:
el.classList.toggle('some-orange-class', theme === 'orange');
Ja, ich verstehe, was Sie gerade denken: Dies ist nicht das, was das Wort "toogle" selbst bedeutet. Die hinter Internet Explorer? stimme dem zu und drücke ihren Protest aus, ohne den zweiten Parameter zu verwenden.
Aber lass es uns zurückbekommen. Freiheit zu Optionen!
Nr. 5. querySelector ()
Nun, Sie sollten dies auf jeden Fall wissen, aber ich vermute, dass ungefähr 17% der Leser nicht wissen, wie diese Methode in Verbindung mit Elementen verwendet werden kann.
Beispiel: myElement.querySelector ('. My-class') zeigt die Entsprechung von Elementen an, die die my-class-Klasse und die "Kinder" von myElement haben.
Nr. 6. am nächsten
Diese Methode steht allen Elementen zur Verfügung, die den Elementbaum anzeigen. Dies ist für querySelector () ein bisschen umgekehrt. Daher können wir den Titel des aktuellen Abschnitts folgendermaßen verwenden:
myElement.closest('article').querySelector('h1');
Wir beginnen mit dem
Artikel und enden mit dem ersten
h1 .
Nummer 7. getBoundingClientRect ()
Die Methode gibt ein Objekt mit detaillierten Informationen zu dem von uns angegebenen Element zurück.
{ x: 604.875, y: 1312, width: 701.625, height: 31, top: 1312, right: 1306.5, bottom: 1343, left: 604.875 }
Aber seien Sie vorsichtig: Dieses Beispiel führt zu einem Neuzeichnen. Je nach Gerät und Komplexität Ihrer Seite kann dies mehrere Millisekunden dauern. Denken Sie daher daran, wenn Sie es wiederholt aufrufen, beispielsweise in einer Animation.
Nicht alle Browser geben alle diese Werte zurück.
Nummer 8. Übereinstimmungen ()
Ich möchte prüfen, ob ein bestimmtes Element zu einer bestimmten Klasse gehört.
Maximaler Schwierigkeitsgrad:
if (myElement.className.indexOf('some-class') > -1) { // do something } , : if (myElement.className.includes('some-class')) { // do something }
Was Sie brauchen:
if (myElement.matches('.some-class')) {
Nr. 9. insertAdjacentElement ()
Ich habe es heute entdeckt! Dies ähnelt appendChild (), bietet jedoch etwas mehr Kontrolle beim Hinzufügen eines untergeordneten Elements.
parentEl.insertAdjacentElement ('beforeend', newEl) macht fast dasselbe wie parentEl.appendChild (newEl), aber Sie können beforebegin, afterbegin oder afterend angeben, um es an die Stelle zu setzen, die diese Namen angeben.
Wie viel Kontrolle!
Nr. 10. enthält ()
Wollten Sie schon immer wissen, ob sich in einem anderen ein Element befindet? Ich möchte das die ganze Zeit wissen.
Wenn ich zum Beispiel einen Mausklick mache und verstehen möchte, ob er innen oder außen passiert ist (damit ich ihn schließen kann), mache ich Folgendes:
const handleClick = e => { if (!modalEl.contains(e.target)) modalEl.hidden = true; };
Hier ist modales El ein Verweis auf das modale Fenster, und e.target ist das Element, auf das geklickt werden muss.
Es ist lustig, aber ich mache oft Fehler in der Logik, wenn ich versuche, die Methode zum ersten Mal anzuwenden. Und wenn ich dann versuche, den Fehler zu beheben, irre ich mich wieder. Und diese Methode hilft, sofort damit umzugehen.
Nr. 11. getAttribute ()
Eine der nutzlosesten Methoden von Elementen, aber nicht in diesem speziellen Fall.
Erinnern Sie sich, dass sich Eigenschaften normalerweise auf Attribute beziehen?
Manchmal ist dies beispielsweise nicht der Fall, wenn href ein Attribut eines Elements ist, z. B. a href = "/ animal / cat"> Cat </ a.
el.href wird uns / Tiere / Katze nicht geben, wie Sie vielleicht erwarten. Dies liegt daran, dass das Element die HTMLHyperlinkElementUtils-Schnittstelle implementiert, bei der es sich um eine Reihe von Hilfseigenschaften wie Protokoll und Hash handelt, die auf das Verknüpfungsobjekt verweisen.
Dies ist eine der nützlichen href-Eigenschaften, die das vollständige L und nicht die relative URL im Attribut angeben.
Sie sollten also el.getAttribute ('href') verwenden, wenn Sie eine Literalzeichenfolge innerhalb des href-Attributs benötigen.
Nr. 12. Dialog
In einem relativ neuen Elemente
Dialog hat zwei gute Methode , und das Ideal eine. show () und close () machen genau das, was von ihnen erwartet wird. Und das ist gut, nehme ich an.
ShowModal () zeigt jedoch ein
Dialogfeld über allen anderen Elementen auf der Seite an. Es ist nicht erforderlich, einen Z-Index zu erstellen oder manuell einen dunklen Hintergrund hinzuzufügen oder das Drücken der Escape-Taste zu verfolgen. Der Browser weiß, wie modale Fenster funktionieren und erledigt alles für Sie. Und das ist großartig.
Nr. 13. forEach ()
Wenn Sie einen Verweis auf eine Liste von Elementen benötigen, können Sie manchmal forEach () verwenden.
Was aber, wenn Sie alle URLs für alle Seitenlinks protokollieren müssen? Sie können dies tun und den Fehler sehen.
document.getElementsByTagName('a').forEach(el => { console.log(el.href); });
Oder mach das:
document.querySelectorAll('a').forEach(el => { console.log(el.href); });
Der Punkt ist, getElementsByTagName und andere get ... -Methoden geben eine HTMLCollection zurück, querySelectorAll gibt jedoch eine NodeList zurück.
Und die NodeList-Schnittstelle gibt uns die forEach () -Methode (zusammen mit den Schlüsseln (), Werten () und Eintrag ()).
Die Guten von ECMA haben uns Array.from () gegeben, das alles, was wie ein Array aussieht, in das Array selbst verwandelt.
Array.from(document.getElementsByTagName('a')).forEach(el => { console.log(el.href); });
Bonus! Beim Erstellen eines Arrays können Sie map (), filter () und redu () oder eine andere Methode verwenden. Beispiel: Zurückgeben eines Arrays externer Links:
Array.from(document.querySelectorAll('a')) .map(el => el.origin) .filter(origin => origin !== document.origin) .filter(Boolean);
Ich verschreibe wirklich gerne .filter (Boolean), weil ich ohne es in Zukunft meinen Kopf kratzen müsste, um mich daran zu erinnern, was es ist und wie es funktioniert.
Nr. 14. Formulare
Wie Sie wahrscheinlich bereits wissen, verfügt
Form über eine submit () -Methode. Etwas weniger wahrscheinlich, dass Sie wissen, dass Formulare eine reset () -Methode haben und einen Validity () -Wert melden können, wenn Sie die Validierung für Ihre Formularelemente verwenden.
Sie können auch die Punktnotationseigenschaft von Formularelementen verwenden, um anhand des Namensattributs auf ein Element zu verweisen. Beispielsweise gibt myFormEl.elements.email den
Eingabenamen = "email" / Element zurück, das zum
Formular gehört ("gehört" bedeutet nicht unbedingt, dass es sein "Nachkomme" ist).
Und jetzt habe ich gelogen. Tatsache ist, dass Elemente keine Liste von Elementen zurückgeben. Es gibt eine Liste von Steuerelementen zurück (und dies ist natürlich kein Array).
Beispiel: Wenn Sie drei Optionsfelder haben, die jeweils denselben Namen wie animal haben, erhalten Sie mit formEl.elements.animal einen Link zu diesen Optionsfeldern (1 Steuerelement, 3 Elemente).
Und formEl.elements.animal.value gibt den Wert des ausgewählten Optionsfelds zurück.
Dies ist eine seltsame Syntax, wenn Sie darüber nachdenken. Zerlegen Sie es, Leute: formEl ist ein Element, Elemente sind eine HTMLFormControlsCollection, kein Array, bei dem jedes Element nicht unbedingt ein HTML-Element ist. Animal hat mehrere Schalter nur kombiniert, weil sie das gleiche Namensattribut haben (es gibt eine RadioNodeList-Schnittstelle dafür), und der Wert durchsucht das Wertattribut eines Schalters in der Sammlung.
Nummer 15. wähle ()
Die Methode .select () wählt den gesamten Text in jeder von Ihnen aufgerufenen Eingabe aus.
Vielen Dank für das Lesen, ich hoffe, all dies wird Ihnen nützlich sein. Überprüfen Sie immer die Funktionen Ihres Browsers, damit es später nicht unerträglich schmerzhaft wird.
Praktisch von Skillbox , das einem unerfahrenen Programmierer hilft, ein gefragter Spezialist zu werden: