Software Development Concepts to master.mb

DOM Manipulation session 1

A. DOM Manipulation Part 1

DOM manipulation refers to the process of using JavaScript to interact with and modify the content, structure, and styles of a web page's Document Object Model (DOM). The DOM represents the web page as a tree of objects, where each object corresponds to an element, attribute, or text node in the HTML document. By manipulating the DOM, developers can create dynamic and interactive web applications. Let's illustrate DOM manipulation with practical examples and code:

1. Change Text Content of an element

In HTML
Suppose you have the following HTML element on your web page:

<p id="greeting">Hello, World!</p>

JavaScript
You can change the text content using DOM manipulation like this:

// Get the element by its ID
const greetingElement = document.getElementById('greeting');

// Change the text content
greetingElement.textContent = 'Hello, Newbie!';

2. Add Elements to the web page Dynamically

In HTML
Suppose you want to add a new item to an unordered list on your web page:

<ul id="itemList">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

JavaScript
You can use DOM manipulation to add a new item dynamically:

// Get the list element by its ID
const listElement = document.getElementById('itemList');

// Create a new list item element
const newItemElement = document.createElement('li');
newItemElement.textContent = 'Item 3';

// Add the new item to the list
 listElement.appendChild(newItemElement);

3. Respond to Events like a Button Click

In HTML
Suppose you have a button on your web page and want to show an alert when the button of a given id is clicked:

<button id="myButton">Click Me</button>

JavaScript
You can use DOM manipulation to attach an event listener and respond to the button click:

// Get the button element by its ID
const buttonElement = document.getElementById('myButton');

// Add an event listener for the button click
buttonElement.addEventListener('click', () => {
  alert('You clicked the button!');
});

4. Change CSS Styles of elements Dynamically

In HTML
Suppose you want to change the background color of a specific element on your web page based on user input:
Among other elements, we have a div with id myDiv whose background color we want to change.
We want to pick the new color we will set from an Input element of id colorInput and set it as the background color, when a button of id changeColorBtn is clicked.

<div id="myDiv">This is my div.</div>

<button id="changeColorBtn">change CSS</button>

<input type="text" id="colorInput" >

JavaScript
You can use DOM manipulation to change the style dynamically:

  // Get the element by its ID
  const divElement = document.getElementById('myDiv');

  // Add an event listener to a button that changes the background color
  document.getElementById('changeColorBtn').addEventListener('click', () => {
  // Get the user-selected color
  const selectedColor = document.getElementById('colorInput').value;

  // Apply the selected color as the background color
  divElement.style.backgroundColor = selectedColor;

  // On Button click we are also asking for User's name to use it in the code to come after
  // in this case, it is used in an alert function
  const myName = prompt("What is your name?")
  alert("The logged in user is " + myName)
});

NB:

1. Example No.4, shows how one can combine multiple functionalities of manipulating many parts of the DOM together or at the same time.
2. For deeper examples, watch this video