Javascript - Klasse ändern

[Ingrid]

Hallo allerseits!

Es ist schon recht lange her, dass ich nichts mehr von mir habe hören lassen. Es hat bei uns eine Reihe gesundheitlicher Probleme in der Familie gegeben. Deswegen hatte ich anderes im Kopf, als mich bei euch für eure Antworten zu bedanken. Das möchte ich hiermit nachholen. Und ich bitte vielmals um Entschuldigung.

Damit Ihr nicht gezwungen seid, mein Profil nachzuschlagen, hier noch einmal eine Kurzvorstellung: Ich bin keine professionelle Entwicklerin, sondern bin im Bildungsbereich tätig. Mit HTML/CSS stelle ich mir unter anderem Dias her (als Alternative zu Powerpoint). Derzeit versuche ich, in Javascript einzusteigen. Das Ganze geht langsam vor sich, da ich überwiegend Autodidaktin bin. Hilfe vor Ort bekomme nur sporadisch und nur für einzelne meiner Programmierprobleme.

So jetzt meine ersten Fragen (für die anderen Fragen werde ich gesonderte Posts abschicken):

Auf eurer Seite https://wiki.selfhtml.org/wiki/JavaScript/DOM/Document/getElementById habt ihr ein Beispiel vorgestellt, bei dem es an einer Stelle heißt:

<button data-attribut="hinweis">Hinweis</button>

Und an einer weiteren Stelle:

function ändereKlasse(event) {[...]
    name = button.getAttribute('data-attribut'),[...]
  }

Kann man den Ausdruck "data-attribut" durch andere Ausdrücke ersetzen? Durch welche? Ganz frei gewählt? Oder nur durch bestimmte? Oder ist "data-attribut" ein festgelegter Ausdruck, den man gar nicht ersetzen kann?

(Um genau zu sein: Ich habe versucht, den Ausdruck zu ersetzen, und das hat in dem entsprechenden Beispiel funktioniert. Aber ich bin mir nicht sicher, ob das nur zufällig funktioniert hat und in Wirklichkeit schlechter Code ist, der in anderen Zusammenhängen nicht funktionieren würde.)

Falls man "data-attribut" nicht ersetzen kann: Wie kann man vorgehen, wenn man in einer Datei zwei voneinander völlig unabhängige Klassenänderungen durchführen will?

Vielen Dank im Voraus!

Ingrid

[Auge]

Hallo

Auf eurer Seite https://wiki.selfhtml.org/wiki/JavaScript/DOM/Document/getElementById habt ihr ein Beispiel vorgestellt, bei dem es an einer Stelle heißt:

<button data-attribut="hinweis">Hinweis</button>

Und an einer weiteren Stelle:

function ändereKlasse(event) {[...]
    name = button.getAttribute('data-attribut'),[...]
  }

Kann man den Ausdruck "data-attribut" durch andere Ausdrücke ersetzen?

Ja.

Durch welche?

Solche, die mit data- beginnen oder durch ein „offizielles“ HTML-Attribut.

Ganz frei gewählt?

Nein nicht „ganz frei“, sondern innerhalb der oben skizzierten Grenzen.

Oder ist "data-attribut" ein festgelegter Ausdruck, den man gar nicht ersetzen kann?

Früher gab es nur die Attribute, die die Sprache HTML von sich aus bereitstellte. Mittlerweile wurde die Möglichkeit geschaffen, in HTML eigene Attribute einzufügen. Voraussetzung ist, dass ihre Namen mit data- beginnen.

Da getAttribute schlicht ein beliebiges Attribut anspricht, dessen Name innerhalb des Klammerpaares angegeben wird, kannst du irgendein, ein den Regeln von HTML entsprechendes, Attribut benennen, auf das zu zugreifen willst.

(Um genau zu sein: Ich habe versucht, den Ausdruck zu ersetzen, und das hat in dem entsprechenden Beispiel funktioniert. Aber ich bin mir nicht sicher, ob das nur zufällig funktioniert hat und in Wirklichkeit schlechter Code ist, der in anderen Zusammenhängen nicht funktionieren würde.)

Wie gesagt, solange das Attribut den zugrundeliegenden regeln entspricht, kannst du es auch in getAttribute verwenden.

Falls man "data-attribut" nicht ersetzen kann: Wie kann man vorgehen, wenn man in einer Datei zwei voneinander völlig unabhängige Klassenänderungen durchführen will?

Um speziell Klassen einzufügen oder zu entfernen, kannst du classList verwenden. Das ist noch etwas einfacher zu benutzen.

Tschö, Auge

[Rolf B]

Hallo Ingrid,

das Beispiel im Wiki war ziemlich antik. Ich habe es etwas modernisiert. Ob es sich als Beispiel für eine elementare Methode wie getElementById eignet, mag diskussionsfähig sein. Ich finde es dafür zu kompliziert. Aber egal.

Was data-Attribute sind, hat Auge bereits erklärt. Im Beispiel veraltet war aber der Zugriff mit getAttribute. Jedes HTML Element hat eine Eigenschaft dataset, die die Werte der data-Attribute bereitstellt. Die Schreibweise der Attributnamen wird dabei leicht modifziert; ein data-Attribut wie data-aussehen-klasse würde sich als dataset.aussehenKlasse wiederfinden.

Über die dataset-Eigenschaft könnte man auch den Inhalt eines data-Attributs verändern. elem.dataset.aussehen = "grün" würde den Wert des Attributs data-aussehen auf grün setzen.

Veraltet war auch die Variablendeklaration mit var. Wenn man einen Wert speichert, ohne ihn nochmal überschreiben zu müssen, tut man das heute mit const. Alternativ gibt es let für veränderbare Werte.

Mit dem Funktionsnamen ändereKlasse war ich auch nicht glücklich. Funktionen sollten möglichst nach dem fachlichen Sachverhalt benannt sein, nicht nach dem technischen Vorgehen. Genauso unglücklich fand ich den Namen des data-Attributs. Im Beispiel wird damit ein Aussehen festgelegt. Also sollte es auch so heißen: data-aussehen. Der Name data-aussehen-klasse könnte noch besser sein, aber manchmal kann man es mit der Lesbarkeit auch übertreiben 😉

Ich hoffe, keinen dummen Flüchtigkeitsfehler eingebaut zu haben. Das Beispiel im Frickl (klick auf "ausprobieren") funktioniert auf jeden Fall.

Rolf

[Ingrid]

Danke vielmals. Mir wird einiges klarer.

Eines habe ich jedoch nicht ganz verstanden:

` Im Beispiel veraltet war aber der Zugriff mit getAttribute. `

Muss man dann nur "data-attribut" (oder einen eigenen erfundenen Namen) durch "dataset.attribut" ersetzen, oder muss in der Funktion noch mehr verändert werden?

Ingrid

[Samuel fiedler]

Hallo Ingrid!

Nicht ganz. Du kannst schreiben:

button.dataset.attributname = "attributinhalt";

Natürlich nur, wenn die Variable "button" vorher definiert wurde und diese auch ein ausgewähltes HTML-Element ist.

Au revoir,
Samuel Fiedler

[Gunnar Bittersmann]

@@Rolf B

das Beispiel im Wiki war ziemlich antik.

Wie auch die Methode getElementById(). Mit querySelector() steht ein einheitliches Interface zur Verfügung, sodass man getElementById() eigentlich nicht mehr braucht. Das sollte zumindest erwäht werden.

Ob es sich als Beispiel für eine elementare Methode wie getElementById eignet, mag diskussionsfähig sein. Ich finde es dafür zu kompliziert.

Ja. Es ist ein Beispiel für alles mögliche. Das Eigentliche – die Selektion des Elements anhand der ID – geht dabei unter.

IMHO ist

const aussehenKlasse = geklickterButton.dataset.aussehen;

unnötig. Ich würde das entfernen und

unentschlossenesElement.className = geklickterButton.dataset.aussehen;

schreiben. Das verbessert die Verständlichkeit des Codes.

🖖 Живіть довго і процвітайте

[Tabellenkalk]

Hallo,

Ich würde […]

unentschlossenesElement.className = geklickterButton.dataset.aussehen;

schreiben. Das verbessert die Verständlichkeit des Codes.

Findest du das wirklich verständlich? Ich rätsel was du mit unentschlossen in Bezug auf ein Element meinst…

Edith möchte noch wissen, für welche Optionen sich irgendein Element denn entschließen kann...

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

Ich würde […]

unentschlossenesElement.className = geklickterButton.dataset.aussehen;

schreiben. Das verbessert die Verständlichkeit des Codes.

Findest du das wirklich verständlich? Ich rätsel was du mit unentschlossen in Bezug auf ein Element meinst…

Mir ging’s da eher um den Teil nach dem Gleichheitszeichen.

Aber ja, der Variablenbezeichner ist auch nicht gerade günstig gewählt.

Edith möchte noch wissen, für welche Optionen sich irgendein Element denn entschließen kann...

Sag ihr: für einen der drei Buttons („Hinweis“, „Empfehlung“, „noch mal anders“).

Und dann habt ihr mit dem Ziegenproblem genug Gesprächsstoff für den Rest des Tages. 🐐

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar,

Aber ja, der Variablenbezeichner ist auch nicht gerade günstig gewählt.

ich bin einfach bei dem Urspungsbeispiel geblieben. Da ist ein Element mit id="unentschlossen" und die Variable nimmt darauf Bezug. Das schien mir eigentlich gut nachvollziehbar.

Tabellenkalks Frage nach den Optionen fand ich merkwürdig. Wenn ich mir nur das Script anschaue, verstehe ich natürlich nicht alles. HTML und Script gehören zusammen, und dann sollte eigentlich klar sein, was passiert.

Einem Anfänger vielleicht nicht, ok.

Ist es sinnvoll, Codebeispiele für eine bestimmte Menge an Sprachelementen einmal zentral zu präsentieren und bei den jeweiligen Sprachelementen einfach darauf zu verweisen? Ich sehe ja durchaus ein, dass das Beispiel für getElementById überdimensioniert ist.

Dass getElementById obsolet ist, sehe ich nicht unbedingt so. Sicher, querySelector ist (a) einheitlicher und (b) auch auf Element-Ebene verfügar, und damit flexibler. Aber es gibt die alte Methode eben noch, und ihre Existenz zu verschweigen ist auch nicht richtig. Man kann sicherlich bei getElementById einen Vermerk machen. Ich mache mir dann nur Gedanken um den Umfang des Artikels. Das ist eine Simpel-Methode. Ist es lehrreich, deren Beschreibung mit Abhandlungen diverser Art vollzupacken? Ich muss mir diesen Bereich noch mal in Ruhe anschauen… Aber im Urlaub hat man keine Ruhe dafür, dann meutert die Urlaubsbegleitung 😉

Rolf

[Gunnar Bittersmann]

@@Rolf B

Aber ja, der Variablenbezeichner ist auch nicht gerade günstig gewählt.

ich bin einfach bei dem Urspungsbeispiel geblieben. Da ist ein Element mit id="unentschlossen" und die Variable nimmt darauf Bezug. Das schien mir eigentlich gut nachvollziehbar.

Ja, das ist nachvollziehbar. Schon der Bezeichner der ID ist nicht günstig gewählt.

Ich sehe ja durchaus ein, dass das Beispiel für getElementById überdimensioniert ist.

Vielleicht einfach ein Beispiel, wofür das Selektieren anhand ID oft verwendet wird: um einem Button eine Aktion zuzuweisen? Sowas wie

const menuButton = document.getElementById('menu-button');
menuButton.addEventListener('click', () => {
  menuButton.setAttribute(
    'aria-expanded',
    menuButton.getAttribute('aria-expanded') == 'true' ? 'false' : 'true'
  );
});

(Das ARIA-Attribut sollte an der Stelle nicht beschrieben werden. Aber eine Verlinkung tut gut.)

Dass getElementById obsolet ist, sehe ich nicht unbedingt so. Sicher, querySelector ist (a) einheitlicher und (b) auch auf Element-Ebene verfügar, und damit flexibler. Aber es gibt die alte Methode eben noch, und ihre Existenz zu verschweigen ist auch nicht richtig.

Natürlich nicht.

Man kann sicherlich bei getElementById einen Vermerk machen.

Ja, einfach ein Satz wie „Statt document.getElementById('bezeichner') kann man auch document.querySelector('#bezeichner') verwenden“.

(Bzw. „Statt document.getElementById(ausdruck) kann man auch document.querySelector(`#${ausdruck}`) verwenden“.

🖖 Живіть довго і процвітайте