Skip to main content

Document in JavaScript

The HTML Document Object Model (DOM) is represented by the document object.

The document object is the top-level object for working with an HTML document, and it provides access to all of the elements and other content in the document.

Finding HTML Elements​

There are several ways to find HTML elements on a web page.

Here are some of the most commonly used methods:

  • getElementById: This method returns the element with the specified ID attribute.
var element = document.getElementById("myElement");
  • getElementsByClassName: This method returns an array of elements with the specified class name.
var elements = document.getElementsByClassName("myClass");
  • getElementsByTagName: This method returns an array of elements with the specified tag name.
var elements = document.getElementsByTagName("p");
  • querySelector: This method returns the first element that matches a specified CSS selector.
var element = document.querySelector(".myClass");
  • querySelectorAll: This method returns an array of all elements that match a specified CSS selector.
var elements = document.querySelectorAll("p");

In addition to these methods, you can also use other CSS selectors to find elements, such as # for IDs and . for classes.

As an example:

var element = document.querySelector("#myElement");
var elements = document.querySelectorAll(".myClass");

Changing HTML Elements​

You can change the content and attributes of HTML elements dynamically using several methods.

Here are some of the most commonly used methods:

  • innerHTML: This property allows you to get or set the HTML content of an element.
var element = document.getElementById("myElement");
element.innerHTML = "New HTML content";
  • innerText or textContent: These properties allow you to get or set the text content of an element.
var element = document.getElementById("myElement");
element.innerText = "New text content";
  • setAttribute: This method allows you to set the value of an attribute on an element.
var element = document.getElementById("myElement");
element.setAttribute("src", "new-image.jpg");
  • style: This property allows you to set CSS styles on an element.
var element = document.getElementById("myElement");
element.style.color = "red";
element.style.fontSize = "20px";
  • classList: This property allows you to add, remove, or toggle classes on an element.
var element = document.getElementById("myElement");
element.classList.add("newClass");
element.classList.remove("oldClass");
element.classList.toggle("toggleClass");

Adding and Deleting Elements​

You can add or delete HTML elements on a web page dynamically using several methods.

Here are some of the most commonly used methods:

  • createElement: This method allows you to create a new HTML element.
var element = document.createElement("div");
  • appendChild: This method allows you to add a new child element to an existing element.
var parentElement = document.getElementById("parentElement");
var childElement = document.createElement("div");
parentElement.appendChild(childElement);
  • insertBefore: This method allows you to insert a new element before an existing element.
var parentElement = document.getElementById("parentElement");
var childElement = document.createElement("div");
var existingElement = document.getElementById("existingElement");
parentElement.insertBefore(childElement, existingElement);
  • removeChild: This method allows you to remove an existing element from the document.
var parentElement = document.getElementById("parentElement");
var childElement = document.getElementById("childElement");
parentElement.removeChild(childElement);
  • replaceChild: This method allows you to replace an existing element with a new element.
var parentElement = document.getElementById("parentElement");
var newChildElement = document.createElement("div");
var oldChildElement = document.getElementById("oldChildElement");
parentElement.replaceChild(newChildElement, oldChildElement);

Adding Events Handlers​

You can add event handlers to HTML elements to make them interactive and respond to user actions.

Here are some of the most commonly used methods to add event handlers:

  • addEventListener: This method allows you to add an event listener to an element.
var element = document.getElementById("myElement");
element.addEventListener("click", function () {
  // Do something when the element is clicked
});
  • onclick: This property allows you to assign a click event handler to an element.
var element = document.getElementById("myElement");
element.onclick = function () {
  // Do something when the element is clicked
};
  • onload: This property allows you to assign a load event handler to the window or an element.
window.onload = function () {
  // Do something when the page is loaded
};

var element = document.getElementById("myElement");
element.onload = function () {
  // Do something when the element is loaded
};
  • onsubmit: This property allows you to assign a submit event handler to a form element.
var form = document.getElementById("myForm");
form.onsubmit = function () {
  // Do something when the form is submitted
  return false; // prevent the form from submitting
};
  • onkeydown, onkeyup, onkeypress: These properties allow you to assign key event handlers to an element.
var element = document.getElementById("myElement");
element.onkeydown = function () {
  // Do something when a key is pressed
};