Awonke Mnotoza

Site Owner

Understanding the DOM with JavaScript

08 May 2023

What is JavaScript DOM?

JavaScript DOM, short for Document Object Model, is a programming interface that allows JavaScript to interact with HTML and XML documents.

It represents the structure of a web page as a hierarchical tree-like structure.

Each element is a node with various properties and methods that can be manipulated using JavaScript.

Okay, take a deep breath, let that sink in for a moment.

Understanding the Document Object Model

The DOM is structured as a tree, with the root node being the document object.

Each HTML element is represented as a node, and the relationship between elements determines the parent-child hierarchy.

Understanding this structure is crucial for effectively manipulating web page elements.

Yeah, keep breathing. But let me give you some oxygen and break it down for you with an example.

DOM Example:

Think of your family, where you have your family structure, that consists of your grandparents, your parents, you, and your children (if you don't have them in this example you do).

With reference to the DOM and your family. The document would be your grandparents, then the HTML your parents, then you being the Body and your sibling being the Head.

Then your children would be the Headings, Paragraphs, etc.

All of you are connected and dependent on your grandparents (document). Keep this in mind, as I will be using it below.

Finally some fresh air. Now let us cruise.

Accessing HTML Elements

To interact with HTML elements, we need to select or access them using JavaScript.

There are many methods of doing this, so I will reveal a few.

Contawo: javascript

Copy

// Accessing an element by ID
const elementById = document.getElementById('myElementId');

// Accessing elements by class name
const elementsByClass = document.getElementsByClassName('myClass');

// Accessing elements by tag name
const elementsByTag = document.getElementsByTagName('div');

// Accessing the first element that matches a CSS selector
const elementBySelector = document.querySelector('.myClass');

// Accessing all elements that match a CSS selector
const elementsBySelectorAll = document.querySelectorAll('div');

You can use any that you like and feel comfortable with.

My personal preference is to use a query selector.

Modifying HTML Elements

Once we have accessed an HTML element, we can modify its content, attributes, and styles.

Contawo: javascript

Copy

// Changing the inner HTML content of an element
elementById.innerHTML = '<p>New content</p>';

// Modifying the text content within an element
elementById.innerText = 'New text';

// Changing attributes
elementById.setAttribute('class', 'newClass');
elementById.setAttribute('src', 'newImage.jpg');

// Modifying styles
elementById.style.color = 'red';
elementById.style.fontSize = '20px';

Creating and Removing Elements

Now let us say that instead of referencing the elements from HTML, you want to create them with JavaScript since you now have access to the DOM.

JavaScript DOM enables the dynamic creation and removal of HTML elements.

This functionality is useful for building elements on-the-fly or dynamically updating the page.

Contawo: javascript

Copy

// Creating a new element
const newElement = document.createElement('div');

// Adding a new child element to an existing parent element
elementById.appendChild(newElement);

// Removing a child element from its parent
elementById.removeChild(newElement);

You can either create the parent element or take it from the DOM.

Every time you create an element with JavaScript, do not forget to append it to the DOM, so that it can be displayed on the page.

Handling Events

Now let us say that you want to handle events.

Events, such as a mouse click or keyboard press, trigger specific actions in JavaScript.

DOM provides a way to handle these events through event listeners.

These listeners, listen for any event that will occur, then do something about it.

Here are the steps involved:

Contawo: javascript

Copy

// Selecting the target element
const buttonElement = document.getElementById('myButton');

// Attaching an event listener
buttonElement.addEventListener('click', function() {
           // Define the function to be executed when the event occurs
          alert('Button clicked!');
});

Learn more about JavaScript and the Web

If you are curious like me and want to learn more about JavaScript and the Web.

Also get a certificate of completion, so that you can start applying for jobs.

Start learning today by clicking the link below.

Link:

Get me started with JavaScript

Conclusion

JavaScript DOM is a powerful tool that allows you to manipulate web page elements dynamically.

Understanding the Document Object Model, accessing HTML elements, modifying their properties, and handling events are the fundamental aspects of DOM manipulation.

With practice and exploration, you can create interactive and engaging web experiences.

Advertise with contawo

Awonke Mnotoza

Understanding the DOM with JavaScript

What is JavaScript DOM?

Understanding the Document Object Model

DOM Example:

Accessing HTML Elements

Modifying HTML Elements

Creating and Removing Elements

Handling Events

Learn more about JavaScript and the Web

Conclusion

Comments

Advertise with contawo