Detaillierte Erläuterung von JavaScript-WebAPI-, DOM-, Ereignis- und Operationselementbeispielen

WebAPI

API : Anwendungsprogrammierschnittstelle, eine Reihe vordefinierter Funktionen, die Entwicklern von einer bestimmten Software zur Verfügung gestellt werden, um ihnen bei der Implementierung bestimmter Funktionen zu helfen. Entwickler müssen nicht auf den Quellcode zugreifen oder die Details seines internen Arbeitsmechanismus verstehen, sondern müssen nur wissen, wie man ihn verwendet.

Einfaches Verständnis : API ist ein Tool, das Programmierern zur Verfügung gestellt wird, um die Ausführung der gewünschten Funktionen zu erleichtern.

WebAPI : Eine API hauptsächlich für Browser, die als Objekt in der Sprache JavaScript gekapselt ist. Web API kann verwendet werden, indem die Eigenschaften und Methoden des Objekts aufgerufen werden

Einfaches Verständnis : Web-API ist eine Reihe von APIs (BOM und DOM), die vom Browser bereitgestellt werden, um Browserfunktionen und Seitenelemente zu betreiben.

DOM

Das Document Object Model ist eine von der W3C-Organisation empfohlene standardisierte Programmierschnittstelle zur Verarbeitung von Extensible Markup Language (HTML oder XML).

DOM-Baum

DOM verarbeitet HTML-Dokumente in einer Baumstruktur (invertiert) und behandelt HTML-Dokumente als Baum. Die Tags, Attribute und Inhalte der Tags im Dokument sind alle Knoten.

Die Spitze des DOM-Baums ist das Dokument und die Spitze des BOM ist das Fenster

• Dokument: Eine Seite wird als Dokument behandelt
• Alle Tag-Elemente in der Elementseite
• Der gesamte Inhalt einer Webseite ist ein Knoten im Dokumentbaum (z. B. Elementknoten, Attributknoten, Textknoten, Kommentarknoten usw.). Jeder Knoten ist ein Objekt mit Eigenschaften und Methoden.

Methode zur Erfassung von DOM-Elementen

Dokumentobjekteigenschaften

Ereignis

Ereignis: Der Benutzer führt eine Aktion aus (ein Verhalten, das von JavaScript erkannt werden kann). Es handelt sich um einen „Trigger-Response“-Mechanismus und eine Möglichkeit, Seiteninteraktion zu erreichen.

Drei Elemente der Veranstaltung:

Ereignisquelle: Wer hat das Ereignis ausgelöst? Ereignistyp: Welches Ereignis wurde ausgelöst? Ereignishandler: Der Code, der ausgeführt wird, nachdem das Ereignis ausgelöst wurde (in Funktionsform)

Schritte zur Verwendung von Ereignissen

<Text>
  <button id="btn">Klick</button>
  <Skript>
    var btn = document.getElementById('btn') // Schritt 1: Holen Sie sich die Ereignisquelle // Schritt 2: Registrieren Sie das Ereignis btn.onclick
    btn.onclick = function () { // Schritt 3: Eventhandler hinzufügen (in Form einer Funktionszuweisung)
        Warnung('Popup')
    }
  </Skript>
</body>

Ereignisname = Funktionsname ([Parameter])

Hinweis: Es gibt zwei Möglichkeiten, eine Schaltfläche zu erstellen:

<input type="button" value="Anzeigetext der Schaltfläche">
<button type="button">Schaltflächen-Anzeigetext</value>

Art der Veranstaltung

Bedienelemente

Inhalt des Operationselements

Die von DOM bereitgestellten Attribute implementieren die Operationsmethoden des Elementinhalts:

• innerHTML (W3C) identifiziert HTML-Tags. Das Format und der Beschriftungsstil der Schrift bleiben bei der Verwendung erhalten
• innerText (nicht standardmäßig) erkennt keine HTML-Tags. Reiner Text ohne sämtliche Formatierungen und Tags
• Die Eigenschaft textContent behält die Textformatierung nach dem Entfernen der Tags bei

<Text>
    <div id="box">
        Der erste Absatz ...
        <p>
            Der zweite Absatz ...
            <a href="#">Dritte</a>
        </p>
    </div>
</body>
<Skript>
    var box = document.getElementById('box')
    Konsole.log(box.innerHTML)
    Konsole.log(Box.innerText)
    Konsole.log(Box.Textinhalt)
</Skript>

Attribute des Operationselements

In DOM bezieht sich die HTML-Attributmanipulation auf die Verwendung von JavaScript zum Bearbeiten der HTML-Attribute eines Elements.

• Elemente: src, href usw.
• In der Form: ID, Alt, Titel usw.

Stil des Operationselements

①Betreiben Sie das Stilattribut: Elementobjekt.style.style-Attributname

Der Name des Stilattributs entspricht dem CSS-Stilnamen, Sie müssen jedoch den Bindestrich „-“ im CSS-Stilnamen entfernen und den ersten Buchstaben des englischen Wortes nach dem Bindestrich groß schreiben.

<Text>
    <div id="box"></div>
    <Skript>
        var ele = document.querySelector('#box'); // Elementobjekt abrufen ele.style.backgroundColor= 'red';
        ele.style.width = "100px";
        ele.style.height = "100px";
        ele.style.transform = 'drehen(7 Grad)';
    </Skript>
    <!-- Die obigen 3 Codezeilen entsprechen dem Hinzufügen der folgenden Stile in CSS: -->
    <Stil>
        #Kasten {
            Hintergrundfarbe: rot;
            Breite: 100px;
            Höhe: 100px;
            transformieren: drehen (7 Grad);
        }
    </Stil>
</body>

② Bedienen Sie das className -Attribut: Element object.className

• Wenn während der Entwicklung viele Stiländerungen stattfinden, können Sie den Elementstil durch Bearbeiten des Klassennamens ändern.
• Der Zugriff auf den Wert des className-Attributs bedeutet, den Klassennamen des Elements abzurufen, und die Zuweisung eines Werts zum className-Attribut bedeutet, den Klassennamen des Elements zu ändern.
• className ändert den Klassennamen des Elements und überschreibt den ursprünglichen Klassennamen
• Wenn ein Element mehrere Klassennamen hat, trennen Sie diese im Klassennamen durch Leerzeichen.

Exklusives Denken

Wenn es denselben Satz von Elementen gibt und Sie möchten, dass ein bestimmtes Element einen bestimmten Stil erreicht, müssen Sie einen zyklischen exklusiven Ideenalgorithmus verwenden:

• Klare Stile für alle Elemente (andere löschen)
• Legen Sie den Stil für das aktuelle Element fest (überlassen Sie es mir)
• Beachten Sie, dass die Reihenfolge nicht umgekehrt werden kann. Töten Sie zuerst andere und bereiten Sie sich dann selbst vor.

Benutzerdefinierte H5-Attribute

Der Zweck benutzerdefinierter Attribute besteht darin, Daten zu speichern und zu verwenden. Einige Daten können auf der Seite statt in der Datenbank gespeichert werden

Einige benutzerdefinierte Attribute sind leicht mehrdeutig und es ist nicht einfach zu bestimmen, ob es sich um integrierte Attribute des Elements oder um benutzerdefinierte Attribute handelt. HTML5 fügt eine neue Spezifikation für benutzerdefinierte Attribute hinzu. In HTML5 ist festgelegt, dass benutzerdefinierte Attribute durch " Datenattributname " festgelegt werden können.

Legen Sie den Eigenschaftswert fest :

①Benutzerdefinierte Attribute in HTML festlegen

Datenattributname = "Wert"

//Setze das data-index-Attribut auf dem div-Element <div data-index="2"></div>

②Benutzerdefinierte Eigenschaften in JavaScript festlegen

• element.setAttribute('Attribut', Wert)
• Element.Datensatz.Attributname = "Wert"

<div></div>
<Skript>
    var div = document.querySelector('div');
    div.Datensatz.Index = "2";
     div.setAttribute('Datenname', 'Andy');
</Skript>

Holen Sie sich den Eigenschaftswert:

• element.getAttribute()
• Element.Datensatz.Eigenschaft
• element.dataset['attribute'] (Kompatibilitätsprobleme)

Hinweis: Ein Datensatz ist eine Sammlung , die alle benutzerdefinierten Attribute speichert, die mit „data“ beginnen. Wenn ein benutzerdefiniertes Attribut mehrere Bindestriche (-) enthält, wird beim Abrufen Camel Case-Namen verwendet.

<div getTime="20" data-index="2" data-list-name="andy"></div>
<Skript>
  var div = document.querySelector('div');
  console.log(div.getAttribute('data-index')); // Ergebnis: 2
  console.log(div.getAttribute('data-list-name')); // Ergebnis ist: andy
  // Eine neue Methode zum Abrufen benutzerdefinierter Attribute in HTML5. Sie können nur Attribute abrufen, die mit „data-“ beginnen console.log(div.dataset); // DOMStringMap {index:"2",listName:"andy"}
  console.log(div.dataset.index); // Ergebnis: 2
  console.log(div.dataset['index']); // Ergebnis: 2
  console.log(div.dataset.listName); // Ergebnis: andy
  console.log(div.dataset['listName']); // Ergebnis ist: andy
</Skript>

So entfernen Sie einen Eigenschaftswert:

element.removeAttribute('Attribut')

<div id="test" class="footer" ></div>
<Skript>
    var div = document.querySelector('div');   
    div.removeAttribute('id'); // Entferne das ID-Attribut des div-Elements div.removeAttribute('class'); // Entferne das Class-Attribut des div-Elements</script>

Informationen zu bestimmten Operationselementfällen finden Sie im Artikel: Übungen zu JavaScript-Operationselementen

Zusammenfassen

Dies ist das Ende dieses Artikels über JavaScript WebAPI, DOM, Ereignisse und Operationselemente. Weitere relevante js WebAPI, DOM, Ereignisse und Operationselemente finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!