HTML DOM manipulation by JavaScript. . .
Fahad Khan
Posted on September 3, 2020
In Web Development career, HTML
, CSS
& JavaScript
are the core subjects. Without these technologies, We can't develop web content. Before knowing about HTML DOM, we must have intermediate
knowledge about HTML
& CSS
, we must know how HTML works & what we can do with it & also having knowledge of HTML Elements
& Attributes, list is also given below.
On #CSS
side, we must have knowledge about #CSS
Selectors like,
These #CSS
selectors are following the HTML-DOM standard.
Let's move to the main point that what exactly HTML DOM is?
basically DOM stands for Document Object Model you can see the picture below that how HTML-DOM looks like.
OR
Don't worry HTML-DOM is not rocket science it is just a simple way to interact (exchange any kind of data) to HTML page & nothing more! Note: HTML-DOM can be manipulated (insert, delete, update) with any other programming languages too like Java, C# etc. So, now we knew that HTML-DOM is not part of JavaScript language but HTML. In the real-world, we mostly use JavaScript for it because JavaScript has advanced features for developing web content. Actually JavaScript is specially made up of web development. But it is not true that we can only programme web page by JS for short. Well known company Sony has many desktop software products which are written in JS language. Don't underestimate the power of JS.
So, HTML has defined their own Methods
& their properties
to interact with HTML-DOM beacuese HTML-DOM is the part of HTML, we took one HTML-DOM method which is document.getElementById()
& we also took property innerHTML
Actually here we manipulate the HTML element <p>
with attribute id
& its value p-tag
& value
is the property of id
attrubute. Now, see the reslut of same code but on browser side.
If you fully understand the HTML-DOM manipulation you will be able to understand the hierarchy of HTML page & you can easily play with HTML elements in JavaScript
& CSS
. Furthermore, HTML-DOM is a way to play with elements according to your imagination. In this article, we have just discussed about HTM-DOM Manipulation only we didn't study all the methods and properties. You can study in-depth about HTML-DOM
.
https://www.w3schools.com/js/js_htmldom.asp
Posted on September 3, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.