Manipulating the DOM (Document Object Model)

Welcome to Module 3! In this journey, you will unravel the secrets of manipulating the DOM (Document Object Model) in JavaScript, opening up a world of possibilities to interact with HTML elements and create dynamic and interactive interfaces.

Get ready to learn how to access, modify, and add elements to the web page, creating richer and more personalized user experiences.

Introduction

The DOM (Document Object Model) is a tree-like representation of the HTML structure of a web page.

DOM manipulation is essential for interacting with page elements using JavaScript.

Imagine the DOM as a family tree, where the HTML document is the parent, and the elements within it are the children.

These elements can be manipulated to change the content, style, and behavior of the page.

Accessing Elements

• By ID: We can select an element by its unique ID attribute using document.getElementById().
• By Class: We can select elements by their classes using document.getElementsByClassName().
• By Tag: We can select elements by their tags using document.getElementsByTagName().

There are various ways to select elements in the DOM, and these are just a few of them.

Modifying Elements

After selecting an element, we can modify its content, style, and other attributes.

• Content: We can change the inner text of an element using the textContent or innerHTML property.
• Style: We can modify the style of an element using the style property, which allows changing attributes like color, size, and positioning.
• Attributes: We can add, remove, or modify attributes of an element using the getAttribute(), setAttribute(), and removeAttribute() properties.

Example:

<!-- HTML -->
<p id="myParagraph">Initial text</p>
<button onclick="changeContent()">Change Text</button>

<script>
function changeContent() {
  // Change inner text using textContent
  const paragraph = document.getElementById('myParagraph');
  paragraph.textContent = 'New text';

  // Modify style using style
  paragraph.style.color = 'red';
  paragraph.style.fontSize = '20px';
  paragraph.style.fontWeight = 'bold';

  // Manipulate button attributes using setAttribute() and removeAttribute()
  const button = document.querySelector('button')
  button.setAttribute('disabled', true);
  button.removeAttribute('onclick');
}
</script>

In this example, there is a paragraph with the id myParagraph that contains the text “Initial text.” There is also a button that calls the changeContent() function when clicked.

The changeContent() function, defined in JavaScript, performs the following actions:

1. Changes the inner text of the paragraph using the textContent property.
2. Modifies the style of the paragraph by changing the text color to red, font size to 20 pixels, and font weight to bold.
3. Manipulates attributes of the button using the setAttribute() and removeAttribute() functions. Here, the disabled attribute is set to true, disabling the button, and the onclick attribute is removed, preventing the function from being called when the button is clicked.

When the button is clicked, the paragraph text is changed, the style is modified, and the button attributes are manipulated as specified in the changeContent() function.

Handling Events

We can use DOM manipulation to add events to elements.

Example:

<!-- HTML -->
<button id="myButton">Click here!</button>

<!-- JavaScript -->
const button = document.getElementById('myButton');
function myFunction() {
  console.log('The button was clicked!');
  // Here you can add the code you want to execute when the button is pressed.
}

button.addEventListener('click', myFunction);

In this example, a button with the id myButton is created in the HTML. Then, in JavaScript, the button is selected using document.getElementById() and stored in the variable button.

The function myFunction() is defined and displays a message in the console when the button is clicked. You can add the code you want to execute inside this function.

Finally, the addEventListener() method is used to add a click event to the button.

It takes two arguments: the first is the type of event we want to add (in this case, ‘click’), and the second is the function that will be executed when the event occurs (in this case, myFunction()).

This way, when the user presses the button, the myFunction() function will be called, and the message will be displayed in the console.

Challenge:

1. Create a JavaScript script that creates a button on the web page.
2. Add a click event to the button.
3. When the user clicks the button, change the button’s color and display a message on the screen.

Now that you’ve learned to select elements by ID, class, and tag, let’s delve deeper into DOM manipulation and explore how to interact with these elements more advancedly.

The next lessons will guide you through more specific topics, such as selecting elements, modifying content and styles, and handling user events.