DOM Manipulation
DOM (Document Object Model) manipulation refers to the ability to interact with the HTML elements on a web page using JavaScript. By manipulating the DOM, you can dynamically change the structure, content, and styles of a web page.
In JavaScript, the global document object represents the DOM of the current web page. You can use various properties and methods of the document object to interact with the web page.
Here's an example of how to manipulate the DOM:
JAVASCRIPT
1const myElement = document.getElementById('myElement');
2
3// Manipulating the text content
4myElement.textContent = 'Hello, Algo Daily!';
5
6// Adding a CSS class
7myElement.classList.add('highlight');
8
9// Manipulating an attribute
10myElement.setAttribute('data-info', 'Some information');
11
12// Creating new elements
13const newElement = document.createElement('div');
14newElement.textContent = 'New element';
15
16// Appending the new element
17myElement.appendChild(newElement);xxxxxxxxxx17
const myElement = document.getElementById('myElement');// Manipulating the text contentmyElement.textContent = 'Hello, Algo Daily!';// Adding a CSS classmyElement.classList.add('highlight');// Manipulating an attributemyElement.setAttribute('data-info', 'Some information');// Creating new elementsconst newElement = document.createElement('div');newElement.textContent = 'New element';// Appending the new elementmyElement.appendChild(newElement);OUTPUT
:001 > Cmd/Ctrl-Enter to run, Cmd/Ctrl-/ to comment