The DOM
Understanding the Document Object Model is fundamental for FrontEnd development
What is the DOM?
The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content.
DOM Tree Structure
The DOM represents a document as a tree structure where each node is an object representing a part of the document. The DOM tree starts with the document object at the root, followed by the html element, and then head and body elements.
Accessing DOM Elements
JavaScript provides multiple ways to access and manipulate DOM elements:
document.getElementById()- Select by element IDdocument.querySelector()- Select using CSS selectorsdocument.querySelectorAll()- Select all matching elementsdocument.createElement()- Create new elements
Manipulating the DOM
Once you have selected an element, you can modify its content, attributes, styles, and structure. Common operations include changing text content, adding or removing classes, and appending or removing child elements.
Events and the DOM
The DOM allows you to listen for and respond to user interactions through events. You can attach event listeners to elements to handle clicks, keyboard input, mouse movements, and many other interactions.