forked from WEB-IMB-WS2526/lab-development-imb
46 lines
1.1 KiB
HTML
46 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Node-Typen und Manipulation</title>
|
|
</head>
|
|
|
|
<body>
|
|
<h1 id="headline" dummy="erika">Hallo Welt</h1>
|
|
<h2 id="title">...</h2>
|
|
<ul id="list">
|
|
<li>Eintrag 1</li>
|
|
</ul>
|
|
|
|
<script>
|
|
// Document (Wurzel)
|
|
console.log(document.nodeName); // "#document"
|
|
|
|
// Element (HTML-Tag)
|
|
const headline = document.getElementById("headline");
|
|
|
|
// Attribute
|
|
console.log(headline.getAttribute("dummy"));
|
|
const attrNode = headline.getAttributeNode("id");
|
|
console.log(attrNode.nodeName);
|
|
console.log(attrNode.nodeValue);
|
|
|
|
// Text (Inhalt)
|
|
const textNode = headline.firstChild;
|
|
console.log(textNode.nodeValue);
|
|
|
|
// Select: Element (HTML-Tag)
|
|
const title = document.getElementById("title");
|
|
// Modify: Inhalt ändern
|
|
title.textContent = "Willkommen im DOM!";
|
|
|
|
// Create: Neues Element erzeugen und einfügen
|
|
const list = document.getElementById("list")
|
|
const newItem = document.createElement("li");
|
|
newItem.textContent = "Eintrag 2";
|
|
list.appendChild(newItem);
|
|
</script>
|
|
</body>
|
|
|
|
</html> |