DEV Community

Cover image for HTML DOM manipulation by JavaScript. . .
Fahad Khan
Fahad Khan

Posted on

HTML DOM manipulation by JavaScript. . .

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. Alt list of HTML Elements & Attributes
On #CSS side, we must have knowledge about #CSS Selectors like,
Alt CSS Selectors
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.
Alt HTML-DOM
OR
Alt HTML-DOM

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
Alt HTML and JavaScript source code
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.
Alt HTML JavaScript Code
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)

Collapse
 
phuocng profile image
Phuoc Nguyen

Thanks for the article. I created htmldom.dev to share the most common DOM manipulation tasks. Hope this is useful as well.

Collapse
 
fahad07_khan profile image
Fahad Khan

Yes! I have visited htmldom.dev, it was very good and detailed content. I will share it to my colleagues

Collapse
 
remotesynth profile image
Brian Rinaldi

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...

Collapse
 
fahad07_khan profile image
Fahad Khan

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!