DOM - Guided Practice

Understanding the DOM Methods and Properties

`getElementById`

Retrieves an element by its unique id.
Syntax: document.getElementById('elementId');

`querySelector`

Selects the first element that matches a CSS selector.
Syntax: document.querySelector('selector');

`querySelectorAll`

Selects all elements that match a CSS selector.
Returns a NodeList.
Syntax: document.querySelectorAll('selector');

`textContent`

Gets or sets the textual content of an element.
Syntax (get): element.textContent;
Syntax (set): element.textContent = 'New text';
Use it to avoid parsing HTML.

`innerHTML`

Gets or sets the HTML content inside an element.
Syntax (get): element.innerHTML;
Syntax (set): element.innerHTML = '<p>New HTML content</p>';

`classList`

Provides methods to work with an element's class attribute.
Methods include add(), remove(), toggle(), and contains().
Syntax:
- element.classList.add('className');
- element.classList.remove('className');
- element.classList.toggle('className');
- element.classList.contains('className');

Manipulating Attributes

getAttribute('attr'): Retrieves the value of an attribute.
setAttribute('attr', value): Sets the value of an attribute.
removeAttribute('attr'): Removes an attribute.

Step 1: Set Up Your HTML Page

Create an index.html file with the following content.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Fun with DOM Manipulation</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #fafafa;
      text-align: center;
    }
    h1 {
      color: #333;
    }
    #colorful-text {
      font-size: 24px;
      margin: 20px;
    }
    .box {
      width: 100px;
      height: 100px;
      margin: 10px auto;
      background-color: #ccc;
      border: 2px solid #333;
      transition: background-color 0.5s;
    }
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>

  <h1>Welcome to the DOM Playground!</h1>

  <p id="colorful-text">Click the button to change my color!</p>

  <button id="color-button">Change Color</button>

  <div class="boxes">
    <div class="box" id="box1" data-state="0"></div>
    <div class="box" id="box2" data-state="0"></div>
    <div class="box" id="box3" data-state="0"></div>
  </div>

  <button id="reset-button">Reset Boxes</button>

</body>
</html>

Step 2: Prepare Your JavaScript File

Create a script.js file in the same directory as your HTML file and link it to the HTML document using a <script> tag.

Step 3: Copy the starter code

// Step 4: Select Elements Using the DOM Methods
// getElementById

// querySelector

// querySelectorAll

// 5.1 Change Text Content and Style
/** Event listener for colorButton **/
colorButton.addEventListener('click', () => {
    // textContent

    // Style

});


// 5.2 Toggle Highlight and Update the state of the button
// classList

// Manipulate custom attribute

// Update innerHTML to show state


/**  Event listener for box **/
document.getElementById('reset-button').addEventListener('click', () => {
// Remove highlight class

// Reset data-satate attribute

// Clear innerHTML

// Reset colorfulText

// Reset color

});

Step 4: Select Elements Using the DOM Methods

In your script.js file, select the necessary DOM elements:

1. Using `getElementById`

Select the "Change Color" button using its id and store it in a variable (e.g., colorButton).
Select the paragraph with the id "colorful-text" and store it in a variable (e.g., colorfulText).

2. Using `querySelector`

Select the "Reset Boxes" button using its id and store it in a variable (e.g., resetButton).

3. Using `querySelectorAll`

Select all elements with the class "box" and store them in a variable (e.g., boxes).

Step 5: Manipulate elements

1. Change Text Content and Style

Type your code inside the event listener for colorButton.
- Change the text content of colorfulText to "You changed my color!" using textContent.
- Change the text color of colorfulText to any of your choice.

2. Highlight and Update the state of the button

Use classList to add the "highlight" class of a any box of your choice.
Retrieve the current value from the data-state attribute using getAttribute().
Compare the obtained value and get the boolean 'false' if the value is '0' and 'true' if is greater than '0'.
Update the data-state attribute with the new value using setAttribute().
Update the box's content to display the curent state using innerHTML (e.g., <p>State: X</p>).

3. Reset Functionality

In the event handler function:
- Remove the "highlight" class using classList.remove().
- Reset the data-state attribute to "0".
- Clear the inner content of the box.
- Reset the colorfulText content to its original text.
- Reset the text color of colorfulText to black.

Happy Coding! 🎉