DOM Element Eigenschaften auslesen/ändern

Inhalt des HTML Elements

Eigenschaft	Beschreibung
.textContent	speichert den Textinhalt eines Knoten (und seiner Kinder) als String
.innerHTML	speichert den HTML Code eines Knoten als String
.value	bei input Elementen (siehe Attribute)

Hinweis: innerHTML nur zum Auslesen, nicht zum Ändern verwenden wegen Sicherheitsrisiko und Verlust von Event Listenern (nächste Stunde)

Eigenschaften eines DOM Elements

Alle Standardattribute (von HTML Definition vorgegeben) werden als Objekten Eigenschaften gespeichert
Zugriff über Punktnotation (wie in Java, nur hier alles public)
Beispiele:
- alle Elemente: id, className
- Links: href, title
- Bilder, Multimedia: src, title
- Input: type, name, value
class Attribut über
- className = "class1 class2"
- classList = ["class1", "class2"] (Arrays in JavaScript haben keine feste Größe und können über Methoden manipuliert werden)
alle Attribute als NamedNodeMap abrufen über .attributes

HTML<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <title>Titel der Seite</title>
  </head>
  <body>
    <div class="test">
      <p>Text im Browserfenster</p>
      <input type="text" value="hier steht schon was" />
    </div>
    <img
      src="https://uhahne.github.io/GIS/smiley.png"
      alt="lachender Smiley"
      title="ein Bild"
    />
  </body>
</html>

JavaScriptlet body = document.body;
//foreach Schleife
for (let child of body.children) {
  console.log(child);
  console.log(child.attributes);
  console.log(child.textContent);
}

Unterschied Objekt Eigenschaften und HTML Attribute

die DOM Objekt Eigenschaften sind die ins DOM Objekt überführten HTML Attribute
HTML Attribut und DOM Objekt Eigenschaft haben meistens den gleichen Wert
auf HTML Attribute kann explizit mit getAttribute(name) und setAttribute(name, value)^{ⓘAlternativ mit document.createAttribute(attributName) ein neues Attr Objekt anlegen und mit setAttributeNode(attrObject) in den DOM einbinden.↩} zugegriffen werden