DOM Manipulation | Part-1
Let’s start this one by learning “What actually DOM is?”
What is the DOM?
In simple words, DOM is the thing that gets generated after your browser parses the HTML that it gets.
That thing is a tree-like hierarchical structure of nodes (HTML elements).
The process is somewhat like this:
Thus, DOM is not the HTML code that you write, but the thing that gets generated after your HTML code gets parsed by the browser.
How can we benefit from the DOM?
DOM stands for “Document Object Model”.
Whenever an HTML document is loaded into a web browser, it becomes a document object.
The Document Object Model (DOM) represents that same document so it can be manipulated.
The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript.
In total, DOM gives us an object-oriented representation of the web page, which helps us to dynamically modify the web page (indirectly, through the DOM), with the help of scripting languages like JavaScript.
What is BOM?
BOM stands for “Browser Object Model”.
Just like the DOM, BOM allows JavaScript “to talk” to the browser.
All the global scoped variables, objects, functions automatically become members of the window object.
Even the document object (of the DOM) is a property of BOM.
Some technical terms…
- In the HTML DOM, everything is referred to as a node.
This means, HTML DOM is composed of units called nodes.
For example:
1. The document (web-page) is a document node.
2. All HTML elements (<head>, <body>) are element nodes.
3. All HTML attributes (<input type=“text” />)are attribute nodes.
4. Text inside the HTML elements are text nodes.
5. Even, the comments are comment nodes. - In the HTML DOM, HTML elements are referred to as Element Objects.
- A collection of HTML elements is referred to as a NodeList object (list of nodes).
That marks the end to the theory part.
The next part i.e. Part-2 will be all about the implementation side of DOM Manipulation.
Ciao…
