Skip to main content

Accessing and Changing DOM Elements

Introduction​

JavaScript is an integral part of web development. It is a powerful scripting language that allows you to create dynamic and interactive features for your websites. One of the core functionalities of JavaScript is its ability to interact with the Document Object Model (DOM).

In this article, we will be focusing on how to access and change DOM elements using JavaScript. By the end of this article, you will be able to select, manipulate and change various elements on your webpage using pure JavaScript.

What is the DOM?​

Before we dive into the actual coding, let's first understand what the DOM is. The DOM (Document Object Model) is a programming interface for HTML and XML documents. It represents the structure of your web document in a tree-like format, where each node is an object representing a part of the document.

Accessing DOM Elements​

There are several ways to access or select DOM elements using JavaScript. Some of the most commonly used methods are:

document.getElementById()​

This method allows you to select an element by its unique ID. For example:

let element = document.getElementById('myId');

document.getElementsByClassName()​

This method returns a live HTMLCollection of elements with the given class name. For example:

let elements = document.getElementsByClassName('myClass');

document.getElementsByTagName()​

This method returns a live HTMLCollection of elements with the given tag name. For example:

let elements = document.getElementsByTagName('div');

document.querySelector()​

This method returns the first element that matches a specified CSS selector(s) in the document. For example:

let element = document.querySelector('.myClass');

document.querySelectorAll()​

This method returns all elements in the document that matches a specified CSS selector(s). For example:

let elements = document.querySelectorAll('.myClass');

Changing DOM Elements​

After accessing the DOM elements, you can then manipulate or change their properties or contents. Here are some of the ways to do it:

Changing the Content​

You can change the content of an element using innerHTML or textContent properties. For example:

let element = document.getElementById('myId');
element.innerHTML = 'New content';

Changing the Attribute​

You can change the attribute of an element using setAttribute method. For example:

let element = document.getElementById('myId');
element.setAttribute('class', 'newClass');

Changing the Style​

You can change the CSS style of an element using the style property. For example:

let element = document.getElementById('myId');
element.style.color = 'red';

Conclusion​

In this tutorial, we have learned how to access and change DOM elements using JavaScript. There are many more methods and properties available in JavaScript for DOM manipulation. The more you practice, the more comfortable you will become with these concepts. So, keep practicing and happy coding!