There are 5 ways to select elements on an HTML page:
document.getElementsByTagName()
document.getElementsByClassName()
document.getElementById() *
document.querySelector()
document.querySelectorAll() *
<div id="example"></div>
document.getElementById("example").innerHTML = "Hello!";
<div id="example">Hello!</div>
document.getElementById("example").style.fontSize = "25px";
document.getElementById("example").style.color = "red";
document.getElementById("example").style.backgroundColor = "yellow";
document.getElementById("example-image").src = "picture.gif";
or
document.getElementById("example").classList.add("my_class_name");
Events are things that happen in the browser — a button being clicked, a page loading, a video playing, etc. — in response to which we can run blocks of code.
To listen for these events we have to create an event listener and the blocks of code that run in response to the event firing are called event handlers.
<button id="my-button>click me</button>
document.getElementById("my-button").addEventListener("click", handle_button_click);
function handle_button_click(){
//do some stuff
}