JavaScript-Dokumentobjektmodell DOM

JavaScript-Dokumentobjektmodell DOM

Vorwort:

Wenn eine Webseite geladen wird, erstellt der Browser Document Object Model für die Seite. Durch das programmierbare Objektmodell hat JavaScript genügend Leistungsfähigkeit gewonnen, um dynamisches HTML zu erstellen.

1. JavaScript kann alle HTML-Elemente auf der Seite ändern

1. HTML-Element anhand der ID finden

Suchen Sie nach einem bestimmten HTML-Tag und ändern Sie es

<Text>
    <div calss="001">Wer bin ich</div>
    <Skript>
        var x = document.getElementById("001");
        x.innerHTML = „Ich bin ein tapferer Stier, der keine Angst vor Schwierigkeiten hat“;
    </Skript>
</body>
<Text>

 <p id="intro">Hallo Niu Niu!</p>
 <p>Dieses Beispiel demonstriert die Methode <b>getElementById</b>!</p>
 <Skript>
  x=document.getElementById("intro");
  document.write("<p>Text aus Absatz mit ID intro: " + x.innerHTML + "</p>");
 </Skript>

</body>

2. HTML-Elemente anhand des Tag-Namens finden

var x = document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('Der erste Absatz im Element id="main" ist:' + y[0].innerHTML);

Suchen Sie das Element mit id=“main” und anschließend das erste <p>-Element innerhalb des Elements id=“main” :

//Die erste Möglichkeit, es zu schreiben var x = document.getElementById("main");
var y = x.getElementsByTagName("p")[0];



//Alle p-Tags in HTML suchen und den Inhalt des ersten Tags ersetzen var y = document.getElementsByTagName("p");
y[0].innerHTML = "Tapferer Stier, der keine Angst vor Schwierigkeiten hat"



<Skript>
 var x = document.getElementById("main");
 var y=x.getElementsByTagName("p");
 document.write('Der erste Absatz im Element id="main" ist:' + y[0].innerHTML);
</Skript>

3. Suchen Sie HTML-Elemente nach Klassennamen

<Text>
    <p class="intro">Hallo Niu Niu!</p>
    <p>Dieses Beispiel demonstriert die Methode <b>getElementsByClassName</b>!</p>
    <Skript>
        x = document.getElementsByClassName("intro");
        document.write("<p>Text aus dem Einführungsabsatz der Klasse: " + x[0].innerHTML + "</p>");
    </Skript>
</body>

Ändern Sie den Elementinhalt solcher Tags:

<Text>
    <p class="intro">Hallo Niu Niu!</p>
    <p>Dieses Beispiel demonstriert die Methode <b>getElementsByClassName</b>!</p>
    <Skript>
        x = document.getElementsByClassName("intro")[0];
        x.innerHTML = "Tag-Inhalt ändern";
        // document.write("<p>Text aus dem Einführungsabsatz der Klasse: " + x[0].innerHTML + "</p>");
    </Skript>
</body>

4. JavaScript kann alle HTML-Attribute auf der Seite ändern

Um die Attribute eines HTML-Elements zu ändern, verwenden Sie diese Syntax:

document.getElementById(id).attribute=neuer Attributwert <img id="image" src="smiley.gif" width="160" height="120">
<Skript>
 document.getElementById("Bild").src="Landschaft.jpg";
</Skript>
<p>Das Originalbild ist smiley.gif, das Skript ändert das Bild in landscape.jpg</p>

5. JavaScript kann alle CSS-Stile auf der Seite ändern

JavaScript HTML DOM - CSS ändern

Um den Stil eines HTML-Elements zu ändern, verwenden Sie diese Syntax:

document.getElementById(id).style.property=新樣式

<!DOCTYPE html>
<html>
<Kopf>
 <meta charset="utf-8">
 <title>Titel</title>
</Kopf>
<Text>
 <p id="p1">Hallo Welt!</p>
 <p id="p2">Hallo Welt!</p>
 <Skript>
  document.getElementById("p2").style.color="blau";
  document.getElementById("p2").style.fontFamily="Arial";
  document.getElementById("p2").style.fontSize="größer";
 </Skript>
 <p>Die obigen Absätze werden per Skript geändert. </p>
</body>
</html>

6. JavaScript kann auf alle Ereignisse auf der Seite reagieren

HTML-DOM zum Versenden von Ereignissen:

Es bedeutet : Wenn ich etwas tue, wird eine bestimmte Funktion ausgelöst.

<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
</Kopf>
<Text>

 <p>Durch Klicken auf die Schaltfläche wird die Funktion <em>displayDate()</em> ausgeführt. </p>
 
 <button id="myBtn">Klick mich</button>
 
 <Skript>
  document.getElementById("myBtn").onclick=function(){
   Anzeigedatum ()};
  Funktion displayDate()
  {
   
      document.getElementById("demo").innerHTML=Datum();
  }
 </Skript>
 
 <p id="demo"></p>

</body>
</html>

wie folgt:

Mit den Ereignissen onmouseover und onmouseout können Funktionen ausgelöst werden, wenn der Mauszeiger zu einem Element bewegt wird oder dieses verlässt.

<!DOCTYPE html>
<html><Kopf>
<meta charset="utf-8">
</Kopf>
<Text>

 <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Maus über mich</div>
 
 <Skript>
  Funktion mOver(obj)
  {
   
   obj.innerHTML="Vielen Dank"
  }
  
  Funktion mOut(obj)
  {
   
   obj.innerHTML="Bewege die Maus über mich"
  }
 </Skript>

</body>
</html>

Dies ist das Ende dieses Artikels über das JavaScript Document Object Model DOM. Weitere relevante Inhalte zum JavaScript Document Object Model 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-Dom-Objektoperationen
  • 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

<<:  Was ist die Funktion und Schreibreihenfolge der Pseudoklasse eines Tags?

>>:  Designperspektive Technologie ist ein wichtiges Kapital der Designfähigkeit

Artikel empfehlen

So installieren Sie MySQL in Docker

Ich habe kürzlich Django bereitgestellt und wollt...

Anwendung von Hadoop-Zählern und Datenbereinigung

Datenbereinigung (ETL) Vor dem Ausführen des MapR...

HTML/CSS (der erste Leitfaden, den Anfänger unbedingt lesen sollten)

1. Die Bedeutung von Webstandards verstehen - War...

So verwenden Sie den Linux-Befehl tr

01. Befehlsübersicht Der Befehl tr kann Zeichen a...

Detaillierte Erläuterung des Linux-Befehls zur Änderung des Hostnamens

Linux-Befehl zum Ändern des Hostnamens 1. Wenn Si...

Beispiel für die Verwendung von MRG_MyISAM (MERGE) zur Implementierung einer Abfrage nach der Partitionierung in MySQL

Die Optimierung großer Datenbankdatenmengen ist e...

Grundlegendes Tutorial zur Steuerung des mobilen Roboters Turtlebot3 mit ROS

Chinesisch-Tutorial https://www.ncnynl.com/catego...

Wann sollte eine Website Anzeigen schalten?

Als ich vor kurzem mit einem Internet-Veteranen ü...

So installieren Sie den MySQL 5.7.28-Binärmodus unter CentOS 7.4

Linux-Systemversion: CentOS7.4 MySQL-Version: 5.7...

Implementierung der CSS-Variableneinfügung im Vue3-Stil

Inhaltsverzeichnis Zusammenfassung Einfaches Beis...

Zusammenfassung der Linux-Benutzergruppen und -Berechtigungen

Benutzergruppen Unter Linux muss jeder Benutzer e...

Grundlegende Operationen von MySQL-Datentabellen: Operationen in der Tabellenstruktur, Beispielanalyse von Feldoperationen

Dieser Artikel beschreibt anhand von Beispielen d...

Zusammenfassung der MySQL-Abfragesyntax

Vorwort: In diesem Artikel wird hauptsächlich die...

Kapseln Sie eine einfachste ErrorBoundary-Komponente zur Behandlung von React-Ausnahmen

Vorwort Ab React 16 wurde das Konzept der Fehlerg...

Vue-Routing zum Implementieren der Login-Abfangung

Inhaltsverzeichnis 1. Übersicht 2. Routing Naviga...