About DOM in JavaScript and basic interview questions

#javascript

DOM in JavaScript
The DOM (Document Object Model) is a programming interface that represents an HTML document as a tree structure. JavaScript uses it to access, modify, and manipulate web page content dynamically.

Think of it like this:

HTML → structure
DOM → tree representation of that structure
JavaScript → interacts with the DOM

Core DOM Concepts (Important Topics)

Selecting elements
(getElementById, querySelector)
Changing content
(innerHTML, textContent)
Modifying styles
(element.style)
Creating & deleting elements
(createElement, appendChild, remove)
Event handling
(addEventListener)
Traversing the DOM
(parent, child, sibling nodes)

DOM TREE

Basic interview questions

1. What is the DOM?
A tree-like representation of HTML that allows JavaScript to manipulate elements.

2. Difference between innerHTML and textContent?
- innerHTML → parses HTML tags
- textContent → only handles plain text

3.How do you select an element?
document.getElementById("id");
document.querySelector(".class");

4.Root Node
The top of the tree → document

5.Why does this fail?
document.getElementById("btn").addEventListener("click", fn);

6.What is a DOM tree?
A hierarchical structure where HTML elements are represented as nodes (parent, child, siblings).

7.What is the difference between parent, child, and sibling nodes?

Parent → contains other nodes
Child → inside a parent
Sibling → same parent

8.What is event delegation?
Handling events at a parent level instead of adding listeners to each child.

9.Difference between DOM and BOM?
The DOM represents the web page content, while the Browser Object Model (BOM) represents the browser environment outside the page, such as the window, history, and navigator objects.

10.What are the three types of DOM?