23. DOM and HTML element manipulation with Javascript

The Document Object Model (DOM) is a programming interface that allows scripts to be connected to the content of a web page. It represents the structure of a web page and can be manipulated with JavaScript to change the page's content and layout. This chapter of our e-book will cover manipulating the DOM and HTML elements with JavaScript.

To begin with, the DOM is a tree representation of the web page. Every element, attribute, and text on the page is represented by an object in the DOM. These objects are organized in a tree structure, with the 'document' object at the top. This object represents the web page as a whole and is the starting point for accessing any part of the page.

Objects in the DOM have properties and methods that you can use to manipulate them. For example, the 'document' object has a 'getElementById' method that you can use to get a page element by its ID. Once you have a reference to an element, you can use its properties and methods to change its content, style, and more.

For example, suppose we have a paragraph element on our page with the id 'myPara'. We can get a reference to this element and change its content as follows:

var para = document.getElementById('myPara');
para.textContent = 'New content!';

Here, we use the 'getElementById' method to get a reference to the paragraph element, and then we use the 'textContent' property to change the paragraph content. Note that the page content is immediately updated to reflect the change.

In addition to changing the content of an element, you can change its style. Each element has a 'style' property that you can use to change the element's CSS style. For example, you can change the color of our paragraph text as follows:

para.style.color = 'red';

Here, we use the 'style' property to access the element's style, and then we use the 'color' property to change the color of the text. Again, the page updates immediately to reflect the change.

You can also use JavaScript to add and remove elements from the page. Each element has 'appendChild' and 'removeChild' methods that you can use to add or remove elements. For example, you can add a new paragraph element to the page as follows:

var newPara = document.createElement('p');
newPara.textContent = 'A new paragraph!';
document.body.appendChild(newPara);

Here, we use the 'createElement' method to create a new paragraph element, and then we use the 'appendChild' method to add the new paragraph to the body of the page. Again, the page updates immediately to reflect the change.

In short, the DOM is a powerful programming interface that allows you to manipulate the content and layout of a web page with JavaScript. By learning how to use the DOM, you will be taking a big step towards becoming an effective front-end developer.

In the next chapter, we'll explore the DOM deeper and learn how to use events to make our web pages more interactive. Stay tuned!

Next page of the Free Ebook:

74Events and listeners in Javascript

3 minutes