Flat Preloader Icon

Document Object

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.
  • 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.
  • 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


Share on: