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
Top comments (4)
Thanks for the article. I created htmldom.dev to share the most common DOM manipulation tasks. Hope this is useful as well.
Yes! I have visited htmldom.dev, it was very good and detailed content. I will share it to my colleagues
Thanks for this article. I know you really only touch on one selector here but there are so many methods available to manipulate the DOM in JavaScript now. Once upon a time, doing this without jQuery was incredibly laborious, but now it is really easy and powerful. Hopefully you'll keep sharing about it.
On another note, I am running a free online meetup specifically on this topic featuring Edidiong Asikpo as the speaker. You can check it out here: cfe.dev/events/getting-started-wit...
Yes! in this article I have already told that we took only one method to interact & manipulate with HTML-DOM, the basic idea is about to be aware of HTM-DOM manipulation and a little bit of relationship between HMTL & JavaScript. By the way rest of the other things like the variety of
Methods
&properties
is the part of JavaScript by manipulating HTML-DOM with different techniques. And thanks for the invitation, glad to attend meetup with dev buddies!