What is the need for React?
'Necessity is the mother of invention' if so what is the necessity for React?
Have this in your mind!
HTML - Structure of a page
CSS - Decoration of a page
JS - Behaviour of a page
So what is DOM?
DOM is Document Object Model.
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
So DOM is an object-oriented representation of a web page.
They are represented by HTML(Markup)
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)
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
Element --> <h1>,<p>,<li>,etc
Attribute --> class,style,id etc
Text --> Contents of element
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.
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