Home » Learn » Javascript

Working with the DOM

 · 3 min · Nasir

This module will cover the understanding of the Document Object Model (DOM), manipulating HTML elements and responding to events.

Learn JS

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the structure of a document as a tree of objects, with each object representing an element on the page.

The DOM allows you to manipulate the content and structure of a document using programming languages like JavaScript. This enables you to create dynamic and interactive websites that can respond to user input and change in real-time.

Manipulating HTML Elements

To work with the DOM, you first need to access the elements on the page that you want to manipulate. You can do this using the document object, which is the root of the DOM tree.

For example, to access an element with the ID “myDiv”, you can use the getElementById method of the document object:

const myDiv = document.getElementById("myDiv");

You can also access elements by tag name, class name, or attribute using the getElementsByTagName, getElementsByClassName, and querySelectorAll methods, respectively.

Once you have access to an element, you can manipulate its content and attributes using the properties and methods of the element object.

For example, to change the text content of an element, you can use the textContent property:

myDiv.textContent = "Hello, World!";

To change the value of an attribute, you can use the setAttribute method:

myDiv.setAttribute("class", "new-class");

You can also add, delete, and modify elements in the DOM using the createElement, appendChild, and removeChild methods.

For example, to create a new element and append it to an existing element, you can use the following code:

const newElement = document.createElement("p");
newElement.textContent = "This is a new element";
myDiv.appendChild(newElement);

The DOM is an essential part of web development, and being able to work with it effectively is crucial for creating dynamic and interactive websites. By learning how to access and manipulate elements in the DOM, you can add a whole new level of functionality to your web projects.

Responding to Events

In JavaScript, events are actions that occur on a web page, such as a user clicking a button or hovering over an element. Responding to events is an important part of creating interactive websites, as it allows you to create actions that are triggered by user interaction.

To respond to an event in JavaScript, you first need to add an event listener to the element that you want to monitor. An event listener is a function that is called when the event occurs.

For example, to add a click event listener to a button element, you can use the addEventListener method:

const button = document.getElementById("myButton");
button.addEventListener("click", function() {
  console.log("Button was clicked!");
});

In this example, the click event listener will be called whenever the button is clicked. You can also specify the function to be called as a separate function:

const button = document.getElementById("myButton");

function buttonClicked() {
  console.log("Button was clicked!");
}

button.addEventListener("click", buttonClicked);

You can add event listeners for a wide variety of events, including mouse events (click, mouseenter, mouseleave, etc.), keyboard events (keydown, keyup, etc.), and form events (submit, change, etc.).

In addition to the addEventListener method, you can also use the on syntax to add event listeners. For example, the following code is equivalent to the previous example:

const button = document.getElementById("myButton");

function buttonClicked() {
  console.log("Button was clicked!");
}

button.onclick = buttonClicked;

Overall, responding to events is a crucial part of creating interactive websites. By adding event listeners and defining functions to be called when events occur, you can create dynamic and responsive actions that enhance the user experience.

We use cookies to improve your experience on our site and to show you relevant advertising.

Read cookie policy

Accept & Close