Ein Object-Element repräsentiert einen HTML-Tag im DOM. Nachdem ein Element gefunden wurde, kann es mit Methoden und Eigenschaften des Object-Elements angesprochen werden.
Gleichzeitig ist jedes Object-Element auch ein Elementknoten (Node) im HTML-Stammbaum. Diese Elementknoten haben meistens Kindknoten, Elternknoten und Geschwisterknoten
die child, parent und siblings genannt werden. Dem Thema Node habe ich hier in ein eigenes Kapitel gewidmet. siehe:
Nodes
Element-Eigenschaften
Einige Eigenschaften sind bereits vorgestellt worden.
Hier ist eine Liste der oft gebrauchten Eigenschaften:
- Element-Attribut (z.B. element.id)
- element.innerHTML / Inhalt zwischen öffnenden und schließenden Element
- element.textContent / Text zwischen öffnenden und schließenden Element inclusive Kindelemente
- element.tagName / liefert den Tag-Namen (read-only)
- element.isContentEditable / prüft ob ein Element editierbar ist (read-only)
- element.className / liefert oder erzeugt den Namen der Klasse
- element.classList / erzeugt ein DOMTokenList-Object der Klasse
- element.attributes / erzeugt ein NamedNodeMap-Object der Attribute
- element.style / erzeugt ein CSSStyleDeclaration-Object und repräsentiert das style-Attribut
Element-Atribut
Das Beispiel weist dem ersten p-Element im Dokument die ID "myID" zu:
document.getElementsByTagName("P")[0].id = "myID";
Viele Attribute der HTML-Tags stehen als Eigenschaft zur Verfügung (id, lang, style, dir, accesskey, title usw.).
Auch Element spezifische Attribute wie Formularelemte können als Eigenschaft angesprochen werden.
Im Beispiel wird für das erste Element der ersten form-Collection das Attribut value verwendet:
<form action="#">
<input name="myName" type="text" value="Hallo Welt!"><br>
</form>
<button onclick="myFunction()">Klick mich!</button>
<script>
function myFunction() {
var x = document.forms[0];
var y = x.elements[0].value;
alert(y);
}
</script>
textContent und innerHTML
Während innerHTML den gesamten Inhalt eines Elements, inklusive HTML-Tags und Kindelemente liefert oder auch löscht, gibt textContent nur
den Text des Elements bzw. der Kindelemente zurück. Die tagName-Eigenschaft liefert den Elementnamen.
<p id="myID">Adi <em>Prinz</em></p>
<button onclick="myFunction()">Klick mich!</button>
<script>
function myFunction() {
var x = document.getElementById("myID");
var y = x.innerHTML;
var z = x.textContent;
var t = x.tagName;
alert("innerHTML: " + y + " textContent: " + z + " tagName: " + t);
}
</script>
isContentEditable
Ob ein Element editierbar ist kann mit der isContentEditable-Eigenschaft geprüft werden (true oder false).
Das Attribut contentEditable kann true oder false sein, achten sie auf die Schreibweise mit Großbuchstaben dazwischen (Camel Case).
Im Beispiel wird contentEditable deaktiviert.
<div class="myClass" contenteditable="true">Editierbar</div>
<button onclick="myFunction1()">Editierbar prüfen</button><br>
<button onclick="myFunction2()">Editierbar false!</button><br>
<script>
function myFunction1() {
var x = document.getElementsByClassName("myClass")[0];
var y = x.isContentEditable;
alert(y);
}
function myFunction2() {
document.getElementsByClassName("myClass")[0].contentEditable = false;
}
</script>
className
Das class-Attribut nimmt eine Sonderstellung ein. Eine Anweisung wie:
element.class = "MyClass";
wird nich funktionieren. Dafür gibt es die Eigneschaft className.
element.className = "MyClass";
element.className liefert Lese- und Schreibzugriff (set/get) sollte eine Klasse existieren wird sie mit className überschrieben.
<p id="myID" class="myClass">Adi <em>Prinz</em></p>
<button onclick="myFunction()">Klick mich!</button>
<script>
function myFunction() {
var x = document.getElementById("myID").className;
document.getElementById("myID").innerHTML = "Klassenname in diesem Element: " + x;
}
</script>
classList
Die classList-Eigenschaft liefert alle Klassennamen eines Elements und gibt ein DOMTokenList-Object zürück.
Somit gibt es auch dafür die length-Eigenschaft. Mehr über das DOMTokenList-Object erfahren sie im nächsten Kapitel.
<p id="myID" class="firstClass secondClass thirdClass">Adi <em>Prinz</em></p>
<button onclick="myFunction()">Klick mich!</button>
<script>
function myFunction() {
var x = document.getElementById("myID").classList.length;
document.getElementById("myID").innerHTML = "Klassen in diesem Element: " + x;
}
</script>
attributes
Element-Attribute sind auch mit der attributes-Eigenschaft ansprechbar. Dabei wird ein NamedNodeMap-Object generiert, welches alle Attribute eines Elements beinhaltet (Collection).
Somit gibt es auch dafür die length-Eigenschaft und den Index. Mehr über das NamedNodeMap-Object erfahren sie im nächsten Kapitel.
<div id="myID" style="color: blue">
Hallo Welt!
</div>
<button onclick="myFunction()">Klick mich!</button>
<script>
function myFunction() {
var x = document.getElementById("myID").attributes.length;
alert(x);
}
</script>
style
Das sytle-Attribut wurdein diesem Script schon einige Mal verwendet. Auch style generiert ein Objekt mit dem Namen CSSStyleDeclaration.
Somit gibt es auch dafür die length-Eigenschaft. Mehr über das CSSStyleDeclaration-Object erfahren sie im nächsten Kapitel.
<div id="myID" style="color: blue; padding-bottom:30px">
Hallo Welt!
</div>
<button onclick="myFunction()">Klick mich!</button>
<script>
function myFunction() {
var x = document.getElementById("myID").style.length;
alert(x);
}
</script>
Element-Methoden
Nachdem ein Element gefunden ist kann es mit Eigenschaften und Methoden bearbeitet werden. Einige Methoden wurden im Kapitel Document-Object behandelt und stehen auch als
Element-Object zur Verfügung. Im Beispiel wird zuerst das zweite DIV-Element im Dokument gesucht, dann wird das erste P-Element innerhalb des DIV's angesprochen und der innerHTML
geändert.
<div>Hallo Welt!</div>
<div>
<p>Adi Prinz!<p>
<p>Julia Prinz!<p>
<p>Harald Prinz!<p>
</div>
<button onclick="myFunction()">Klick mich!</button>
<script>
function myFunction() {
var x = document.getElementsByTagName("DIV")[1];
x.getElementsByTagName("P")[0].innerHTML = "Hallo Welt!";
}
</script>
Hier finden sie eine Liste der meist gebrauchten Element-Methoden:
- element.getElementsByTagName() / findet Element anhand des Tag-Namen
- element.getElementsByClassName() / findet Element anhand des Klassen-Namen
- element.querySelectorAll() / findet Element anhand des Selektors
- element.querySelector() / findet erstes Element anhand des Selektors
- element.hasAttribute() / prüft ob ein Attribut existiert (true/false)
- element.hasAttributes() / prüft ob irgendein Attribut existiert (true/false)
- element.setAttribute() / setzt ein neues Attribut
- element.getAttribute() / liefert den Attributwert
- element.removeAttribute() / löscht ein Attribut
- element.contains() / prüft ob ein Element existiert (true/false)
hasAttribute() und hasAttributes()
Ob ein Element Attribute besitzt kann geprüft werden. Mit der hasAttribute-Methode wird explizit geprüft, ob ein Attribut existiert.
hasAttributes prüft ein Element, ob es irgendein Attribut gibt.
<p id="myID">Hallo Welt!</p>
<button id="myBtn" onclick="myFunction()">Klick mich!</button>
<script>
function myFunction() {
var x = document.getElementById("myBtn").hasAttribute("onclick");
var y = document.body.hasAttributes();
var z = document.getElementById("myID");
z.innerHTML = "x = " + x + " und " + "y = " + y; // true und false
}
</script>
setAttribute()
Mit der setAttribute-Methode können einem Element Attribute und Attributwerte zugewiesen werden. Die setAttribute-Methode hat zwei Parameter,
zuerst der Attributname und der Attributwert als zweites Argument.
<style>
.myClass {
color: red;
font-size:1.8em;
padding-bottom:20px;
}
</style>
<h1>Headline</h1>
<button onclick="myFunction()">Klick mich!</button>
<script>
function myFunction() {
var x = document.getElementsByTagName("H1")[0];
x.setAttribute("class", "myClass");
}
</script>
Wenn setAttribute ein class-Attribut generiert kann als zweites Argument der Name der Klasse, oder das Style direkt geschrieben werden, wie das Beispiel zeigt.
Dasselbe wird auch mit dem CSSStyleDeclaration-Object erreicht.
x.setAttribute("style", "color: red; font-size:1.8em; padding-bottom:20px;");
// oder
x.style.color = "red";
x.style.font-size:1.8em;
x.style.padding-bottom:20px;
getAttribute() und removeAttribute()
Die getAttribute-Methode liefert den Attributwert eines Attributs, mit removeAttribute können Attribute aus dem HTML entfernt werden.
<style>
.firstClass {
font-size:1.8em;
padding-bottom:20px;
}
.secondClass {
color: red;
}
</style>
<h1 class="firstClass secondClass">Headline</h1>
<button onclick="myFunction1()">Zeige Class Attribut!</button><br>
<button onclick="myFunction2()">Entferne Class Attribut!</button><br>
<script>
function myFunction1() {
var x = document.getElementsByTagName("H1")[0].getAttribute("class");
alert(x);
}
function myFunction2() {
document.getElementsByTagName("H1")[0].removeAttribute("class");
}
</script>
contains()
Für die contains-Methode müssen sie mindestens zwei Elemente ansprechen können.
contains prüft dann, ob ein Element in einem anderen vorkommt und liefert true oder false.
<p id="myP">Adi <em id="myEM">Prinz</em></p>
<button id="myBtn" onclick="myFunction()">Klick mich!</button>
<script>
function myFunction() {
var em = document.getElementById("myEM");
var p = document.getElementById("myP").contains(em);
alert(p);
}
</script>
