Analyse des Unterschieds zwischen Knotenobjekten und Elementobjekten im DOM

Der Inhalt dieses Artikels befasst sich mit der Analyse des Unterschieds zwischen Knotenobjekten und Elementobjekten im DOM. Ich hoffe, dass er für Sie hilfreich ist.

Knotenobjekt

Doms Standardspezifikation stellt das Knotenobjekt bereit, das hauptsächlich Attribute und Methoden zum Parsen der DOM-Knotenbaumstruktur bereitstellt Die DOM-Knotenbaumstruktur ist der Haupteingang zum Parsen der DOM-Knotenbaumstruktur. Die vom Node-Objekt bereitgestellten Eigenschaften und Methoden können Operationen wie das Durchlaufen von Knoten und das Einfügen von Knoten realisieren

Beurteilen Sie den Knotentyp

Element name.nodeName; – Den Labelnamen abrufen (Großbuchstaben)
Element name.nodeType; – Den Typ des Elements abrufen
Element name.nodeValue; – Den Textinhalt des Elements abrufen

Den übergeordneten Knoten abrufen

Node name.parentNode; - Den übergeordneten Knoten des untergeordneten Knotens abrufen
Node name.parentElement; - Den übergeordneten Elementknoten abrufen

untergeordneter Knoten

Node name.childNodes ; – Holen Sie sich alle untergeordneten Knoten unter dem übergeordneten Knoten
node name.firstChild; – Holen Sie sich den ersten untergeordneten Knoten unter dem übergeordneten Knoten
node name.lastChild; der letzte untergeordnete Knoten unter dem übergeordneten Knoten

Benachbarte Geschwisterknoten abrufen

Node name. previousSibling; - Das vorherige Geschwisterelement abrufen
Node name.nextSibling - Das nächste Geschwisterelement abrufen

appendChild()-Methode

Parent node.appendChild (untergeordneter Knoten); – Fügen Sie untergeordnete Knoten zum übergeordneten Knoten hinzu und fügen Sie sie standardmäßig am Ende hinzu
Parent node.insertBefore (neu). erstellter Knoten, alter Knoten auf der Seite); - Zum übergeordneten Element hinzufügen Der angegebene untergeordnete Knoten fügt

davor hinzu, um den Knoten zu löschen

parent node.removeChild(child node); - löscht den angegebenen untergeordneten Knoten

und ersetzt den Knoten

Parent node.replaceChild(new child node, target node); - Sie können den ausgewählten untergeordneten Zielknoten im übergeordneten Knoten ersetzen

Kopieren Sie den Knoten

Kopierter Zielknoten.cloneNode( true); - true bedeutet tiefes Klonen, wodurch alles im Knoten geklont wird, false bedeutet nicht tiefes Klonen, wodurch der Text nicht geklont wird Standard ist false

textContent-Attribut

node.textContent – ​​Der Textinhalt im Ausgabeknoten

Element-Objekt

Das Element-Objekt wird im bereitgestellt DOM-Standardspezifikation, die die Eigenschaften und Methoden aller Elemente in der HTML-Seite bereitstellt. Die DOM-Standardspezifikation stellt das Node-Objekt bereit, das hauptsächlich auf der DOM-Knotenbaumstruktur basiert, um auf den Inhalt der HTML-Seite zuzugreifen und ihn zu aktualisieren. Das Element-Objekt wird in der DOM-Standardspezifikation bereitgestellt, die hauptsächlich auf der DOM-Elementbaumstruktur basiert, um auf HTML-Seiteninhalte zuzugreifen und diese zu aktualisieren. Dieses Objekt wird vom Element-Objekt

Holen Sie sich das untergeordnete Element

Parent element.firstElementChild; – Holen Sie sich das erste untergeordnete Element im übergeordneten Element

Parent element.lastElementChild; – Holen Sie sich das letzte untergeordnete Element im übergeordneten Element

Holen Sie sich das benachbarte Geschwisterelement der Phase

element. previousElementSibling; – Holen Sie sich das vorherige Geschwisterelement des Elements

element.nextElementSibling; – Holen Sie sich das nächste Geschwisterelement des Elements

Attributoperation

Element.getAttribute('Attribute name'); - Holen Sie sich das angegebene Attribut des angegebenen Elements

Element.setAttribute('Attribute name', 'Attribute value') - Legen Sie den Attributnamen und den Attributwert des angegebenen Elements fest
Element.removeAttribute('Attribute name'); - Löschen Sie das Attribut des angegebenen Elements
element.hasAttribute('Attribute name'); - Bestimmen Sie, ob das angegebene Attribut des angegebenen Elements vorhanden ist, und das Ergebnis gibt a zurück Boolescher Wert

innerHTML-Attribut

Element.innerHTML; – Den HTML-Code des angegebenen Elements abrufen.

Parent element.innerHTML=HTML-Code; – HTML-Code zum übergeordneten Element hinzufügen und schreiben den HTML-Code direkt in der Zeichenfolge, aber diese Methode hat Sicherheitsprobleme

Verwandte Empfehlungen:

Konvertierung zwischen Jquery-Objekten und Javascript-Objekten, also DOM-Objekten_jquery

Attribute von DOM- und XMLHttpRequest-Objekten und -Methoden, domxmlhttprequest

Das obige ist der detaillierte Inhalt vonAnalyse des Unterschieds zwischen Knotenobjekten und Elementobjekten im DOM. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!