# 6. Interacting with the DOM

## Lesson objectives

* Students learn how to use JS to update the html page (DOM, update input field/element colour)
* Students learn how to use JS to handle html events (button click)
* Students learn how to use JS to navigate to a different page
* Students learn how include JS file in a website

## Lesson time to deliever:

1 sessions, 1.5hrs

## Lesson content

### document.getElementById

 If an element has the `id` attribute, we can get the element using the method `document.getElementById(id)`, no matter where it is.

```markup
<div id="elem">
  <div id="elem-content">Element</div>
</div>

<script>
  // get the element
  let elem = document.getElementById('elem');

  // make its background red
  elem.style.background = 'red';
</script>
```

{% hint style="info" %}
**The `id` must be unique**

The `id` must be unique. There can be only one element in the document with the given `id`.

If there are multiple elements with the same `id`, then the behavior of methods that use it is unpredictable, e.g. `document.getElementById` may return any of such elements at random. So please stick to the rule and keep `id` unique.
{% endhint %}

(maybe don't cover as can be confusing): Also, there’s a global variable named by `id` that references the element. So can just do:

```javascript
<div id="elem">
  <div id="elem-content">Element</div>
</div>

<script>
  // elem is a reference to DOM-element with id="elem"
  elem.style.background = 'red';

  // id="elem-content" has a hyphen inside, so it can't be a variable name
  // ...but we can access it using square brackets: window['elem-content']
</script>
```

### querySelectorAll

By far, the most versatile method, `elem.querySelectorAll(css)` returns all elements inside `elem` matching the given CSS selector.

Here we look for all `<li>` elements that are last children:

```markup
<ul>
  <li>The</li>
  <li>test</li>
</ul>
<ul>
  <li>has</li>
  <li>passed</li>
</ul>
<script>
  let elements = document.querySelectorAll('ul > li:last-child');

  for (let elem of elements) {
    alert(elem.innerHTML); // "test", "passed"
  }
</script>
```

#### Setting value of input field

```markup
<input type="text" id="mytext">
```

```javascript
document.getElementById("mytext").value = "My value";
```

### Events

*An event* is a signal that something has happened. All DOM nodes generate such signals (but events are not limited to DOM).

Here’s a list of the most useful DOM events:

* `click` – when the mouse clicks on an element (touchscreen devices generate it on a tap).
* `keydown` and `keyup` – when a keyboard key is pressed and released.
* `DOMContentLoaded` – when the HTML is loaded and processed, DOM is fully built.

#### Handle button click:

```markup
<input value="Click me" onclick="alert('Click!')" type="button">
```

#### Do a demo using button click to change the webpage:

```markup
 <button id='elem'>Click me</button> 
```

```javascript
 let elem = document.getElementById('elem');
 
 elem.addEventListener("click", changePage); // can do like this
 elem.onclick = function(){changePage}; // or this way
 
 function changePage(){
   window.location.href = "https://stackoverflow.com/";
 }
 
```

Assesment:

* Get to update login page to add js file
* In js file update login button click to validate input to ensure email contains ...
* Clarify this is not how logins work as can see correct answer in code


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tbhp.gitbook.io/thebeta/lesson-plans/6.-interacting-with-the-dom.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.