Tag-Attribute als Eigenschaften in JavaScript

Lassen Sie uns nun lernen, wie man Attribute von Tags abruft. Hier gilt die folgende Regel: jedem Attribut eines Tags entspricht eine gleichnamige Eigenschaft des DOM-Elements.

Schauen wir uns ein Beispiel an. Nehmen wir an, wir haben folgenden Tag:

<input id="elem" type="text">

Holen wir uns einen Verweis auf unser Element in eine Variable:

let elem = document.querySelector('#elem');

Geben wir die Werte der benötigten Attribute aus:

console.log(elem.id);   // gibt 'elem' aus
console.log(elem.type); // gibt 'text' aus

Ändern wir nun beispielhaft den Wert eines Attributs:

elem.type = 'submit';

Gegeben ist die folgende Eingabe:

<input id="elem" type="email">

Ebenso ist ein Button gegeben. Beim Klick auf den Button geben Sie den Inhalt des Attributs type der obigen Eingabe auf dem Bildschirm aus.

Gegeben ist die folgende Eingabe:

<input id="elem" type="email">

Ebenso ist ein Button gegeben. Beim Klick auf den Button schreiben Sie in das Attribut type den Wert submit.

Nehmen wir an, Sie haben einen Link in Form eines a-Tags, einen Button und einen Absatz. Beim Klick auf den Button geben Sie im Absatz den Inhalt des Attributs href des Links aus.

Nehmen wir an, Sie haben einen Link und einen Button. Beim Klick auf den Button fügen Sie am Ende des Linktextes den Inhalt seines Attributs href in runden Klammern hinzu.

Nehmen wir an, Sie haben ein Bild. Platzieren Sie es auf der Seite mit dem img-Tag. Nehmen wir an, es sind auch ein Button und ein Absatz gegeben. Sorgen Sie dafür, dass beim Klick auf den Button in den Absatz der Pfad zum Bild aus seinem Attribut src geschrieben wird.

Gegeben ist ein Bild im img-Tag und ein Button. Beim Klick auf den Button schreiben Sie in das Attribut width den Wert 300.

Gegeben ist ein Bild im img-Tag und ein Button. Nehmen wir an, im Attribut width ist eine bestimmte Breite gesetzt. Erstellen Sie einen Button, bei dessen Betätigung die Breite des Bildes um das 2-fache vergrößert wird.

Nehmen wir an, Sie haben zwei Bilder. Erstellen Sie auf der Seite einen img-Tag und zwei Buttons. Beim Klick auf den ersten Button schreiben Sie in das Attribut src den Pfad zum ersten Bild, und beim Klick auf den zweiten - den Pfad zum zweiten Bild.