First of all, this story is based on Stephen Curtis -33 Fundamentals Every Javascript Developer Should Know and you can read it here.
I thought it is a great concept to know although it is not a requirement. I decided to learn and explain these concepts one by one.
Index
1. Can JavaScript understant HTML?
2. DOM (Document Object Model)
3. How does it look like?
4. conclusionCan JavaScript understant HTML?
Imagine you want to read a specific HTML element and manipulate it. For example, you want to change the h1 color by clicking a button. In this case, you might gonna use a document.querySelector, or something like that to grab an element from HTML.
However, JavaScript files can’t read HTML files. It’s like Korean who don’t know how to read English is trying to read a document that is written in English.
DOM (Document Object Model)
This is where DOM comes in!! DOM(Document Object Model) is one of the powerful interface that WEB APIs have.
For instance, Browser like chrome starts to read HTML file as soon as we open the browser and parse it into a well-organized object so that JavaScript can understand.
The object not only provides simple information about what kind of elements HTML file has but also other things like the element’s size, attributes, text, and so on which is really useful when you want to manipulate it.
How does it look like?
As you can see, it looks like a tree. The document is on the top level and other things are descendants of it. This is why when we want to select h1 tag in JavaScript, we simply write a document.querySelector(‘h1’)
When I didn’t know about DOM, I thought that document.querySelector or something like that is part of JavaScript, but, it is not!!
Conclusion
Today I simply explained the overview of the Document Object Model. Although I didn’t mention lots of details, I believe this basic overview might be helpful for someone who didn’t understand DOM yet.
Thanks for reading this short article!! 🤩
