• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

getElementById() notwendig?

M

mehmet_b_90

Neues Mitglied
Hallo zusammen,

ich bin gerade dabei JavaScript (neben HTML, CSS, PHP und SQL) über ein Buch zu lernen. Wie man auf HTML-Elementen zugreift weiß ich mittlerweile (mit der im Titel genannten Methode). Im Buch wird vom Autor in manchen Quelltexten gezeigt, wie er ohne die getElementById()-Methode auf die HTML-Elemente zugreift. Habe es selbst ausprobiert und es funktioniert. Wozu braucht man dann die Methode?
Habe dann ein wenig gegoogelt und gelesen, dass es nicht empfohlen wird, da man sonst evtl. auf globale Variablen (vom Window-Objekt) zugreift, statt auf ein HTML-Element, sofern sich die Variablennamen überschneiden.

Das gleiche bei Zugriff auf Formularen. Da schreibt der Autor folgendes im Quelltext:

HTML: 
<html>
    <body>
        <form name="formular">
            <input type="text" name="vorname">
            <input type="checkbox" name="box">
        </form>
    </body>
</html>

Javascript: 
let fName = formular.vorname.value;
formular.box.checked = true;

Oder beim erstellen von Event-Handlern:

HTML: 
<html>
    <body>
        <button id="btn">
            Klicke hier
        </button>
    </body>
</html>

Javascript: 
"use strict";

function getMessage() {
    alert("Hallo Welt!");
}

btn.addEventListener("click", getMessage);

So wie ich das jetzt mitbekommen habe sollte man auch bei den gezeigten Beispielen ebenfalls via getElementById() auf die Elemente zugreifen.
Wie wird das in der Regel gemacht? Sollte man immer auf HTML-Elemente z.B. via getElementById()/getElementsByName() zugreifen?

PS: Frohe Weihnachten wünsche ich euch allen!

Mit freundlichen Grüßen
mehmet_b_90
 
Zuletzt bearbeitet:
Werbung:
Abend,

wieso Gedanken machen wo das Element im Baum liegt? Ich meine nicht mit Methoden wie firstElementChild()/nextElementSibling().
Ich spreche das Element mit der ID direkt als Variablennamen im Quelltext an. Aber man soll das ja nicht so machen.

Was ist der Unterschied, ob ich mit getElementById() oder mit der ID des Elements direkt im Quelltext darauf zugreife?
 
Zuletzt bearbeitet:
Achso ok, danke.

Möchte aber nochmal auf deine Aussage zurückgreifen. Du hast geschrieben:

Sempervivum schrieb:
... weil ich mir dann keine Gedanken machen muss, wo das Element im Baum liegt. ...
Zum Vergrößern anklicken....

Wenn ich auf das form-Tag zugreifen möchte, muss ich doch nicht wissen, wo genau das form-Tag im Baum liegt, da ich doch mit dem Variablennamen (das der ID des Tags entspricht) zugreife. Oder verstehe ich da was falsch?
 
Werbung:
mehmet_b_90 schrieb:
Wenn ich auf das form-Tag zugreifen möchte, muss ich doch nicht wissen, wo genau das form-Tag im Baum liegt, da ich doch mit dem Variablennamen (das der ID des Tags entspricht) zugreife. Oder verstehe ich da was falsch?
Zum Vergrößern anklicken....

Wenn man aber 2 gleiche Formulare hat muss man das schon wissen ,

Code: 
<html>
    <body>
        <form name="formular">
            <input type="text" name="vorname">
            <input type="checkbox" name="box">
        </form>
          <form name="formular">
            <input type="text" name="vorname">
            <input type="checkbox" name="box">
        </form>   
      <script>
        formular[0].box.checked = true;
        formular[1].box.checked = true;
      </script>
    </body>
</html>
oder halt mit id's.

Aber @Sempervivum hatte es ja auch schon gesagt das die Methode nicht jeder Browser kann und ich mache es auch lieber mit Ids , weil das am einfachsten ist.
 
Danke soweit für eure Hilfe.

Also Fazit ist: mit getElementById() wird von jedem Browser unterstützt. Der Zugriff via Variablennamen, die dem id bzw. name-Attribut, des Elements entspricht, wird nicht unbedingt von jedem Browser unterstützt. Sehe ich das richtig?
 
HTML: 
<html>
    <body>
        <form name="formular">
            <input type="text" name="vorname">
            <input type="checkbox" name="box">
        </form>
        <button id="btn">
            Klicke hier
        </button>
    </body>
</html>
<script>
    btn.addEventListener("click", getMessage);
    function getMessage() {
        formular.vorname.value = 'Max';
        formular.box.checked = true;
    }
</script>

Ich kannte das so nicht.
Funktioniert aber in allen von mir getesteten Browsern.
Firefox, Chrome, Opera, Edge und sogar im letzten IE.

Nutze aber nur die alten Bekannten.
getElementById(`t${i}`)
querySelectorAll('input[type=checkbox]')

Gruß Fips
 
Werbung:
mehmet_b_90 schrieb:
Also Fazit ist: mit getElementById() wird von jedem Browser unterstützt. Der Zugriff via Variablennamen, die dem id bzw. name-Attribut, des Elements entspricht, wird nicht unbedingt von jedem Browser unterstützt. Sehe ich das richtig?
Zum Vergrößern anklicken....
Meine erfahrung sagt mir das gleiche.Der Browser der die meisten Probleme macht ist wohl der IE.
Deshalb nutze ich auch immer
Javascript: 
document.getElementById()
, egal wie weit das Element im Dom versteckt ( oder verzweigt ) ist ,man muß sich keine gedanken machen weil so das Element eigentlich immer gefunden wird
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben