An investigative guide to React JS[DOM, Virtual DOM and JSX] Part-I
What is the need for React?
‘ Necessity is the mother of invention’ if so what is the necessity for React?
Before React, Javascript is used as a DOM manipulator either as a separate file linked to an HTML file or inline script tag.
Have this in your mind!
HTML — Structure of a page
CSS — Decoration of a page
JS — Behaviour of a page
Let’s break these words,
Document = HTML document
Object = Tags/Elements and their associated methods and properties
Model = Layout of a webpage
From above, we can conclude that HTML and DOM are linked. What links them? Yes, Browsers
Browsers take in HTML file and parse it to give DOM tree
Since all DOM tree elements are represented by tags in the HTML file, it is called markup language and not programming language
Recap
- So DOM is an object-oriented representation of a web page.
- They are represented by HTML(Markup)
- This can be modified by a scripting language called JavaScript.
- That’s why javascript is called DOM manipulator
- HTML gives you the structure of the webpage, CSS enables decoration of webpage and at last, Javascript provides the behaviour of webpage.
- The browser takes in an HTML file and converts it into a DOM tree. This is called parsing.
- What we do in HTML is the markup of the DOM tree. That’s why HTML is called markup language
- DOM tree is a structure of a webpage with elements, attributes and content(text)
- We can change the DOM tree through Javascript. That’s why javascript is called DOM manipulator
Javascript as DOM manipulation
Each node is an object with methods and properties.
Scripts access and update this DOM tree (not the source HTML file).This essentially means whenever we open the same html file,we get same page and not manipulated one
Any changes made to the DOM tree are reflected in the browser.
There are 4 nodes? Before that what is the difference between Node and Element?
All elements are nodes with tags.For example,<a>,<head>,<HTML> are elements whereas attribute and texts are not elements but nodes!
The 4 nodes are
Document →Top
Element → <h1>,<p>,<li>,etc
Attribute → class,style,id etc
Text → Contents of element
DOM Queries
Accessing a DOM involves two steps:
- Locate the node that represents the element you want to work with
- Use its text contents, attributes to manipulate the DOM tree.
Methods that find elements(tags) in the DOM tree are called DOM Queries.
Note: Methods are built-in functions in javascript which enables us to manipulate DOM. Please read this
Recap
- Javascript is used as a DOM manipulator
- Manipulation doesn’t change the source HTML file
- Elements in DOM are a subset of Node. i.e Elements are nodes with tags
- DOM’s are accessed through DOM queries(methods and properties) like getElementByID,getElementByClassName,querySelector
I know I have stuffed the whole working principle of a webpage into a single article. Next article we will see why React is needed
Originally published at https://www.pansofarjun.com on February 27, 2022.
