DOM Manipulation

Definition

The Document Object Model (DOM) is an API that represents the HTML document as a tree of nodes. DOM Manipulation is using JavaScript to add, remove, or change these nodes.

Explain Like I'm New

The HTML file is the architect's blueprint. The DOM is the actual physical house that was built in the browser. JavaScript is the remodeling crew; it can knock down walls (`remove()`), paint the house (`style.color`), or build an extension (`appendChild()`) while you are still living in it.

Real World Example

Creating a new `<li>` element, adding text to it, and appending it to a `<ul>` when a user clicks 'Add Item'.

Common Use Cases

•Vanilla JS applications
•Creating dynamic UI elements

Interactive Example

Console output will appear here...

Interview Questions

basic

What is the difference between `getElementById` and `querySelector`?

intermediate

Why is direct DOM manipulation considered 'expensive' or slow?

advanced

What is a DocumentFragment and how does it improve performance?

Flash Cards

Question

Why is it expensive?

Click to reveal answer

Answer

Because every time you change the DOM (like altering width or adding an element), you risk triggering a 'Reflow' and 'Repaint'. The browser has to recalculate the exact pixel coordinates of every element on the page, which requires massive CPU power.

Question

What is a DocumentFragment?

Click to reveal answer

Answer

It is an invisible, lightweight container. If you need to add 100 items to a list, adding them one by one triggers 100 DOM re-renders. Instead, you append all 100 to a DocumentFragment in memory, and then append the Fragment to the DOM once. This triggers only 1 re-render.