Mit der Methode
document.getElementById() können wir über seine ID in JavaScript auf jedes HTML-Element zugreifen. Jede Webseite kann nur ein einziges HTML-Element mit einer einzigen ID enthalten.
Sie können den folgenden Beispielcode verwenden, um auf jedes HTML-Element über seine ID zuzugreifen.
let element = document.getElementById('id');
Nach dem Login kopieren
Im obigen Code haben wir die Methode getElementById() des Dokumentobjekts verwendet und die ID als Parameter übergeben.
Wenn wir nun über die ID auf mehrere Elemente zugreifen müssen, ist die Verwendung von document.getElementById() keine gute Idee, aber wir können eine Abkürzung dafür erstellen und diese verwenden.
Sie können wie folgt eine Abkürzung für die Methode document.getElementById() erstellen.
Verwenden Sie den Pfeilfunktionsausdruck, um die Abkürzung der Methode document.getElemenetById() zu schreiben
Die einfachste Lösung besteht darin, Pfeilfunktionen zu verwenden, um eine Abkürzung für die Methode document.getElementById() zu erstellen. Wir können eine Pfeilfunktion erstellen, die die ID als Parameter verwendet und das Element nach dem Zugriff darauf mit der Methode document.getElementById() im Pfeilfunktionskörper zurückgibt.
Grammatik
Sie können der folgenden Syntax folgen, um die Abkürzung document.getElementById() für die Methode mithilfe von Pfeilen oder anonymen Funktionen zu schreiben.
let get = (id) => document.getElementById(id);
let element = get('element_id');
Nach dem Login kopieren
In der obigen Syntax haben wir die Pfeilfunktion get() erstellt, die die ID als Parameter verwendet, mit der Methode document.getElementById() und der ID auf das Element zugreift und es dann zurückgibt.
Beispiel
Im folgenden Beispiel verwenden wir eine anonyme Pfeilfunktion, um eine Abkürzung für die Methode document.getElementById() zu erstellen. Im Code können Benutzer beobachten, dass wir nicht jedes Mal „document.getElementById()“ schreiben müssen, wenn wir mit der ID auf ein Element zugreifen, da wir die Funktion get() verwenden können
<html>
<body>
<h3>Using the arrow or anonymous functions to write shorthand for document.getElementById() method in JavaScript </h3>
<div id = "output"> </div> <br>
<div id = "test"> </div>
<script>
let get = (id) => document.getElementById(id);
let output = get('output');
output.innerHTML += "This text is written in the div with id equal to output. <br>";
let test = get('test');
test.innerHTML += "This text is written in the div with an id equal to the test. <br>";
</script>
</body>
</html>
Nach dem Login kopieren
Verwenden Sie den Prototyp, um die Abkürzung der Methode document.getElementById() zu schreiben
In JavaScript sind die meisten Dinge Objekte und jedes Objekt enthält seinen Prototyp. Ebenso ist ein Prototyp ein Objekt, das den Prototyp enthält, der die Prototypenkette erstellt. Wir können dem Prototyp des Objekts eine Methode oder Eigenschaft hinzufügen und diese verwenden. Hier fügen wir dem Objekt „document“ eine Eigenschaft hinzu, indem wir den Wert „document.getElementById“ verwenden. Anschließend können wir dieses Attribut verwenden, um über die ID auf das Element zuzugreifen.
Grammatik
Benutzer können den Objektprototyp verwenden, um die Abkürzung der Methode document.getElementById() gemäß der folgenden Syntax zu schreiben.
HTMLDocument.prototype.get = document.getElementById;
let output = document.get('output');
Nach dem Login kopieren
In der obigen Syntax verwenden wir das „HTMLDocument“-Objekt, um auf den Prototyp des Dokumentobjekts zuzugreifen. Wir haben dem Dokumentobjekt die Eigenschaft „get“ hinzugefügt.
Beispiel
Im folgenden Beispiel fügen wir dem HTML-Dokumentobjekt das Attribut „get“ hinzu und geben als Wert die Methode document.getElementById() an.
Jetzt können wir über das „document“-Objekt (wie „document.get()“) auf die get-Eigenschaft zugreifen. Wir können die ID als Parameter des „get“-Attributs übergeben, um über die ID auf das Element zuzugreifen.
<html>
<body>
<h3>Using the <i> object prototypes </i> to write shorthand for document.getElementById() method in JavaScript </h3>
<div id = "output"> </div>
<div id = "test"> </div>
<script>
HTMLDocument.prototype.get = document.getElementById;
let output = document.get('output');
output.innerHTML += "The output div accessed by id using the get prototype. <br>";
let test = document.get('test');
output.innerHTML += "The test div accessed by id using the get prototype. <br>";
</script>
</body>
</html>
Nach dem Login kopieren
Mit jQuery
jQuery ist eine JavaScript-Bibliothek, die es uns ermöglicht, besser lesbaren JavaScript-Code zu schreiben. Mit dem Element-Accessor „$()“ von jQuery können wir über seine ID auf ein HTML-Element zugreifen.
Grammatik
Benutzer können JQuery verwenden, um die Abkürzung der Methode document.getElementById() gemäß der folgenden Syntax zu schreiben.
$('#id')
Nach dem Login kopieren
In der obigen Syntax verwenden wir das Zeichen „#“, um über seine ID auf das Element zuzugreifen.
Beispiel
Im folgenden Beispiel haben wir JQuery CDN im
-Tag hinzugefügt, um JQuery in HTML zu verwenden. Wir haben das „div“-Element in HTML erstellt. In JQuery verwenden wir den Accessor „$()“, um auf das Element mit der ID zuzugreifen. Das Zeichen „#“ gibt an, dass der Benutzer über die ID auf das Element zugreifen möchte.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<h3>Using the <i> jQuery</i> to write shorthand for document.getElementById() method in JavaScript </h3>
<div id = "test"> </div>
<script>
$('#test').html('This div is accessed via id using jQuery.');
</script>
</body>
</html>
Nach dem Login kopieren
Benutzer haben gelernt, verschiedene Methoden zu verwenden, um die Abkürzung für die Methode document.getElementById() zu schreiben. JQuery bietet ein einfaches und kurzes Codeformat für den Zugriff auf Elemente mithilfe der ID. Wenn Benutzer JavaScript verwenden möchten, können sie Pfeilfunktionen verwenden oder den Prototyp des Objekts nach ihren eigenen Vorlieben aufzeichnen.
Das obige ist der detaillierte Inhalt vonWie schreibe ich eine Abkürzung für die Methode document.getElementById() in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
