In JavaScript, the Document Object Model (DOM) represents the structure of an HTML document. It provides a structured representation of the document as a tree, where each node corresponds to an object representing a part of the document. The document object is the top-level object in the DOM hierarchy, and it represents the entire HTML document.
Properties
document.body: Represents the<body>element of the document.document.head: Represents the<head>element of the document.document.title: Gets or sets the title of the document.document.URL: Returns the URL of the document.document.domain: Returns the domain of the document’s URL.
Methods
document.getElementById(id): Returns a reference to the element with the specified ID.document.getElementsByClassName(className): Returns a collection of elements with the specified class name.document.getElementsByTagName(tagName): Returns a collection of elements with the specified tag name.document.querySelector(selector): Returns the first element that matches the specified CSS selector.document.querySelectorAll(selector): Returns a NodeList containing all elements that match the specified CSS selector.document.createElement(tagName): Creates a new HTML element with the specified tag name.document.createTextNode(text): Creates a new text node with the specified text.
Example Usage
// Accessing elements by ID
const elementById = document.getElementById("myElementId");
// Accessing elements by class name
const elementsByClass = document.getElementsByClassName("myClassName");
// Accessing elements by tag name
const elementsByTag = document.getElementsByTagName("div");
// Accessing elements using CSS selectors
const elementBySelector = document.querySelector("#myElementId .myClassName");
// Creating new elements
const newElement = document.createElement("div");
newElement.textContent = "This is a new element";
// Appending the new element to the document body
document.body.appendChild(newElement);
