JavaScript: Dokument ändern
JavaScript ermöglicht es uns, HTML-Dokumente dynamisch zu manipulieren, wodurch Interaktivität und Funktionalität verbessert werden. In diesem Artikel gehen wir auf die grundlegenden Methoden und Techniken zur Änderung von Dokumenten mit JavaScript ein und bieten detaillierte Codebeispiele, um Ihnen zu helfen, diese essentielle Fähigkeit zu meistern.
DOM-Manipulation verstehen
Elemente erstellen
Eine der grundlegenden Operationen bei der DOM-Manipulation ist das Erstellen neuer Elemente. Dies geschieht mit der Methode document.createElement(tag). So können Sie ein neues div-Element erstellen:
<body></body>
<script>
let div = document.createElement('div');
div.innerHTML = "Hello, world!";
document.body.appendChild(div);
</script>Text zu Elementen hinzufügen
Um einem Element Text hinzuzufügen, verwenden Sie die Methode document.createTextNode(text). Diese Methode ist besonders nützlich, wenn Sie Text anhängen möchten, der nicht als HTML interpretiert werden soll:
<body>
<div id="container"></div>
</body>
<script>
const div = document.getElementById("container");
let textNode = document.createTextNode('Here is some text');
div.appendChild(textNode);
</script>Elemente ändern
Attribute ändern
Um ein Attribut eines Elements zu ändern, können Sie element.setAttribute(name, value) verwenden. Diese Methode ermöglicht es Ihnen, den Wert eines Attributs auf dem angegebenen Element festzulegen.
<body>
<div id="firstID"></div>
<div>new id is: <span id="result"></span></div>
</body>
<script>
const div = document.getElementById("firstID");
const result = document.getElementById("result");
div.setAttribute("id", "newDiv");
result.innerHTML = div.id;
</script>Erweiterte Manipulationen
Elemente klonen
Sie können eine Kopie eines Elements erstellen, indem Sie die Methode element.cloneNode(deep) verwenden. Wenn Sie deep auf true setzen, wird das Element zusammen mit seinen Nachfolgern geklont.
<body>
<div id="mydiv">one div here, or two divs if cloned! <span>And here is a span inside the div!</span></div>
</body>
<script>
const div = document.getElementById("mydiv");
const clone = div.cloneNode(true);
document.body.appendChild(clone);
</script>Elemente entfernen
Um ein Element aus dem DOM zu entfernen, können Sie element.remove() verwenden.
<body>
<div>It's the only thing you see, as the next div is removed!</div>
<div id="mydiv">you don't see me if I'm removed!</div>
</body>
<script>
const div = document.getElementById("mydiv");
div.remove();
</script>Praxisbeispiel: Eine To-Do-Liste erstellen
Wenden wir diese Konzepte an, um eine einfache To-Do-Liste mit JavaScript zu erstellen:
<body></body>
<script>
// Creating the list container
let list = document.createElement('ul');
document.body.appendChild(list);
// Adding items to the list
function addItem(text) {
let item = document.createElement('li');
item.textContent = text;
list.appendChild(item);
}
addItem('Learn JavaScript');
addItem('Build a to-do list');
</script>Fazit
Die Beherrschung der Dokumentenänderung in JavaScript eröffnet eine Welt voller Möglichkeiten für die Erstellung dynamischer und interaktiver Webanwendungen. Die hier beschriebenen Methoden sind nur der Anfang dessen, was Sie mit der DOM-Manipulation erreichen können. Üben Sie diese Techniken, experimentieren Sie mit neuen Ideen und erkunden Sie weiterhin die leistungsstarken Möglichkeiten von JavaScript.
Praxis
Welche Methode kann in JavaScript verwendet werden, um ein Attribut eines Elements zu ändern?