Comment on page
6. Interacting with the DOM
- 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
1 sessions, 1.5hrs
If an element has the
id
attribute, we can get the element using the method document.getElementById(id)
, no matter where it is.<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>
The
id
must be uniqueThe
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.(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:<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>
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:<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>
<input type="text" id="mytext">
document.getElementById("mytext").value = "My value";
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
andkeyup
– when a keyboard key is pressed and released.DOMContentLoaded
– when the HTML is loaded and processed, DOM is fully built.
<input value="Click me" onclick="alert('Click!')" type="button">
<button id='elem'>Click me</button>
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
Last modified 2yr ago