I think most of you even remotely familiar with Javascript have heard of "the DOM". Most people don't know what it quite means and those who barely have some idea would tell you about the "tree structure". Well, there is more to it than that.
If you are using the internet, you have been interacting with the DOM for quite some time now. In this primer, we would look at what truly is the DOM, its misconceptions, and a survival guide for the lazy.
But what is the DOM? (in simple words)
So, if you do a simple google search on what the DOM is you will get complicated explanations and diagrams. To understand what it is, let's first understand the need for DOM and why it even exists.
In web development, HTML, CSS, and Javascript work together to create an application. HTML works as the skeletal system, Javascript as the nervous system, and CSS as the skin (I majored in Biotech).
But how do these languages work together?
What happens under the hood is that the browser receives HTML, parses it, and converts it into an object, readable by Javascript. That's what the DOM or Document Object Model is.
Note: DOM, in general, is programming language agnostic.
Think of DOM as an API for Javascript and HTML.
The image below summarises it:
Manipulating the DOM
There are a few things attached to this "object" and ways that Javascript can interact with it. I will mention the most commonly used DOM queries which you will need in 90% of the cases. I don't want this to be another long post but a rather comprehensive guide for those starting out.
document.getElementById('id') //returns the first element with the specified id.
document.querySelector('#someid') //returns an element that has a class name of 'someid'
document.createElement("type") // creates a new element of type mentioned. For Ex: div, p ...
document.querySelectorAll('.someclass') //returns all elements with the class of someclass
Events and Event Handlers
What is an Event?
Events are things that a user does, or the browser does, or when certain criteria are met. Some common examples are, click, mouse press, load, etc. Think of it as something happening, like an "event".
One common example you definitely would have come across is:
<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>
<!-- This "onclick" is an event. -->
<!-- In general it follows. -->
<element event="some JavaScript">
With Events, come Event Handlers. Event handlers quite intuitively do what they suggest, they handle events. So, let's say you have created a button that when pressed twice would detonate a bomb. Pressing it twice is the event, and when that event occurs, we need a function that would detonate the bomb, that's what event handlers do.
There are three methods to add event handlers and trust me when I say this: the preferred method is the Event listeners.
function someFunction() {
alert("Gives an alert!");
}
element.addEventListener('click', someFunction);
Let's understand the above code. someFunction() throws an alert.
.addEventListener() waits for the event to occur, that is listens for the event. It sits there and does nothing until the event occurs. It takes two parameters, the first is the event type and the second is the function that would trigger when the event occurs. In the above case, the event is 'click'. So if someone clicked on the element, it would trigger someFunction() which would give us an alert.
Conclusion
I have skipped a lot, but this should be enough for you to get the basics and research your way through. Here is some additional material in case you want to read more in-depth.