UI Component:
Now we will learn about how to make interactive elements using Javascript.
For that we need to learn HTML DOM, Javascript Inbuilt methods and Events!
Let’s start with HTML DOM: DOM stands for document object model.
These diagram shows basic overview of Element Hierarchy in HTML document. We can utilize it to select elements from HTML.
Here is the example of HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World!</title>
</head>
<body>
<div id='main' class="main">
<img src='main.jpg'/>
<p class="text">This is test text</p>
<a href="google.com">Search Here</a>
<p class="text">This is test text</p>
<p class="text">This is test text</p>
<p class="text">This is test text</p>
<p class="text">This is test text</p>
</div>
</body>
</html> Here are the JS DOM methods to get these HTML tags/elements:
document.getElementById(id)document.getElementsByTagName(name)document.getElementsByClassName(class)document.querySelector(*)document.querySelectorAll(*)
Here is the example with JS DOM method implementation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World!</title>
</head>
<body>
<div id="main" class="main">
<img src='main.jpg'/>
<p class="text">This is test text</p>
<a href="google.com">Search Here</a>
<p class="text">This is test text</p>
<p class="text">This is test text</p>
<p class="text">This is test text</p>
<p class="text">This is test text</p>
</div>
<script>
let byID = document.getElementById("main");
console.log(byID);
let byTag = document.getElementsByTagName('p');
console.log(byTag);
let byClass = document.getElementsByClassName('main');
console.log(byClass);
let byQry = document.querySelector('p');
console.log(byQry);
let byQryAll = document.querySelectorAll('p');
console.log(byQryAll);
</script>
</body>
</html>
Now we’ll learn how to update that element:
Here are the JS Inbuilt methods to update the element.
- innerHTML – Will replace the html code for element with given html in method argument.
- innerText – Will update the text for given element with given text in method argument.
- style – Will update the style of element with given property.
Here are the example how to implement it:
document.getElementById('main').style.color = 'red'
document.getElementById("main").innerHTML = "Paragraph changed!";
document.getElementById("main").innerText = "Paragraph changed!";
Let’s talk about how to create HTML element dynamically:
document.getElementById("main").appendChild(“<p></p>”);
Let test = document.createElement("P");
document.getElementById("main").appendChild(test);
| Event | Description |
| onchange | An HTML element has been changed |
| onclick | The user clicks an HTML element |
| onmouseover | The user moves the mouse over an HTML element |
| onmouseout | The user moves the mouse away from an HTML element |
| onkeydown | The user pushes a keyboard key |
| onload | The browser has finished loading the page |
Now let’s learn about events which can be used for the interaction:
These two events are widely used. There are more number of events which we will look later.
Now we will look into the method which is needed to trigger the events.
The addEventListener() method attaches an event handler to the specified element.
document.getElementById("main").addEventListener("click", myFunction);function myFunction() { alert("Hello World"); }
Here is the example to implement events on the page.
Create the block on the page, color it green and on click change the color of that block to yellow.
Here is the solution:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World!</title>
<style>
#main {
background-color: green;
}
</style>
</head>
<body>
<div id="main" class="main">
<img src='main.jpg'/>
<p class="text">This is test text</p>
<a href="google.com">Search Here</a>
<p class="text">This is test text</p>
<p class="text">This is test text</p>
<p class="text">This is test text</p>
<p class="text">This is test text</p>
</div>
<script>
let byID = document.getElementById("main");
byID.addEventListener("click", myFunction);
function myFunction() {
byID.style.backgroundColor = "yellow"
}
</script>
</body>
</html>