Handling HTML elements with Javascript

Manipulation of HTML elements with Javascript

Javascript is a programming language widely used in the development of web sites, and one of its main functions is the manipulation of HTML elements. With this tool, you can change the content, style and behavior of elements on the page, making the user experience more dynamic and interactive.

Selecting HTML elements

Before manipulating an HTML element, it is necessary to select it. There are several ways to do this, but the most common are:

• getElementById: selects an element by its ID;
• getElementsByClassName: selects one or more elements by their class;
• getElementsByTagName: selects one or more elements by their tag name;
• querySelector: selects the first element that matches a CSS selector;
• querySelectorAll: selects all elements that match a CSS selector.

For example, to select an element with the ID "title", we can use the following code:

var title = document.getElementById("title");

So, the "title" variable will store a reference to the HTML element with the id "title".

Changing the content of HTML elements

One of the most common ways to manipulate HTML elements is to change their content. For this, we can use the "innerHTML" property, which allows accessing and modifying the element's internal HTML.

For example, to change the text of an element with the ID "message", we can use the following code:

var message = document.getElementById("message");
message.innerHTML = "New message text";

Then the text inside the element will be replaced with the new value.

Styling HTML Elements

Another way of manipulating HTML elements is to change their style. For this, we can use the "style" property, which allows accessing and modifying the element's CSS styles.

For example, to change the background color of an element with the ID "box", we can use the following code:

var box = document.getElementById("box");
box.style.backgroundColor = "red";

This will change the background color of the box to red.

Adding and removing HTML element classes

A more advanced way of manipulating HTML elements is adding and removing classes. Classes are used in CSS to apply styles to one or more elements, and can be added or removed dynamically with Javascript.

To add a class to an element with the ID "button", we can use the following code:

var button = document.getElementById("button");
button.classList.add("active");

This will add the "active" class to the element, allowing it to be styled with CSS.

To remove a class from an element with the ID "button", we can use the following code:

var button = document.getElementById("button");
button.classList.remove("active");

So the "active" class will be removed from the element.

Conclusion

The manipulation of HTML elements with Javascript is one of the main techniques used in the development of web sites. With it, it is possible to create more dynamic and interactive pages, improving the user experience. The main forms of manipulation are selecting elements, changing content and style, and adding and removing classes. With these tools, you can create more modern and efficient websites.

Next page of the Free Ebook:

13Interaction with APIs in Javascript

2 minutes