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');
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.
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.
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');
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.
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>
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.
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');
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.
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>
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.
Benutzer können JQuery verwenden, um die Abkürzung der Methode document.getElementById() gemäß der folgenden Syntax zu schreiben.
$('#id')
In der obigen Syntax verwenden wir das Zeichen „#“, um über seine ID auf das Element zuzugreifen.
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>
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!
Antivirus für Apple-Handys
Tutorial zum Kauf und Verkauf von Bitcoin auf Huobi.com
Was bedeutet das Formatieren eines Mobiltelefons?
Was sind die Python-Bibliotheken für künstliche Intelligenz?
MySQL-Ausnahmelösung
Welches Format ist m4a?
Zusammenfassung der Java-Grundkenntnisse
Fehlerberichtslösung für den MySQL-Import einer SQL-Datei
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
