Unit VI - Lesson 1 - 6

### 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'
    })