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

Die richtige Verwendung von MySQL-Indizes und detaillierte Erklärung der Indexprinzipien

1. Einleitung Warum brauchen wir Indizes? In allg...

So verstehen und identifizieren Sie Dateitypen in Linux

Vorwort Wie wir alle wissen, ist in Linux alles e...

Lösung für PHP, das nach Abschluss der Nginx-Installation nicht analysiert werden kann

Inhaltsverzeichnis Methode 1 Methode 2 Nach der I...

Die Funktionen und Unterschiede zwischen deaktiviert und schreibgeschützt

1: schreibgeschützt dient zum Sperren dieses Steue...

So fahren Sie MySQL sicher herunter

Beim Herunterfahren des MySQL-Servers können, abh...

JavaScript realisiert den Warteschlangenstrukturprozess

Inhaltsverzeichnis 1. Warteschlangen verstehen 2....

Vue realisiert einen dynamischen Fortschrittsbalkeneffekt

In diesem Artikelbeispiel wird der spezifische Co...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.23 unter Win10

In diesem Artikel wird die Installations- und Kon...

Umfassende Übersicht über die verschiedenen Abhörmethoden von Vue3.0

Inhaltsverzeichnis Hörer 1.Uhreneffekt 2.Uhr 1.1 ...

Lassen Sie uns über den Unterschied zwischen MyISAM und InnoDB sprechen

Die Hauptunterschiede sind folgende: 1. MySQL ver...

Erfahren Sie mehr über die am häufigsten verwendeten JavaScript-Ereignisse

Inhaltsverzeichnis JavaScript-Ereignisse: Häufig ...

JavaScript zum Erzielen eines Dropdown-Menüeffekts

Verwenden Sie Javascript, um ein Dropdown-Menü zu...

Detaillierte Erklärung des Unterschieds zwischen var, let und const in JavaScript

Inhaltsverzeichnis Als globale Variable Variables...

So konfigurieren Sie denselben Domänennamen für das Front- und Backend von Nginx

In diesem Artikel wird hauptsächlich die Methode ...

Zusammenfassung zum horizontal scrollenden Website-Design

Horizontales Scrollen ist nicht in allen Situation...