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

Lösung für das Problem, dass englische Buchstaben in Firefox nicht umbrochen werden

Das Layout des Textes unterliegt je nach Sprache ...

js, um einen interessanten Countdown-Effekt zu erzielen

js interessanter Countdown-Fall. Zu Ihrer Informa...

So aktualisieren Sie den Kernel in Deepin Linux manuell

deepin und Ubuntu sind beides auf debian basieren...

Linux implementiert den Quellcode des Zahlenratespiels

Ein einfacher Linux-Ratespiel-Quellcode Spielrege...

So überprüfen Sie, ob die Ports des lokalen Computers und des Remote-Servers unter Linux verbunden sind

Wie unten dargestellt: 1. ssh -v -p [Portnummer] ...

Implementierungscode für den MySQL-Protokolltrigger

SQL-Anweisung DROP-TRIGGER WENN EXISTIERT sys_men...

Zusammenfassung einiger gängiger Protokolle in MySQL

Vorwort: Im MySQL-System gibt es viele verschiede...

10 inhaltliche Prinzipien zur Verbesserung der Website-Performance

<br />Englische Adresse: http://developer.ya...

Erfahren Sie, wie Sie Docker unter Windows 10 Home Edition installieren.

Als ich die Bücher über Redis und Spring Cloud Al...

Grafische Einführung in den Unterschied zwischen := und = in MySQL

Der Unterschied zwischen := und = = Nur beim Setz...

14 praktische Erfahrungen zur Reduzierung von SCSS-Code um 50 %

Vorwort Sass ist eine Erweiterung der CSS3-Sprach...

Eine detaillierte Erklärung, wie React Fiber funktioniert

Inhaltsverzeichnis Was ist React Fiber? Warum Rea...

MySQL Serie 4 SQL-Syntax

Inhaltsverzeichnis Tutorial-Reihe 1. Einführung u...

Detaillierte Erklärung des JavaScript ES6-Moduls

Inhaltsverzeichnis 0. Was ist ein Modul 1.Modul l...

Erste Erkundung gängiger Befehle für Docker-Anfänger

Bevor wir Docker offiziell verwenden, machen wir ...