DOM Manipulation Basics

DOM Manipulation

What is the DOM?

• The Document Object Model (DOM) is a programming interface for HTML and XML documents
• It represents the structure of a document as a tree of nodes, allowing developers to interact with and manipulate the document

DOM Elements

• A DOM element is an object that represents an HTML element in the document
• Each element has properties and methods that can be used to manipulate it

Creating Elements

• The document.createElement() method creates a new DOM element
• Example: const newDiv = document.createElement('div');

Adding Elements

• The appendChild() method adds a new element to the end of an existing element
• The insertBefore() method inserts a new element before a specified element
• Example: const parent = document.getElementById('parent'); parent.appendChild(newDiv);

Removing Elements

• The removeChild() method removes a child element from a parent element
• The innerHTML property can be set to an empty string to remove all child elements
• Example: const parent = document.getElementById('parent'); parent.removeChild(parent.firstElementChild);

Modifying Element Properties

• Element properties can be modified using JavaScript, such as textContent, innerHTML, className, and style
• Example: const heading = document.getElementById('heading'); heading.textContent = 'New Heading';

Traversing the DOM

• The DOM can be traversed using methods such as parentNode, childNodes, firstChild, and nextSibling
• Example: const parent = document.getElementById('parent'); const child = parent.childNodes[0];

Events and Listeners

• Events are triggered by user interactions, such as clicks and key presses
• Event listeners can be added to elements to respond to events
• Example: const button = document.getElementById('button'); button.addEventListener('click', function() { console.log('Button clicked!'); });

What is the DOM?

• The Document Object Model (DOM) is a programming interface for HTML and XML documents
• It represents the structure of a document as a tree of nodes, allowing developers to interact with and manipulate the document

DOM Elements

• A DOM element is an object that represents an HTML element in the document
• Each element has properties and methods that can be used to manipulate it

Creating and Adding Elements

• The document.createElement() method creates a new DOM element
• The appendChild() method adds a new element to the end of an existing element
• The insertBefore() method inserts a new element before a specified element

Removing Elements

• The removeChild() method removes a child element from a parent element
• The innerHTML property can be set to an empty string to remove all child elements

Modifying Element Properties

• Element properties can be modified using JavaScript, such as textContent, innerHTML, className, and style
• The textContent property sets or retrieves the text content of an element
• The innerHTML property sets or retrieves the HTML content of an element
• The className property sets or retrieves the class of an element
• The style property sets or retrieves the style of an element

Traversing the DOM

• The DOM can be traversed using methods such as parentNode, childNodes, firstChild, and nextSibling
• The parentNode property returns the parent element of an element
• The childNodes property returns a collection of child elements of an element
• The firstChild property returns the first child element of an element
• The nextSibling property returns the next sibling element of an element

Events and Listeners

• Events are triggered by user interactions, such as clicks and key presses
• Event listeners can be added to elements to respond to events
• The addEventListener() method attaches an event listener to an element

Learn the fundamentals of the Document Object Model, including DOM elements and creating elements. Understand how to interact with and manipulate HTML documents.