Unit VI - Lesson 1
7.1.1. What is DOM?
(c) The DOM represents the structure of a web page as a hierarchical tree of nodes.
7.1.2. Understanding Node and Types in DOM
(b) A generic term representing any object in the DOM tree, including element nodes, text nodes, and more.
Unit VI - Lesson 2
7.2.1. Understanding DOM Methods
(c) createElement and appendChild
Unit VI - Lesson 3
7.3.1. Understanding DOM Elements
(c) An Element Node represents the fundamental building blocks of an HTML document.
7.3.2. Creating and Manipulating Elements
// Write code to remove the second paragraph
const p = document.getElementById('para2');
p.remove();
// Write code add a new list item with text "Mango" to the existing list of fruits at the end
const n = document.createElement('li');
n.textContent = 'Mango';
const f = document.getElementById('fruits');
f.appendChild(n)
Unit VI - Lesson 4
7.4.1. Working with HTML Content using DOM
// Write code to change the text in the second paragraph to "Hello"
document.getElementById('para2').textContent = 'Hello'
Unit VI - Lesson 5
7.5.1. Adding or Modifying Classes
// Write code to select the second paragraph element by ID
const p2 = document.getElementById('para2');
// Add a CSS class called myStyle dynamically to that element's classList
p2.classList.add('myStyle')
7.5.2. Working with Inline Styles
// Write code to select the third paragraph element by ID
const p3 = document.getElementById('para3');
// Using inline styles set the text color to red and background color to yellow
p3.style.color='red';
p3.style.background='yellow';
7.5.3. Dynamic Styling Based on Events:
// Write code to select the second paragraph element by ID
const p2 = document.getElementById('para2');
// Write code to select the button called "Click Me" by ID
const btn = document.getElementById('clickMe')
// Add an event listener to the "Click Me" button, which when clicked changes the text color of the second paragraph to red
btn.addEventListener('click', function() {
p2.style.color = 'red';
})
7.5.4. Manipulating Style Sheets
const styleElement = document.createElement('style');
styleElement.innerHTML = '.myStyle { color: green; }';
document.head.appendChild(styleElement);
const element = document.getElementById('para2');
element.classList.add('myStyle');
Unit VI - Lesson 6
7.6.1. Various DOM Events
// Write code to select the second paragraph element by ID
p2 = document.getElementById('para2');
// Write code to select the third paragraph element by ID
p3 = document.getElementById('para3');
// Add a double click event listener to second paragraph which changes
// the text color of third paragraph to blue when we double click
// on the second paragraph
p2.addEventListener('dblclick',function() {
p3.style.color='blue'
})
