JavaScript-Dom-Objektoperationen

Inhaltsverzeichnis

1. Kern

1. Holen Sie sich den Dom-Knoten
2. Knoten aktualisieren

2.1 Praktische Übung

3. Dom-Knoten löschen

4. Knoten einfügen

4.1 Vorhandene Tags einfügen
4.2 Neues Tag zum Einfügen erstellen
4.3 Vor dem untergeordneten Knoten einfügen (insertBefore)

1. Kern

Die Browser-Webseite ist eine Dom-Baumstruktur

Update: Dom-Knoten aktualisieren
Durchlaufen von Dom-Knoten: Abrufen von Dom-Knoten
Löschen: Einen Dom-Knoten löschen
Hinzufügen: Einen neuen Knoten hinzufügen

Um einen Dom -Knoten zu betreiben, müssen Sie zuerst den Dom -Knoten erhalten

1. Holen Sie sich den Dom-Knoten

 <Text>
    <div id="div1">
   <h1 id="h"></h1>
   <p Klasse="p1"></p>
   </div>
 </body>

 //Nach Tag document.getElementsByTagName('h1');
  //Nach ID
   document.getElementById('div1');
  //Durch Klasse
   document.getElementsByClassName('p1');
  //Den übergeordneten Knoten h.parentElement abrufen
  //Alle untergeordneten Knoten unter dem übergeordneten Knoten abrufen div1.children[index];
  //Holen Sie sich den ersten Knoten div1.firstElementChild unter dem aktuellen Knoten;
  //Holen Sie sich den letzten Knoten div1.lastElementChild unter dem aktuellen Knoten;
  //Den nächsten Knoten abrufen h.nextElementSibling;

2. Knoten aktualisieren

   //Den Wert des Textes aktualisieren div1.innerText='Den Wert des Textes ändern'; 
   //Hypertext aktualisieren, Sie können HTML-Text-Tags analysieren div1.innerHTML='<strong>Hypertext hinzufügen</storng>';
   //CSS aktualisieren
   div1.style.color='rot';
   div1.style.fontSize='20px';//CamelCase-Benennung div1.style.padding='2em';

2.1 Praktische Übung

ID abrufen

Vor der Änderung

Vorgangseingabe

3. Dom-Knoten löschen

Schritte zum Löschen eines Knotens: Holen Sie sich zuerst den übergeordneten Knoten und löschen Sie sich dann selbst über den übergeordneten Knoten

let self=document.getElementById('p1');//Den gelöschten Knoten abrufen let father=self.parentElement//Den übergeordneten Knoten abrufen father.removeChild(self);//Den Knoten über den übergeordneten Knoten löschen

Hinweis: Beim Löschen eines Knotens verändert sich das Unterknoten-Array ständig, daher ist ein Löschen nicht statisch und fortlaufend durch das Array möglich, sondern nur dynamisch mehrfach.

4. Knoten einfügen

Wir erhalten einen Dom-Knoten. Vorausgesetzt, dieser Dom-Knoten ist leer, können wir über innerHtML ein Element hinzufügen. Wenn dieser Dom Knoten jedoch bereits ein Element hat, wird es überschrieben.

 <Text>
 
  <p id="p1">Java</p>
  <div id="div1">
  <p>JavaScript</p>
  <p>CSS</p>
  <p>C</p>
  </div>
 </body>

4.1 Vorhandene Tags einfügen

Lassen Sie a = document.getElementById('div1');
sei b = document.getElementById('p1');
a.appendChild(b);//anhängen

Wirkung

4.2 Neues Tag zum Einfügen erstellen

   let a=document.createElement('p');//Knoten p erstellen tag a.id='p2';
   a.innerText='Hallo, Xiao Shen';
   let list = document.getElementById('div1'); //Div1-ID abrufen
   list.appendChild(a); //Untergeordnete Knoten anhängen //Beschriftungsknoten erstellen let a=document.createElement('script');
   a.setAttribute('Typ','Text/Javascript');

Wirkung:

 //Stil-Tag-Knoten erstellen let st=document.createElement('style');
   st.setAttribute('Typ','Text/CSS');
   st.innerHTML='body{ Hintergrundfarbe:pink;}';
   let hd = document.getElementsByTagName('head')[0]; //Beachten Sie, dass head das 0. Element ist.
   hd.appendChild(st);

Wirkung:

4.3 Vor dem untergeordneten Knoten einfügen (insertBefore)

<html>
 <Kopf>
  <meta charset="utf-8">
  <Titel></Titel>
 </Kopf>
 <Text>
 
  <p id="p1">Java</p>
  <div id="div1">
  JavaScript
  <p id='p2'>css</p>
  <p id="p3">C</p>
  </div>
  <Skripttyp="text/javascript">
  //Der übergeordnete Knoten mit untergeordneten Knoten let list = document.getElementById('div1');
  lass selbst = document.getElementById('p2');
  let vorher=document.getElementById('p1');
  list.insertBefore(vorher, selbst);

  </Skript>
 </body>
</html>

Wirkung:

Dies ist das Ende dieses Artikels über JavaScript-Dom-Objektoperationen. Weitere relevante JavaScript-Dom-Objektoperationen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:

JavaScript-Dokumentobjektmodell DOM
Document Object Model (DOM) in JavaScript
Alle Eigenschaften des variablen Dom-Objekts von JavaScript
Beispiel für den Zugriff auf einen angegebenen Knoten in einem DOM-Objekt mit JS
Eine kurze Erläuterung zum Lesen benutzerdefinierter Attribute von DOM-Objekten (Tags) mit JS
Detaillierte Erläuterung der allgemeinen Attributmethoden von Dokumentobjekten in DOM in den JS-Grundlagen
Detaillierte Erläuterung der Attributmethoden von Elementobjekten in DOM in den JS-Grundlagen
JavaScript implementiert den DOM-Objektselektor
Vertieftes Verständnis von JavaScript-DOM-Objekten
JavaScript - DOM-Operation - Detaillierte Erklärung des Window.document-Objekts
jQuery-Objekte und JavaScript-Objekte, also DOM-Objekte, werden ineinander umgewandelt
js Objektbeziehungsdiagramm erleichtert DOM-Operationen
Beispielcode zum Lernen von JavaScript-DOM-Objekten
Detaillierte Erklärung der JavaScript-Operationen an DOM-Objekten

<<: Verwendungsanweisungen für den Befehl „Docker Create“

>>: Zusammenfassung der Grundsätze zum Schreiben von HTML-Seiten für E-Mails

JavaScript-Dom-Objektoperationen

Inhaltsverzeichnis

1. Kern

1. Holen Sie sich den Dom-Knoten

2. Knoten aktualisieren

2.1 Praktische Übung

3. Dom-Knoten löschen

4. Knoten einfügen

4.1 Vorhandene Tags einfügen

4.2 Neues Tag zum Einfügen erstellen

4.3 Vor dem untergeordneten Knoten einfügen (insertBefore)

Lehr- oder Lernprogramm für Webdesign

So generieren Sie PDFs und laden sie im Vue-Frontend herunter

So erstellen Sie eine Liste in CocosCreator

idea verwendet Docker-Plugin, um automatisierte Bereitstellung mit einem Klick zu erreichen

vsCode generiert Vue-Vorlagen mit einem Klick

Tipps zum Gestalten der Fotovorschau-Navigation auf Webseiten

Konfigurationsmethode für die kostenlose Installationsversion von MySql 5.7.21 unter Win10

Tutorial zum Ändern des Root-Passworts in MySQL 5.7

Detaillierter Installationsprozess und Prinzip des Vue-Routers

Mysql löst das N+1-Abfrageproblem der Datenbank

Artikel empfehlen

Kennen Sie die Bedeutung von Sonderzeichen in URLs?

MySQL 8.0.19 unterstützt die Sperrung eines Kontos nach dreimaliger Eingabe eines falschen Passworts (Beispiel)

So legen Sie fest, dass der Text im Dropdown-Auswahlmenü nach links und rechts gescrollt wird

mysql: [FEHLER] unbekannte Option '--skip-grant-tables'

Realisierung des Karusselleffekts basierend auf jQuery

Führen Sie die Schritte zum Erstellen eines Squid-Proxyservers unter Linux aus.

Implementierung effektiver Benutzergruppen und anfänglicher Benutzergruppen in Linux

So richten Sie eine VSCode-Remoteverbindung zum Server-Docker-Container ein

Ausführliches Tutorial zur Installation von MySQL 5.6-ZIP-Paketen

JavaScript ermittelt, ob der Browser IE ist

Erläuterung des Problems bei der Auswahl des MySQL-Speicherzeittyps

Grafisches Tutorial zur Installation eines Mac-Systems in einer virtuellen Maschine unter Win10

Auszeichnungssprache - Phrasenelemente

Eine kurze Analyse des Zeitproblems von MySQL

Vue implementiert das Methodenbeispiel der Tab-Routing-Umschaltkomponente