Bei der Entwicklung moderner Websites werden häufig JavaScript-Funktionen für die Arbeit mit DOM verwendet. Mithilfe von Skripten können Sie die Elemente anzeigen und ausblenden, aus denen die Seiten erstellt wurden, und die Eigenschaften dieser Elemente konfigurieren. DOM-Objekte, mit denen aus Programmen interagiert wird, verfügen über Eigenschaften und Methoden. Praktisch alle Webprogrammierer kennen einige von ihnen, so der Autor des Materials, dessen Übersetzung wir heute veröffentlichen. Aber einige, über die er hier sprechen möchte, sind weit weniger berühmt.
HTML und DOM
Lassen Sie uns zunächst über den Unterschied zwischen HTML und DOM sprechen. Beispielsweise ist ein reguläres
<table< -Element offensichtlich HTML-Code. Dieses Element kann in HTML-Dateien verwendet werden. Es verfügt über eine Reihe von Attributen, die das Erscheinungsbild und das Verhalten der mit seiner Hilfe erstellten Tabelle bestimmen. Genau genommen hat das
<table> -Tag selbst nichts mit JavaScript zu tun. Die Beziehung zwischen den im Dokument vorhandenen HTML-Elementen und dem JavaScript-Code wird vom DOM (Document Object Model) bereitgestellt. Das DOM ermöglicht die Interaktion mit HTML-Elementen aus JavaScript-Code, als wären sie Objekte.
Alle HTML-Elemente haben ihre eigenen „DOM-Schnittstellen“, die Eigenschaften (sie sind normalerweise Attributen von HTML-Elementen zugeordnet) und Methoden definieren. Das
<table> -Element verfügt beispielsweise über eine Schnittstelle namens
HTMLTableElement .
Sie können einen Link zu einem Element erhalten, indem Sie beispielsweise die folgende Konstruktion verwenden:
const searchBox = document.getElementById('search-box');
Nachdem die Verknüpfung zum Element empfangen wurde, hat der Programmierer Zugriff auf die Eigenschaften und Methoden dieser Elemente. Sie können beispielsweise mit der
value Eigenschaft eines bestimmten Textfelds arbeiten,
searchBox , der Link dazu wird in der
searchBox Variablen mithilfe einer Struktur des Formulars
searchBox.value . Sie können den Cursor in dieses Textfeld setzen, indem Sie die
searchBox.focus() -Methode aufrufen.
Vielleicht können wir hier unseren „kurzen Kurs über das DOM“ abschließen und tatsächlich zu den wenig bekannten Eigenschaften und Methoden der DOM-Schnittstellen von HTML-Elementen gehen.
Wenn Sie sofort lesen und experimentieren möchten, öffnen Sie die Browser-Entwicklertools. Um einen Link zu einem bestimmten Seitenelement zu erhalten, können Sie ihn im Elementbaum auswählen und dann das Konstrukt
$0 in der
Konsole verwenden . Geben Sie
dir($0) in die Konsole ein, um ein Element als Objekt anzuzeigen. Übrigens, wenn Sie auf etwas Neues stoßen, versuchen Sie es mit der Konsole zu erkunden.
Nr. 1: Tabellenmethoden
Das bescheidene
<table> -Element (das immer noch den ersten Platz unter den bei der Entwicklung von Webseitenlayouts verwendeten Technologien einnimmt) verfügt über eine ganze Reihe sehr guter Methoden, die den Prozess der Erstellung von Tabellen erheblich vereinfachen.
Hier sind einige davon.
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';
Wie Sie sehen können, verwenden wir hier keine Befehle wie
document.createElement() . Und die
.insertRow() -Methode bietet, wenn Sie sie direkt in der Tabelle aufrufen, sogar die Hinzufügung von
<tbody> . Ist es nicht wunderbar?
# 2: scrollIntoView () Methode
Sie wissen wahrscheinlich, dass der Browser nach dem Laden der Seite automatisch zu dem Element mit der entsprechenden
ID #something , wenn der Link eine Konstruktion wie
#something hat. Die Methode ist praktisch, aber wenn das für uns interessante Element nach dem Laden der Seite gerendert wird, funktioniert es nicht. So erstellen Sie dieses Verhaltensmuster selbst:
document.querySelector(document.location.hash).scrollIntoView();
Nr. 3: verstecktes Eigentum
Hier betrachten wir eine Eigenschaft, jedoch wird beim Zugriff auf diese Eigenschaft höchstwahrscheinlich ein bestimmter Setter aufgerufen, bei dem es sich um eine Methode handelt. Denken Sie auf jeden Fall daran, dass Sie jemals das unten gezeigte Design verwendet haben, um ein Element auszublenden?
myElement.style.display = 'none'
Wenn Sie es verwenden, sollten Sie es nicht mehr tun. Um ein Element auszublenden, schreiben Sie einfach
true in seine
hidden Eigenschaft:
myElement.hidden = true
# 4: toggle () Methode
Tatsächlich ist dies keine Methode eines Elements. Dies ist eine Elementeigenschaftsmethode. Mit dieser Methode können Sie insbesondere einem Element Klassen hinzufügen und diese mithilfe der folgenden Konstruktion entfernen:
myElement.classList.toggle('some-class')
Übrigens, wenn Sie jemals Klassen mit dem
if Konstrukt hinzugefügt haben, beachten Sie, dass Sie dies nicht mehr tun müssen, und vergessen Sie dieses Konstrukt. Der gleiche Mechanismus wird mit dem zweiten Parameter der
toggle() -Methode implementiert. Wenn dies ein Ausdruck ist, der als
true ausgewertet wird, wird die an
toggle() Klasse dem Element hinzugefügt.
el.classList.toggle('some-orange-class', theme === 'orange');
Wahrscheinlich haben Sie hier Zweifel an der Angemessenheit dieses Designs. Schließlich enthält der Name der Methode „Umschalten“, die angesichts der Tatsache, dass das Wesen der von ihr ausgeführten Aktion darin verborgen ist, als „Umschalten“ übersetzt werden kann, keine Erwähnung, dass „Umschalten“ die Erfüllung einer bestimmten Bedingung impliziert. Das oben beschriebene Design existiert jedoch in dieser Form, obwohl die Entwickler von Internet Explorer es wahrscheinlich auch für seltsam halten. Bei der Implementierung von
toggle() zweite Parameter nicht bereitgestellt. Obwohl oben gesagt wurde, dass diejenigen, die sich mit
toggle() auskennen, das
if Konstrukt vergessen können, vergessen Sie es dennoch nicht.
# 5: querySelector () -Methode
Sie wissen definitiv bereits über die Existenz dieser Methode Bescheid, aber es besteht der Verdacht, dass genau 17% von Ihnen nicht wissen, dass sie für die Anwendung auf ein Element verwendet werden kann.
Beispielsweise wählt die Konstruktion
myElement.querySelector('.my-class') nur die Elemente aus, die die Klasse
my-class und gleichzeitig Nachkommen des
myElement Elements sind.
# 6: nächstgelegene () Methode
Alle Elemente, die die Suche nach übergeordneten Elementen unterstützen, verfügen über diese Methode. Dies ist so etwas wie die Umkehrung von
querySelector() . Mit dieser Methode können Sie beispielsweise den Titel für den aktuellen Abschnitt abrufen:
myElement.closest('article').querySelector('h1');
Hier wird während der Suche zuerst das erste übergeordnete Element
<article> und dann das erste Element
<h1> erkannt, das in das Element eintritt.
# 7: Methode getBoundingClientRect ()
Die Methode
getBoundingClientRect() gibt ein hübsch dekoriertes kleines Objekt zurück, das Informationen über die Größe des Elements enthält, für das diese Methode aufgerufen wurde.
{ x: 604.875, y: 1312, width: 701.625, height: 31, top: 1312, right: 1306.5, bottom: 1343, left: 604.875 }
Bei dieser Methode ist jedoch besonders auf zwei Punkte zu achten:
- Das Aufrufen dieser Methode führt zu einem erneuten Zeichnen der Seite. Abhängig vom Gerät, auf dem die Seite angezeigt wird, und von der Komplexität der Seite kann dieser Vorgang mehrere Millisekunden dauern. Berücksichtigen Sie dies, wenn Sie diese Methode in bestimmten sich wiederholenden Codefragmenten aufrufen möchten, z. B. beim Ausführen von Animationen.
- Nicht alle Browser unterstützen diese Methode.
# 8: match () Methode
Angenommen, wir müssen überprüfen, ob ein bestimmtes Element eine bestimmte Klasse hat.
So lösen Sie dieses Problem anscheinend auf schwierigste Weise:
if (myElement.className.indexOf('some-class') > -1) {
Hier ist eine andere Option, es ist besser, aber auch alles andere als ideal:
if (myElement.className.includes('some-class')) {
Und hier ist der beste Weg, um dieses Problem zu lösen:
if (myElement.matches('.some-class')) {
# 9: insertAdjacentElement () -Methode
Diese Methode ähnelt
appendChild() , bietet jedoch etwas mehr Leistung darüber, wo genau das
appendChild() Element hinzugefügt wird.
Der Befehl
parentEl.insertAdjacentElement('beforeend', newEl) ähnelt dem Befehl
parentEl.appendChild(newEl) . Mit der Methode
insertAdjacentElement() können Sie jedoch zusätzlich zum Argument
afterend , die den Ort angeben, an dem Sie benötigt werden Element hinzufügen.
Nr. 10: enthält () Methode
Wollten Sie schon immer wissen, ob sich ein Element in einem anderen befindet? Ich brauche es die ganze Zeit. Wenn Sie beispielsweise während der Verarbeitung eines Mausklickereignisses herausfinden müssen, ob es innerhalb oder außerhalb des Modalfensters aufgetreten ist (was bedeutet, dass es geschlossen werden kann), können Sie die folgende Konstruktion verwenden:
const handleClick = e => { if (!modalEl.contains(e.target)) modalEl.hidden = true; };
Hier ist
modalEl ein Link zu einem modalen Fenster, und
e.target ist jedes Element, auf das geklickt wird. Interessanterweise kann ich bei dieser Technik nie gleich beim ersten Mal alles richtig schreiben, selbst wenn ich mich daran erinnere, dass ich mich ständig irre und versuche, mögliche Fehler im Voraus zu beheben.
# 11: Methode getAttribute ()
Vielleicht kann diese Methode als die nutzloseste bezeichnet werden, aber es gibt eine Situation, in der sie definitiv nützlich sein kann.
Denken Sie daran, wir haben bereits gesagt, dass Eigenschaften von DOM-Objekten normalerweise mit Attributen von HTML-Elementen verknüpft sind.
Einer der Fälle, in denen dies nicht der Fall ist, wird beispielsweise durch das
href Attribut dargestellt, z. B. hier:
<a href="/animals/cat">Cat</a> .
Das
el.href Konstrukt
el.href nicht wie erwartet
/animals/cat . Dies liegt daran, dass das
<a> -Element die
HTMLHyperlinkElementUtils- Schnittstelle implementiert, die viele
Hilfseigenschaften wie
protocol und
hash , mit denen Sie die Details der Links herausfinden können.
Eine dieser Hilfseigenschaften ist die Eigenschaft
href , die eine vollständige URL angibt, die alles enthält, was die relative URL nicht im Attribut enthält.
Um genau das zu erhalten, was im
href Attribut geschrieben ist, müssen Sie daher das
el.getAttribute('href') verwenden.
Nr. 12: drei Methoden des <dialog> -Elements
Das relativ neue
<dialog> -Element verfügt über zwei nützliche, aber recht gewöhnliche Methoden und eine Methode, die einfach als wunderbar bezeichnet werden kann. Die Methoden
show() und
close() machen also genau das, was Sie von ihnen erwarten können, indem sie das Fenster ein- und ausblenden. Wir nennen sie nützlich, aber gewöhnlich. Die Methode
showModal() zeigt jedoch das Element
<dialog> über allem anderen an und zeigt es in der Mitte des Fensters an. Tatsächlich wird genau ein solches Verhalten normalerweise von modalen Fenstern erwartet. Wenn Sie mit solchen Elementen arbeiten, müssen Sie nicht über die
z-index Eigenschaft nachdenken, manuell einen verschwommenen Hintergrund hinzufügen oder das Ereignis des Drückens der
Escape Taste abhören, um das entsprechende Fenster zu schließen. Der Browser weiß, wie modale Fenster funktionieren sollen und stellt sicher, dass alles so funktioniert, wie es sollte.
# 13: forEach () -Methode
Wenn Sie einen Link zu einer Liste von Elementen erhalten, können Sie diese Elemente manchmal mit der
forEach() -Methode
forEach() . Die
for() Schleifen sind gestern. Angenommen, wir müssen alle
<a> -Elemente von der Seite im Protokoll auflisten. Wenn wir dies wie unten gezeigt tun, wird eine Fehlermeldung angezeigt:
document.getElementsByTagName('a').forEach(el => { console.log(el.href); });
Um dieses Problem zu lösen, können Sie die folgende Konstruktion verwenden:
document.querySelectorAll('a').forEach(el => { console.log(el.href); });
Der Punkt hier ist, dass Methoden wie
getElementsByTagName() ein Objekt vom Typ
HTMLCollection und
querySelectorAll Objekt
querySelectorAll . Es ist die Schnittstelle des
NodeList Objekts
NodeList die wir auf die Methode
forEach() (und auch auf die Methoden
keys() ,
values() und
entries() ) zugreifen können.
In der Tat wäre es viel besser, wenn solche Methoden einfach normale Arrays zurückgeben würden und uns nicht etwas anbieten würden, das eine Art scheinbar nützlicher Methoden enthält, die nicht ganz wie Arrays sind.
Array.from() Sie jedoch nicht verärgert, denn intelligente Leute von ECMA haben uns eine großartige Methode gegeben -
Array.from() , mit der wir alles, was wie Arrays aussieht, in Arrays verwandeln können.
Infolgedessen können Sie Folgendes schreiben:
Array.from(document.getElementsByTagName('a')).forEach(el => { console.log(el.href); });
Und hier ist eine nette kleine Sache. Durch die Umwandlung in ein Array, wie es früher war, erhalten wir die Möglichkeit, viele Array-Methoden wie
map() ,
filter() und
reduce() . Hier zum Beispiel, wie man ein Array von externen Links auf der Seite bildet:
Array.from(document.querySelectorAll('a')) .map(el => el.origin) .filter(origin => origin !== document.origin) .filter(Boolean);
Übrigens mag ich das
.filter(Boolean) denn wenn ich es irgendwann in dem Code treffe, den ich vor langer Zeit geschrieben habe, kann ich seine Bedeutung kaum sofort verstehen.
Nr. 14: Arbeit mit Formularen
Es ist sehr wahrscheinlich, dass Sie wissen, dass das
<form> -Element eine
submit() -Methode hat. Es ist jedoch weniger wahrscheinlich, dass Sie wissen, dass die Formulare eine
reset() -Methode haben und dass sie eine
reportValidity() -Methode haben, die anwendbar ist, wenn die Validierung des Ausfüllens von Formularelementen verwendet wird.
Wenn Sie mit Formularen arbeiten, können Sie außerdem deren
elements Eigenschaft verwenden, mit der Sie über einen Punkt über ihre Namensattribute auf Formularelemente zugreifen können. Beispielsweise gibt das Konstrukt
myFormEl.elements.email das
myFormEl.elements.email <input name="email" /> , das zum Formular gehört ("Zugehörigkeit" bedeutet nicht unbedingt "Nachkomme sein").
Hierbei ist zu beachten, dass die Eigenschaft
elements selbst keine Liste gewöhnlicher Elemente zurückgibt. Es gibt eine Liste von Steuerelementen zurück (und diese Liste ist natürlich kein Array).
Hier ist ein Beispiel. Wenn das Formular drei Optionsfelder enthält und alle denselben Namen (
animal ) haben, gibt das Konstrukt
formEl.elements.animal einen Link zu einer Reihe von Optionsfeldern (1 Steuerelement, 3 HTML-Elemente). Wenn Sie das Design
formEl.elements.animal.value , wird der Wert des vom Benutzer ausgewählten
formEl.elements.animal.value .
Wenn Sie darüber nachdenken, sieht alles ziemlich seltsam aus. Wenden wir uns also dem vorherigen Beispiel zu:
formEl ist ein Element.elements ist ein HTMLFormControlsCollection- Objekt, das einem Array ähnelt, dies jedoch nicht ist. Seine Elemente sind nicht unbedingt HTML-Elemente.animal ist ein Satz von mehreren Optionsfeldern, die als Satz dargestellt werden, da sie alle dasselbe Namensattribut haben (es gibt eine RadioNodeList- Schnittstelle, die speziell für die Arbeit mit Optionsfeldern entwickelt wurde).value auf das value Attribut des aktiven Optionsfelds in der Auflistung zugegriffen.
# 15: select () Methode
Vielleicht ist es am Ende des Materials besser, über eine absolut erstaunliche Methode zu sprechen, obwohl diese Methode vielleicht eine Offenbarung für jemanden ist. Mit der Methode
.select() können Sie also Text in den Eingabefeldern auswählen, für die er aufgerufen wird.
Zusammenfassung
In diesem Artikel haben wir über wenig bekannte Methoden und Eigenschaften gesprochen, mit denen mit dem Inhalt von Webseiten gearbeitet werden kann. Wir hoffen, dass Sie hier etwas Neues für sich gefunden haben, und vielleicht nicht nur neu, sondern auch nützlich.
Liebe Leser! Verwenden Sie programmatische Interaktionen mit den Inhalten von Webseiten, die nicht allgemein bekannt sind?
