The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can interact with the page.
DOM nodes are the building blocks of the DOM. They are the individual elements that make up the structure of a web page. Each node represents an element, attribute, or text in the HTML document. Nodes can be accessed and manipulated using JavaScript.
There are several types of DOM nodes:
Here are some examples of how to access and manipulate DOM nodes using JavaScript:
// Get the element with the ID "myElement"
var element = document.getElementById("myElement");
// Change the text of the element
element.innerHTML = "New text";
// Get the value of an attribute
var value = element.getAttribute("myAttribute");
// Set the value of an attribute
element.setAttribute("myAttribute", "new value");
DOM nodes can also be created and added to the document using JavaScript:
// Create a new element
var newElement = document.createElement("div");
// Add text to the element
var textNode = document.createTextNode("New element");
newElement.appendChild(textNode);
// Add the element to the document
document.body.appendChild(newElement);
Overall, DOM nodes are an essential part of web development. They allow developers to access and manipulate the structure and content of a web page, making it possible to create dynamic and interactive websites.