DOM-Manipulation (EN)

DOM-Manipulation

You perform DOM manipulation to dynamically change the content, structure, or styles of a webpage at runtime. The Document Object Model (DOM) represents a tree structure that maps the HTML elements of a page, and JavaScript allows you to access and modify this structure. Through methods like getElementById, querySelector, or createElement, you can access elements and change their properties such as contentText, style, or className. DOM manipulation is the foundation for interactive web applications where content is updated without page reloads, such as in dynamic forms, AJAX applications, or interactive user interfaces.

DOM Tree Structure

flowchart TD   A[HTML] --> B[Head]   A --> C[Body]   B --> D[Title]   B --> E[Meta]   C --> F[Header]   C --> G[Main]   C --> H[Footer]   G --> I[Section]   G --> J[Article] 

In Context

• Typically used together with event handlers
• Related to: AJAX, Single-Page Applications, React, Vue.js
• Example use: Dynamically adding list items without page reload