🛎️*I am writing this article to help my brother, Avi with his journey in web development.
You can find him on Twitter and on Minecraft @avipopo(he is a damn consistent Minecraft player 😍). *
The Document Object Model(DOM) creates a structure or a view of the web page so that other scripts or programming languages can connect to the page for different applications.
There are 3 main aspects of developing a website.
HTML is the language of the web and has a specific set of rules and syntax.
- HTML stands for HyperText Markup Language
- HTML is the standard markup language for creating Web pages
- HTML describes the structure of a Web page
- HTML consists of a series of elements
- HTML elements tell the browser how to display the content
- HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.
- CSS stands for Cascading Style Sheets
- CSS describes how HTML elements are to be displayed on screen, paper, or in other media
- CSS saves a lot of work. It can control the layout of multiple web pages all at once
- External style sheets are stored in CSS files
DOM refers to the Document Object Model.
- Animation💨🔜 after you click a button
- Something happened(event🪃) after you clicked a button
- Creating🗃️ new forms or elements on a static page based on user's inputs without reloading the site on client's device
- Gathering📂 form input data for further usage.
These are all the common things expected from a well-made website.
As you can see, here is an example of how the HTML document looks like while running in a web browser.
In the picture above you can see on the left is the browser view of the HTML document and on the right side is the actual code.
You can see that
h1 tag is inside the body tag which helps the browser display the heading in the format we wanted. This is how other tags in this HTML document works.
Tags are defining how there inner elements or texts should be displayed in the browser. Differences in the hierarchy of different tags are used for a different way of displaying them on the browser.
There is an
HTML tag up there. An indented
head tag. That
head tag has a
title tag in it. Again in that same way,
HTML tag has a
body tag in it and the
body tag also has some other tags inside of it. The pattern here is the hierarchy of different tags based on how they are used.
Document📃 in DOM refers to the HTML document that we write.
Object🪨 in DOM is the tags in the HTML document that we write.
- Model🧩 is created based on the hierarchy of tags been implemented in the HTML document that we write.
Tags are converted into objects in the DOM tree on the right-hand side. those objects are placed based on the tag's hierarchy in the HTML document.
The HTML document you write is not different than it's DOM version. DOM is a different representation of the same HTML document you made.
For example in the image above, you can see on the left side that there is a
title tag with a title name inside of it.
Similarly, you can change colour, add colour and add a background image to any element using the objects in this DOM.
The yellow💛 text is the element node, the blue💙 one is the inner
text node and the green💚 one is the
attribute node. There are many other nodes but these three are the most basics and the most common ones.
Again here you can see that a little bit of hierarchy is going on here. The
element tag is at the top and then there is in the second level, the attributes inside another nested
div element tag. "My title" is inside a different nested tag. These
elements are all objects in the DOM.
For those who don't know what an object🪨 is, the object🪨 is something which has an attribute and a function that can operate on that attribute.
We can refer DOM as a JS view too.
As DOM is a model, it has it's own data types and various objects.
- Document The document is the root object itself that needs to be accessed first to access other objects inside of it.
Every object inside a document can be a node. In an HTML document, a node can be an
elementtag, an attribute or a simple text node.
A novelist is an array of nodes. This kind of nodes is returned bu the method
document.querySelectorAll(). As this novelist is an array, items in it are accessed by indexing.
- Attributes A returned Attribute node is an object reference that exposes a special interface for attributes. Generally, an Attribute is referred to as simply an attribute we know. Attributes like id and classes are the identifiers and then there are styling that is inline CSS attributes.
The definitions and explanation in this article are highly simplified for the sake of beginner's ease of understanding. The following interfaces are considered as obsolete. This list will be updated based on any future changes.
UserDataHandlerActual representation of HTML to DOM conversion
Conclusion✊: DOM📑🪨🧩 is not a seperate document, rather it's a representation of what you wrote in that
- Learn the concept of DOM
I will be exploring the methods more deeply in another writing. I will link to the article here.