JavaScript-Dom-Objektoperationen

JavaScript-Dom-Objektoperationen

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

Artikel empfehlen

SQL-Zusammenführungsvorgang von Abfrageergebnissen von Tabellen mit unterschiedlichen Spalten

Um zwei verschiedene Tabellen abzufragen, müssen ...

In einem Artikel erfahren Sie, wie Sie mit js den Sperrfeuereffekt erzielen

Inhaltsverzeichnis Erstellen Sie eine neue HTML-D...

Der Prozess des Erstellens und Konfigurierens der Git-Umgebung in Docker

Konfigurieren Sie die Git-Umgebung in Docker Bei ...

HTML-Grundlagen - Einfaches Beispiel zum Festlegen des Hyperlink-Stils

*** Beispiel für das Festlegen des Stils eines Hy...

Implementierung der Docker-Bereitstellung des SQL Server 2019 Always On-Clusters

Inhaltsverzeichnis Docker-Bereitstellung Always o...

Detaillierte Erklärung der grundlegenden Verwendung des img-Bild-Tags in HTML/XHTML

Das Bild-Tag wird verwendet, um ein Bild auf eine...

Eine kurze Analyse der Konfigurationselemente des Angular CLI-Releasepfads

Vorwort Bei der Projektfreigabe ist immer eine Ve...

VMware virtuelle Maschine installieren CentOS 8 (1905) System-Tutorial-Diagramm

Die weltberühmte virtuelle Maschinensoftware VMwa...

So entwickeln Sie eine Progressive Web App (PWA)

Inhaltsverzeichnis Überblick Erfordern URL der An...

Detaillierte Erläuterung gängiger Methoden von JavaScript-Arrays

Inhaltsverzeichnis Gängige Array-Methoden Pop() u...

Führen Sie die Schritte zum Upgrade von Nginx http auf https aus.

Der Unterschied zwischen http und https ist Bei m...

So konfigurieren Sie die bidirektionale Zertifikatsüberprüfung auf dem Nginx-Proxyserver

Generieren einer Zertifikatskette Verwenden Sie d...

Mehrere Möglichkeiten zum Hinzufügen von Zeitstempeln in MySQL-Tabellen

Szenario: Die Daten in einer Tabelle müssen mithi...

So verarbeiten Sie sehr große Formularbeispiele mit Vue+ElementUI

Aufgrund von Geschäftsanpassungen im Unternehmen ...

Konfigurieren Sie ein Implementierungsbeispiel für den Mysql-Master-Slave-Dienst

Konfigurieren Sie ein Implementierungsbeispiel fü...