Komplexe und umfangreiche Webanwendungen sind heutzutage alltäglich geworden. Browserübergreifende und benutzerfreundliche Bibliotheken wie jQuery mit ihrer umfangreichen Funktionalität können bei der spontanen Manipulation des DOM sehr hilfreich sein. Daher ist es nicht verwunderlich, dass viele Entwickler solche Bibliotheken häufiger verwenden, als mit der nativen DOM-API zu arbeiten, mit der es viele Probleme gab. Während Browserunterschiede immer noch ein Problem darstellen, ist das DOM heute in einem besseren Zustand als vor fünf bis sechs Jahren, als jQuery immer beliebter wurde.
In diesem Artikel demonstriere ich die HTML-Manipulationsmöglichkeiten des DOM und konzentriere mich dabei auf Eltern-, Kinder- und Nachbarbeziehungen. Abschließend werde ich Informationen zur Browserunterstützung für diese Funktionen geben. Bedenken Sie jedoch, dass eine Bibliothek wie jQuery aufgrund von Fehlern und Inkonsistenzen bei der Implementierung nativer Funktionen immer noch eine gute Option ist.
Untergeordnete Knoten zählen
Zur Demonstration verwende ich Folgendes HTML-Markup, wir werden es im Laufe des Artikels mehrmals ändern:
- Beispiel eins
- Beispiel zwei
- Beispiel drei
- Beispiel vier
- Beispiel fünf
- Beispiel Sechs
Var myList = document.getElementById("myList"); console.log(myList.children.length); // 6 console.log(myList.childElementCount); // 6
Wie Sie sehen, sind die Ergebnisse die gleichen, obwohl die verwendeten Techniken unterschiedlich sind. Im ersten Fall verwende ich die Kindereigenschaft. Dies ist eine schreibgeschützte Eigenschaft und gibt die Sammlung von HTML-Elementen zurück, die im angeforderten Element enthalten sind. Um ihre Anzahl zu zählen, verwende ich die Längeneigenschaft dieser Sammlung.
Im zweiten Beispiel verwende ich die Methode childElementCount, die meiner Meinung nach eine übersichtlichere und möglicherweise wartbarere Methode ist (besprechen Sie dies später ausführlicher, ich glaube nicht, dass Sie Probleme haben werden, zu verstehen, was sie tut).
Ich könnte versuchen, childNodes.length (anstelle von children.length) zu verwenden, aber schauen Sie sich das Ergebnis an:
Var myList = document.getElementById("myList"); console.log(myList.childNodes.length); // 13
Es wird 13 zurückgegeben, da childNodes eine Sammlung aller Knoten, einschließlich Leerzeichen, ist. Beachten Sie dies, wenn Sie sich für den Unterschied zwischen untergeordneten Knoten und untergeordneten Elementknoten interessieren.
Überprüfen der Existenz von untergeordneten Knoten
Um zu überprüfen, ob ein Element untergeordnete Knoten hat, kann ich die Methode hasChildNodes() verwenden. Die Methode gibt einen booleschen Wert zurück, der ihre Anwesenheit oder Abwesenheit angibt:
Var myList = document.getElementById("myList"); console.log(myList.hasChildNodes()); // WAHR
Ich weiß, dass meine Liste untergeordnete Knoten hat, aber ich kann den HTML-Code so ändern, dass keine vorhanden sind. Das Markup sieht jetzt so aus:
Und hier ist das Ergebnis der erneuten Ausführung von hasChildNodes():
Console.log(myList.hasChildNodes()); // WAHR
Die Methode gibt weiterhin true zurück. Obwohl die Liste keine Elemente enthält, enthält sie ein Leerzeichen, das ein gültiger Knotentyp ist. Diese Methode berücksichtigt alle Knoten, nicht nur Elementknoten. Damit hasChildNodes() false zurückgibt, müssen wir das Markup erneut ändern:
Und nun wird das erwartete Ergebnis in der Konsole angezeigt:
Console.log(myList.hasChildNodes()); // FALSCH
Wenn ich weiß, dass ich möglicherweise auf Leerzeichen stoße, überprüfe ich natürlich zuerst, ob untergeordnete Knoten vorhanden sind, und verwende dann die Eigenschaft „nodeType“, um festzustellen, ob sich darunter Elementknoten befinden.
Untergeordnete Elemente hinzufügen und entfernen
Es gibt Techniken, mit denen Sie Elemente zum DOM hinzufügen und daraus entfernen können. Die bekannteste davon basiert auf einer Kombination der Methoden createElement() und appendChild().
Var myEl = document.createElement("div"); document.body.appendChild(myEl);
In diesem Fall erstelle ich
Aber anstatt ein speziell erstelltes Element einzufügen, kann ich auch appendChild() verwenden und einfach das vorhandene Element verschieben. Nehmen wir an, wir haben das folgende Markup:
- Beispiel eins
- Beispiel zwei
- Beispiel drei
- Beispiel vier
- Beispiel fünf
- Beispiel Sechs
Beispieltext
Ich kann den Speicherort der Liste mit dem folgenden Code ändern:
Var myList = document.getElementById("myList"), container = document.getElementById("c"); container.appendChild(myList);
Das endgültige DOM sieht folgendermaßen aus:
Beispieltext
- Beispiel eins
- Beispiel zwei
- Beispiel drei
- Beispiel vier
- Beispiel fünf
- Beispiel Sechs
Beachten Sie, dass die gesamte Liste von ihrem Platz (über dem Absatz) entfernt und anschließend vor dem abschließenden Textkörper eingefügt wurde. Während die Methode appendChild() normalerweise zum Hinzufügen von mit createElement() erstellten Elementen verwendet wird, kann sie auch zum Verschieben vorhandener Elemente verwendet werden.
Mit „removeChild()“ kann ich ein untergeordnetes Element auch vollständig aus dem DOM entfernen. So löschen Sie unsere Liste aus dem vorherigen Beispiel:
Var myList = document.getElementById("myList"), container = document.getElementById("c"); container.removeChild(myList);
Das Element wurde nun entfernt. Die Methode „removeChild()“ gibt das entfernte Element zurück, damit ich es speichern kann, falls ich es später benötige.
Var myOldChild = document.body.removeChild(myList); document.body.appendChild(myOldChild);
Es gibt auch eine ChildNode.remove()-Methode, die der Spezifikation erst vor relativ kurzer Zeit hinzugefügt wurde:
Var myList = document.getElementById("myList"); myList.remove();
Diese Methode gibt das Remote-Objekt nicht zurück und funktioniert nicht im IE (nur Edge). Und beide Methoden entfernen Textknoten auf die gleiche Weise wie Elementknoten.
Untergeordnete Elemente ersetzen
Ich kann ein vorhandenes untergeordnetes Element durch ein neues ersetzen, unabhängig davon, ob dieses neue Element vorhanden ist oder ob ich es von Grund auf neu erstellt habe. Hier ist das Markup:
Beispieltext
Var myPar = document.getElementById("par"), myDiv = document.createElement("div"); myDiv.className = "Beispiel"; myDiv.appendChild(document.createTextNode("Neuer Elementtext")); document.body.replaceChild(myDiv, myPar);
Wie Sie sehen können, benötigt die Methode replaceChild() zwei Argumente: das neue Element und das alte Element, das es ersetzt.
Ich kann diese Methode auch verwenden, um ein vorhandenes Element zu verschieben. Schauen Sie sich den folgenden HTML-Code an:
Beispieltext 1
Beispieltext 2
Beispieltext 3
Ich kann den dritten Absatz durch den ersten Absatz ersetzen, indem ich den folgenden Code verwende:
Var myPar1 = document.getElementById("par1"), myPar3 = document.getElementById("par3"); document.body.replaceChild(myPar1, myPar3);
Nun sieht das generierte DOM so aus:
Beispieltext 2
Beispieltext 1
Auswahl bestimmter Kinder
Es gibt einige verschiedene Wege Auswahl eines bestimmten Elements. Wie bereits gezeigt, kann ich mit der Children-Sammlung oder der childNodes-Eigenschaft beginnen. Aber schauen wir uns andere Optionen an:
Die Eigenschaften firstElementChild und lastElementChild tun genau das, was ihr Name vermuten lässt: Sie wählen das erste und letzte untergeordnete Element aus. Kehren wir zu unserem Markup zurück:
- Beispiel eins
- Beispiel zwei
- Beispiel drei
- Beispiel vier
- Beispiel fünf
- Beispiel Sechs
Ich kann das erste und letzte Element mithilfe dieser Eigenschaften auswählen:
Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.innerHTML); // „Beispiel eins“ console.log(myList.lastElementChild.innerHTML); // „Beispiel sechs“
Ich kann auch die Eigenschaften previousElementSibling und nextElementSibling verwenden, wenn ich andere untergeordnete Elemente als das erste oder letzte auswählen möchte. Dies geschieht durch die Kombination der Eigenschaften firstElementChild und lastElementChild:
Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.nextElementSibling.innerHTML); // „Beispiel zwei“ console.log(myList.lastElementChild. previousElementSibling.innerHTML); // „Beispiel fünf“
Es gibt auch ähnliche Eigenschaften firstChild , lastChild , previousSibling und nextSibling , aber sie berücksichtigen alle Arten von Knoten, nicht nur Elemente. Im Allgemeinen sind Eigenschaften, die nur Elementknoten berücksichtigen, nützlicher als solche, die alle Knoten auswählen.
Inhalte in das DOM einfügen
Ich habe bereits nach Möglichkeiten gesucht, Elemente in das DOM einzufügen. Kommen wir zu einem ähnlichen Thema und werfen einen Blick auf die neuen Funktionen zum Einfügen von Inhalten.
Erstens gibt es eine einfache insertBefore()-Methode, ähnlich wie replaceChild(), sie benötigt zwei Argumente und funktioniert sowohl mit neuen als auch mit vorhandenen Elementen. Hier ist das Markup:
- Beispiel eins
- Beispiel zwei
- Beispiel drei
- Beispiel vier
- Beispiel fünf
- Beispiel Sechs
Beispielabsatz
Beachten Sie den Absatz, den ich zuerst entfernen und dann vor der Liste einfügen werde, alles auf einen Schlag:
Var myList = document.getElementById("myList"), container = document.getElementBy("c"), myPar = document.getElementById("par"); container.insertBefore(myPar, myList);
Im resultierenden HTML-Code erscheint der Absatz vor der Liste und dies ist eine weitere Möglichkeit, das Element zu umbrechen.
Beispielabsatz
- Beispiel eins
- Beispiel zwei
- Beispiel drei
- Beispiel vier
- Beispiel fünf
- Beispiel Sechs
Wie replaceChild() benötigt insertBefore() zwei Argumente: das hinzuzufügende Element und das Element, vor dem wir es einfügen möchten.
Diese Methode ist einfach. Versuchen wir nun eine leistungsfähigere Einfügemethode: die Methode insertAdjacentHTML().
Die Hauptaufgabe dieses Selektors ergibt sich aus seinem Namen und ist der Zugriff untergeordnetes Element. Wird mit einem einfachen „>“-Zeichen angezeigt, das das untergeordnete Element mit dem übergeordneten Element verknüpft. Es ist auch erwähnenswert, dass einfache Selektoren verwendet werden. Betrachten Sie als Beispiel die folgende Codierung:
Element > ul ( padding-top: 20px; )
Diese Codierung bedeutet, dass die Liste, die im Element verschachtelt ist, Folgendes hat Polsterung 20 Pixel vom oberen Rand entfernt. Das Vorhandensein des „>“-Symbols in diesem Eintrag zeigt an, dass die Regel nur für Listen der ersten Verschachtelungsebene gilt.
Eine detaillierte Analyse der Funktionsweise des untergeordneten Elementselektors
Ein untergeordneter Elementselektor hat ähnliche Eigenschaften wie das Konzept eines untergeordneten Selektors. Es gibt jedoch ein charakteristisches Merkmal, das den grundlegenden Unterschied zwischen diesen Operationen zeigt. Es liegt darin, dass sich der Einfluss des Nachkommenselektors auf absolut alle Elemente erstreckt, während der Kindselektor die Positionsstile der ersten Klassifikationsebene unterordnet.
Das folgende Beispiel hilft Ihnen dabei, die Arbeit des untergeordneten Auswahloperators klarer einzuschätzen:
Div > p ( Farbe: #ff0000; /* rot */ )
< div>Diese Zeile hat standardmäßig schwarzen Text.< span>Diese Zeile wird rot, da p ein untergeordnetes Tag für div ist. < p>Wieder sehen wir schwarze Buchstaben.< span>Hier sehen wir auch schwarze Symbole, da für diesen Span das übergeordnete Element das p-Tag ist.
Dieses Beispiel bestätigt die Funktionsweise des untergeordneten Auswahloperators entsprechend dem Verschachtelungsgrad.
Einschränkung für die Verwendung des untergeordneten Auswahloperators
Das ist erwähnenswert diese Operation wird von allen Browsern außer dem legendären unterstützt Internet Explorer 6. Ich denke, nur wenige Leute nutzen es Dieser Browser Wenn es jedoch solche Einzigartigen gibt, dann gibt es für sie einen Ausweg, der in einem separaten Artikel beschrieben wird.
Warum wird es verwendet?
Programmierer greifen auf Selektoren für untergeordnete Elemente zurück, wenn sie verschachtelten Elementen ihren eigenen einzigartigen Stil zuweisen müssen. Außerdem kann die Verwendung dieses Selektors die Menge an CSS reduzieren, was die Lesbarkeit des Dokuments verbessert. Wie die Praxis zeigt, wird dieser Vorgang am häufigsten beim Erstellen von Dropdown-Menüs verwendet.
Der Selektor für untergeordnete Elemente wird auch verwendet, um Elementen, deren übergeordnete Elemente bereits bekannt sind, eindeutige Stile zuzuweisen. Mit anderen Worten:
Haupt > Kopfzeile ( /* Dekoration gilt nur für den Hauptheader */ }
Dieses Beispiel gilt in Fällen, in denen das Header-Tag zum Hervorheben von Artikeltiteln verwendet wird. In unserem Fall legen wir das Design nur für den Hauptheader fest und haben keinen Einfluss auf die sekundären Header. Mit dieser Technik können Sie auch die Verwendung unnötiger Bezeichner vermeiden, was wiederum das Gewicht der CSS-Datei verringert und sie besser lesbar macht.
Zusammenfassen
Somit kann der Operator für untergeordnete Elemente nicht nur zum Entwerfen von Dropdown-Menüs verwendet werden, sondern auch, um Ihre Internetressource für die Arbeit von Suchrobotern leicht zu optimieren.
Letzte Aktualisierung: 21.04.2016
Eine besondere Gruppe von Pseudoklassen bilden Pseudoklassen, mit denen Sie bestimmte untergeordnete Elemente auswählen können:
:first-child: stellt das Element dar, das das erste untergeordnete Element ist
:last-child: stellt das Element dar, das das letzte untergeordnete Element ist
:only-child: stellt ein Element dar, das das einzige untergeordnete Element eines Containers ist
:only-of-type: wählt ein Element aus, das das einzige Element eines bestimmten Typs (Tag) in einem Container ist
:nth-child(n) : stellt ein untergeordnetes Element dar, das hat bestimmte Nummer n, zum Beispiel das zweite untergeordnete Element
:nth-last-child(n) : stellt das untergeordnete Element dar, das eine bestimmte Nummer n hat, beginnend am Ende
:nth-of-type(n) : wählt das untergeordnete Element eines bestimmten Typs aus, das eine bestimmte Nummer hat
:nth-last-of-type(n) : wählt das untergeordnete Element eines bestimmten Typs aus, das eine bestimmte Nummer hat, beginnend am Ende
Pseudo-Klasse-Erstkind
Wir verwenden die First-Child-Pseudoklasse, um die ersten Links in Blöcken auszuwählen:
Tablets
Smartphones
Der a:first-child-Selektor wird für einen Link formatiert, wenn er das erste untergeordnete Element eines Elements ist.
Und im zweiten Block ist das erste Element ein Absatz, sodass auf keine Links ein Stil angewendet wird.
Letztes Kind der Pseudoklasse
Wir verwenden die Last-Child-Pseudoklasse:
Smartphones
Tablets
Der a:last-child-Selektor definiert den Stil für Links, die die letzten untergeordneten Elemente sind.
Im ersten Block ist das letzte untergeordnete Element der Link. Aber im zweiten, letzten untergeordneten Element ist ein Absatz, sodass im zweiten Block der Stil auf keinen der Links angewendet wird.
Nur-Kind-Selektor
Der :only-child-Selektor wählt Elemente aus, die die einzigen untergeordneten Elemente der Container sind:
Überschrift
Text 1
Text2
Text3
Text4
Die Absätze mit den Texten „Text1“ und „Text4“ sind die einzigen untergeordneten Absätze in ihren äußeren Containern und werden daher mit roter Schriftfarbe gestaltet.
Pseudo-Klasse nur vom Typ
Die Pseudoklasse „Only-of-Type“ wählt ein Element aus, das das einzige Element eines bestimmten Typs im Container ist. Zum Beispiel ein einzelnes div-Element, während sich beliebig viele Elemente anderer Typen im selben Container befinden können.
Einzelner Absatz und Spannelement
Obwohl für die Divs ein Stil definiert ist, wird dieser nicht angewendet, da sich im Textcontainer zwei Divs befinden und nicht nur eines. Aber im Körper gibt es nur ein p-Element, daher erhält er ein Styling. Außerdem gibt es im p-Container nur ein span-Element, sodass es ebenfalls formatiert wird.
Pseudo-Klasse n-tes Kind
Mit der Pseudoklasse des n-ten Kindes können Sie jedes zweite, dritte Element, nur gerade oder nur ungerade Elemente usw. formatieren.
Lassen Sie uns zum Beispiel die geraden und ungeraden Zeilen der Tabelle formatieren:
Smartphones
| Samsung | Galaxy S7 Edge | 60000 |
| Apfel | iPhone SE | 39000 |
| Microsoft | Lumia 650 | 13500 |
| Alcatel | Idol S4 | 30000 |
| Huawei | P9 | 60000 |
| HTC | HTC 10 | 50000 |
| Meizu | Pro 6 | 40000 |
| Xiaomi | Mi5 | 35000 |
Um ungerade Elemente zu formatieren, übergeben Sie den Wert „odd“ an den Selektor:
Tr:nth-child(odd)()
Um gerade Elemente zu formatieren, übergeben Sie den Wert „even“ an den Selektor:
Tr:nth-child(even)()
Wir können diesem Selektor auch die Nummer des zu formatierenden Elements übergeben:
Tr:nth-child(3) (Hintergrundfarbe: #bbb;)
In diesem Fall wird die dritte Zeile formatiert.
Eine andere Möglichkeit besteht darin, einen Platzhalter für die Zahl zu verwenden, der durch den Buchstaben n ausgedrückt wird:
Tr:nth-child(2n+1) ( Hintergrundfarbe: #bbb; )
Hier wird der Stil auf jede zweite ungerade Zeile angewendet.
Die Zahl vor n (in diesem Fall 2) stellt das untergeordnete Element dar, das als nächstes hervorgehoben wird. Die Zahl hinter dem Pluszeichen gibt an, mit welchem Element die Auswahl beginnen soll, d. h. +1 bedeutet, dass Sie mit dem ersten untergeordneten Element beginnen sollten.
In diesem Fall beginnt die Auswahl also mit dem 1. Element und das nächste ausgewählte Element ist 2 * 1 + 1 = 3. Element, dann 2 * 2 + 1 = 5. Element und so weiter.
Wenn wir beispielsweise jedes dritte Element auswählen möchten, beginnend mit dem zweiten, könnten wir schreiben:
Tr:nth-child(3n+2) ( Hintergrundfarbe: #bbb; )
Die Pseudoklasse :nth-last-child bietet im Wesentlichen die gleiche Funktionalität, nur Elemente werden vom Ende und nicht vom Anfang gezählt:
Tr:nth-last-child(2) ( Hintergrundfarbe: #bbb; /* 2. Zeile vom Ende, also die vorletzte */ ) tr:nth-last-child(2n+1) ( Hintergrund- Farbe: #eee ; /* ungerade Zeilen, beginnend am Ende */ )
Pseudoklasse n-ter Typ
Mit der Pseudoklasse :nth-of-type können Sie ein untergeordnetes Element eines bestimmten Typs anhand einer bestimmten Nummer auswählen:
Tr:nth-of-type(2) ( Hintergrundfarbe: #bbb; )
Die Pseudoklasse nth-last-of-type funktioniert ähnlich, nur werden jetzt Elemente vom Ende an gezählt:
Tr:nth-last-of-type(2n) (Hintergrundfarbe: #bbb;)
Beschreibung
Die Pseudoklasse :nth-child wird verwendet, um Elementen basierend auf der Nummerierung im Elementbaum Stil hinzuzufügen.
Syntax
element:nth-child(ungerade | gerade |<число> | <выражение>) {...}
Werte
odd Alle ungeraden Elementnummern. gerade Alle Elemente mit gerader Nummer. Zahl Die Ordnungszahl des untergeordneten Elements relativ zu seinem übergeordneten Element. Die Nummerierung beginnt bei 1. Dies ist das erste Element in der Liste. Ausdruck Gegeben als an+b , wobei a und b ganze Zahlen sind und n ein Zähler ist, der automatisch den Wert 0, 1, 2 ... annimmt.Wenn a Null ist, wird es nicht geschrieben und der Eintrag wird mit b abgekürzt. Wenn b Null ist, wird es ebenfalls nicht angegeben und der Ausdruck wird in der Form an geschrieben. a und b können negative Zahlen sein. In diesem Fall ändert sich das Pluszeichen in ein Minuszeichen, zum Beispiel: 5n-1.
Durch Gebrauch negative Werte a und b Einige Ergebnisse können auch negativ oder null ausfallen. Aufgrund der Elementnummerierung beginnend bei 1 sind Elemente jedoch nur von positiven Werten betroffen.
In der Tabelle 1 zeigt einige mögliche Ausdrücke und Stichworte und gibt außerdem an, welche Elementnummern verwendet werden.
HTML5 CSS3 IE Cr Op Sa Fx
| 2134 | 2135 | 2136 | 2137 | 2138 | |
| Öl | 16 | 34 | 62 | 74 | 57 |
| Gold | 4 | 69 | 72 | 56 | 47 |
| Baum | 7 | 73 | 79 | 34 | 86 |
| Steine | 23 | 34 | 88 | 53 | 103 |
In diesem Beispiel wird die Pseudoklasse :nth-child verwendet, um den Stil der ersten Zeile der Tabelle zu ändern und alle geraden Zeilen hervorzuheben (Abbildung 1).
Ich denke, viele Leute wissen davon Kontextselektoren in CSS. Sie werden am häufigsten verwendet, erfahrene Layout-Designer wissen jedoch sehr gut, dass kontextbezogene Selektoren manchmal bestimmte Probleme mit sich bringen. Dieses Problem ist auf die Tatsache zurückzuführen, dass es in der Struktur eines Elements viele ineinander verschachtelte identische Elemente geben kann. Und Sie müssen den Stil nicht auf alle verschachtelten Elemente anwenden, sondern nur auf das unmittelbar untergeordnete Element. Dafür werden sie verwendet Untergeordnete Selektoren in CSS.
Um das Problem klarer zu machen, geben wir ein kleines Beispiel. Lassen Sie uns so eins haben HTML Quelltext:
Erster Paragraph
Zweiter Absatz
Und unsere Aufgabe ist es, es nur rot zu machen. Zweiter Absatz". Wenn wir mit einem Kontextselektor schreiben:
Behälter p (
Farbe Rot;
}
Dann werden beide Absätze rot, was wir überhaupt nicht brauchen. Dieses Problem lässt sich sehr einfach mit lösen Untergeordnete Selektoren in CSS:
Behälter > p (
Farbe Rot;
}
Das war's, jetzt haben wir nur noch Rot“ Zweiter Absatz". Da dieser bestimmte Absatz ein direktes Kind von ist .Container. A " Erster Paragraph" ist ein Kind von internal div Daher wird es nicht vom untergeordneten Selektor beeinflusst.
Auf diese Weise lassen sich solche Probleme leicht lösen, allerdings gibt es einen großen Nachteil Untergeordnete Selektoren in CSS- Sie funktionieren nicht in Browsern Internet Explorer. Aus diesem Grund ist ihre Verwendung höchst unerwünscht. Aber wenn Sie sich plötzlich irgendwo treffen, wissen Sie jetzt, was das bedeutet dieser Typ Selektoren und was sie tun.
