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

CSS-Isolationsproblem in Blazor

1. Umwelt VS 2019 16.9.0 Vorschau 1.0 .NET SDK 5....

Docker Nginx-Container und Tomcat-Container zur Realisierung von Lastausgleich und dynamischen und statischen Trennungsvorgängen

Tomcat8-Image herunterladen [root@localhost ~]# D...

Lösen Sie das Problem des hässlichen blauen Rahmens nach dem Hinzufügen eines Hyperlinks zum HTML-Bild img

HTML-Bild erzeugt nach dem Hinzufügen eines Hyper...

Methoden und Schritte zum Bereitstellen von Go-Projekten basierend auf Docker-Images

Abhängigkeit vom Wissen Grundlagen der Go-Cross-K...

Mehrere Methoden zur horizontalen und vertikalen Zentrierung von Div-Inhalten mit CSS3 Flex

1. Flex-Richtung: (Richtung der Elementanordnung)...

Detaillierte Erläuterung des MySQL-Kombinationsindex und des ganz links stehenden Übereinstimmungsprinzips

Vorwort Ich habe im Internet schon viele Artikel ...

Docker-Bereinigungsumgebungsvorgang

Beginnen Sie vorsichtig mit der Reinigung! Auflis...

Beispielanalyse der Listen-Direktive in Nginx

Handlungsüberblick Im vorherigen Artikel haben wi...

So erkennen Sie die Dateisystemintegrität basierend auf AIDE in Linux

1. HILFE AIDE (Advanced Intrusion Detection Envir...

vue $set implementiert die Zuweisung von Werten zu Array-Sammlungsobjekten

Vue $set Array-Sammlungsobjektzuweisung In der be...

Konfigurationsschritte für die MySQL-Gruppenreplikation (empfohlen)

MySQL-Group-Replication ist eine neue Funktion, d...

Detaillierte Analyse und Verwendung des Befehls tcpdump unter Linux

Einführung Einfach ausgedrückt ist tcpdump ein Pa...

SSM-Projekte werden häufig als War-Pakete bereitgestellt, wobei Tomcat und Maven zur Implementierung der Hot-Deployment-Konfiguration verwendet werden.

Hintergrund Wie wir alle wissen, müssen wir nach ...

64-Bit-CentOs7-Quellcodeinstallation MySQL-5.6.35 Prozessfreigabe

Installieren Sie zuerst die abhängigen Pakete, um...

docker run -v mountet Datenvolumes abnormal und der Containerstatus wird immer neu gestartet

Symptome: Nach dem Hinzufügen des Parameters -v z...