The Document Object Model is a programming interface for web documents that allows web pages to be dynamically updated and changed. JavaScript is a powerful tool for manipulating the DOM, making it possible to create interactive and engaging websites.
The DOM is a hierarchical tree-like structure that represents the elements and content of a web page. Every element on a web page is represented by a node in the DOM tree. JavaScript allows you to access and manipulate these nodes, making it possible to dynamically update the content and structure of a web page.
Accessing DOM Nodes
To access a node in the DOM, you need to use the document object. The document object represents the entire HTML document and provides methods for accessing the nodes in the DOM.
For example, to access an element with a specific ID, you can use the getElementById() method:
const element = document.getElementById('myElement');
This will return a reference to the element with the ID “myElement”.
You can also use other methods like getElementsByClassName(), getElementsByTagName(), and querySelector() to access elements in the document object model based on other criteria.
Manipulating Nodes
Once you have a reference to a node in the DOM, you can manipulate it using JavaScript. For example, you can change the text content of an element like this:
const element = document.getElementById('myElement');
element.textContent = 'New text content';
This will change the text content of the element with the ID “myElement” to “New text content”.
You can also add, remove, or modify attributes of an element using JavaScript. For example, to add a new class to an element, you can do this:
const element = document.getElementById('myElement');
element.classList.add('newClass');This will add the class “newClass” to the element with the ID “myElement”.
Creating New Nodes
JavaScript also allows you to create new nodes in the DOM dynamically. To create a new element, you can use the createElement() method:
const newElement = document.createElement('div');
This will create a new div element.
You can then modify the properties and attributes of the new element as needed, and add it to the DOM using the appendChild() method:
const parentElement = document.getElementById('parentElement');
parentElement.appendChild(newElement);This will add the new element as a child of the parentElement.
