JavaScript

Learning outcome1:

Use Fundamental Features of JavaScript

CHAP XI:
Manipulation of Browser DOM –
Usage of Advanced DOM and events
Table of Contents
1. Usage of Document Object Model (DOM).....................................................................................2
1.1. Introduction...........................................................................................................................2
1.2. DOM Tree..............................................................................................................................3
1.2.1. HTML DOM Tree of Objects...........................................................................................3
1.3. DOM Functions......................................................................................................................3
1.3.1. getElementById()...........................................................................................................4
1.3.2. querySelector()..............................................................................................................4
1.3.3. getElementsByClassName()...........................................................................................5
1.3.4. getElementsByTagName()..............................................................................................5
1.3.5. createElement().............................................................................................................6
1.4. JavaScript DOM for HTML and CSS........................................................................................6
1.4.1. JavaScript DOM for HTML..............................................................................................6
1.4.2. JavaScript DOM for CSS..................................................................................................7
1.5. Inner HTML and Inner Text Properties...................................................................................8
1.6. Exercises................................................................................................................................8
1. Usage of Advanced DOM and events

1.1. Introduction

Advanced DOM and events allow you to create dynamic and interactive web pages that respond to
user input.

1.2. Selecting, Creating, and Deleting Elements

The document.querySelector() and document.querySelectorAll() methods can be used to select

elements by their id, class, or tag name. The document.createElement() method can be used to
create new elements. The document.removeChild() method can be used to delete elements.

<div id="my-div"></div>
// Select the element with the id "my-div"
const myDiv = document.querySelector("#my-div");
// Create a new element with the tag name "p"
const newP = document.createElement("p");
// Add the new element to the document
document.body.appendChild(newP);
// Delete the element with the id "my-div"
document.body.removeChild(myDiv);

1.3. Types of Events and Event Handlers

There are many different types of events that can occur in the DOM, such as click, mouseenter, and
scroll. Event handlers are functions that are called when an event occurs.

1.3.1. Types of Events

1. Mouse Events

These events are related to mouse actions. These includes bellow examples:

 Click event: Triggers when the mouse is clicked on an element.

 Mouseover event: Triggers when the mouse pointer is moved over an element.
 Mouseout event: Triggers when the mouse pointer leaves an element.
 <button id="myButton">Click Me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button clicked!');
});

button.addEventListener('mouseover', function() {
console.log('Mouse over the button');
});

button.addEventListener('mouseout', function() {
console.log('Mouse left the button');
});
</script>

2. Keyboard Events

These events are related to keyboard actions. These includes bellow examples:

 Keydown event: Triggers when a key is pressed down.

 Keyup event: Triggers when a key is released.
 Keypress event: Triggers when a key is pressed and released.

<input type="text" id="myInput"></input>

<script>
const input = document.getElementById('myInput');
input.addEventListener('keydown', function(event) {
console.log('Key pressed:', event.key);
});

input.addEventListener('keyup', function(event) {
console.log('Key released:', event.key);
});

input.addEventListener('keypress', function(event) {
console.log('Key pressed and released:', event.key);
});
</script>

3. Form Events

These events are related to form elements. These includes bellow examples:

 Submit event: Triggers when a form is submitted.

 Input event: Triggers when the value of an input element changes.
 Change event: Triggers when the value of a form element changes and loses focus.
 <form id="myForm">
<input type="text" name="username" required>
<input type="submit" value="Submit">
</form>
<script>
const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
event.preventDefault();
console.log('Form submitted');
});

const input = form.elements.username;

input.addEventListener('input', function() {
console.log('Input value changed:', input.value);
});

input.addEventListener('change', function() {
console.log('Input value changed and lost focus:', input.value);
});
</script>

1.3.2. Event Handlers

1. Inline Event Handlers

Event handlers can be defined directly in HTML attributes.

<button onclick="alert('Button clicked!')">Click Me</button>

2. DOM Level 0 Event Handlers:

Event handlers can be assigned to element properties.

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

<script>
const button = document.getElementById('myButton');
button.onclick = function() {
alert('Button clicked!');
};
</script>
 3. DOM Level 2 Event Handlers

Event listeners are preferred over DOM Level 0 event handlers.

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

<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button clicked!');
});
</script>

1.4. DOM Traversing

The DOM can be traversed using the document.querySelectorAll() method, the Node.childNodes
property, and the Node.nextElementSibling property.

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

// Select all the list items

const liElements = document.querySelectorAll("li");

// Iterate through the list items

for (const liElement of liElements) {
console.log(liElement.textContent);
}

1.5. Building a Tabbed Component

A tabbed component is a component that allows the user to switch between different tabs. The
following code shows how to build a tabbed component using the DOM:

The tabbed pane below has three parts:

 Html codes: used to build tabbed pane structure

 CSS codes: can be used for beautification
 JavaScript codes: to make tabbed pane dynamic and interactive
<!DOCTYPE html>
<html>
<head>
<title>Inline Tabbed Component</title>
<style>
.tab {
display: none;
}
.active-tab {
display: block;
}
</style>
</head>
<body>
<div class="tabs">
<button class="tab-button" data-tab="tab1">Tab 1</button>
<button class="tab-button" data-tab="tab2">Tab 2</button>
<button class="tab-button" data-tab="tab3">Tab 3</button>
</div>
<div class="tab-content">
<div class="tab tab1 active-tab">Content of Tab 1</div>
<div class="tab tab2">Content of Tab 2</div>
<div class="tab tab3">Content of Tab 3</div>
</div>
<script>
// Function to handle tab selection
function showTab(tabName) {
// Hide all tab contents
const tabContents = document.querySelectorAll('.tab');
tabContents.forEach(tab => tab.classList.remove('active-tab'));
// Show the selected tab content
const selectedTab = document.querySelector(`.${tabName}`);
selectedTab.classList.add('active-tab');
}
// Attach event listeners to tab buttons
const tabButtons = document.querySelectorAll('.tab-button');
tabButtons.forEach(button => {
button.addEventListener('click', () => {
const tabName = button.getAttribute('data-tab');
showTab(tabName);
});
});
// Show the first tab on page load
showTab('tab1');
</script>
</body>
</html>