What is DOM

Welcome to a youtube channel dedicated to programming and coding related tutorials. We talk about tech, write code, discuss about cloud and devops. That’s what we do all day, all year. We roll out a lot of series and videos on our channel.
All the learning resources such as code files, documentations, articles and community discussions are available on our website:
chaicode.com/
You can find our discord link, github link etc on the above website.
Twitter/X link: x.com/hiteshdotcom
Discord link: hitesh.ai/discord
Learn React with 10 projects: • Let's learn react from...
Learn Docker: • A practical guide on D...
Learn Kubernetes: • Complete Kubernetes Co...
How does a browser works: • How does a browser wor...
How nodejs works: • How node JS works | En...
Learn Redux-toolkit: • Learn Redux Toolkit in...
Learn NextJS: • Nextjs Full stack course
Learn Typescript: • Why to learn Typescript
Learn Javascript: • Welcome to new JavaScr...
Learn React Native: • React Native Mastery: ...
Learn Zustand: • React state management...
Learn Golang: • How to get started wit...

[@nicholasprod2012]

Explained DOM in 10 minutes what a udemy course did in 2 hours. Thank you.

[@KasperMcKay]

You too bro?

[@siddiquahanjum1347]

totaly true man

[@haroldcjennettiii]

Came here to say the same thing.

[@golden4593]

Hmm I always take courses off udemy and never had a problem with the instructors explanation

[@WeebsWorld]

Lol, you haven't even used Udemy I guess, because the Teacher there explained it in 7 mints. You wanna appreciate people go for it but don't defame others.

[@34521ful]

I really like your teaching style, you actually spend time explaining it in a really simple manner with many examples for reassurance. Great job, keep up the good work mate.

[@shubhamkumarsingh8224]

Waow .... so simple ... so easy to learn it ..........thank u ..again.. sir .....

[@user-bf5do2yo8l]

the greatest guy is who can explain a hard concept clear and simple

[@saurabhkanswal7954]

Hey hitesh congratulations for this milestone. I am happy for you💛 your 3546th subscriber

[@mahmoodkashmiri]

Oh yes! Wait is finally over... There we go DOM THANKS sir for amazing content

[@tkssharma]

Watch 1000+ Tech Videos from My channel talking about Everything in Javascript Here is the playlist for React JS kzbin.info/www/bejne/kIjUl3R6mJJjgZo

[@2013DNA]

..explained DOM in less than 5 minutes and did not make my head spin..lol Thank you so much!

[@abhijitthorat9296]

You make teaching and learning easy bro.. 😘

[@IsabelZamudio97]

Your explanations are to the point and helpful. Thank You!

[@waynewalgenbach3322]

my fav youtube friend :D You Awesome ! looked all over and read the same, still confusing explanations. still like "I DONT GET IT" ... BUT then i found you! DONE! :D strait to the point and CLEAR AND SIMPLE. takes a simple thing and explains it. YOUR THE MAN

[@shpendsermaxhaj7062]

Liked, subbed, and thanks a lot. This solved my question, which was: Why we do have to use DOM when we can directly go to HTML or the particular element and change it. But as I've seen on this video, it's just an easier way to manage, manipulate, see your structure, so it's like a management tool. This video solved my question.

[@VarshaSingh-ye9qv]

Fabulous explanation. Thanks :)

[@ayushmanbt]

Before I was struggling with understanding dom.. But you made this easy to understand.

[@sathyamadhavan]

Amazing Hitesh, explained it in very simple example, thank you.

[@srujan099]

my whole doubts in DOM are cleared in 10 min 💥❤️

[@pavantejavydhik7354]

hey Hitesh a big thumbs up! in 18 min you hit 180+ views . the only potential is your tendency to teach is our great motivation for Lear code, thanks much for contribution, pls keep encouraging .

[@Steve-pm1zy]

You have no idea of how much this video helped me! Everyone else be sounding like Einstein. Thank you for such a simple explanation

[@harynka5706]

Thank you a lot! I've found this video after hours of trying to understand this concept. Now it seems clear.

[@tkssharma]

Watch 1000+ Tech Videos from My channel talking about Everything in Javascript Here is the playlist for React JS kzbin.info/www/bejne/kIjUl3R6mJJjgZo

[@aliuyank7377]

this man is a legendary king.

[@sangtran545]

Thank you for your simple explanation

[@geekyboy7725]

It's so simple but sounds scary

[@cubedev4838]

Amazing explanation!!

[@kmr_chan]

Loved your video ...awesome

[@aazammazaa]

Simple and clear, Thanks :)

[@alex19991014]

That's very clear! Thank you!

[@adamliberov9639]

It's helped me alot, thanks...

[@nayandey9112]

It seems clear to me now.Thanks a lot

[@MegaSpiderpunk]

My dude. You just earned a subscriber today.

[@MrDavid123w]

Thanks for the simple answer

[@musicforsoul123]

Thank God I got this video.... I was so confused! !!

[@priyanandinijain9467]

Thanku sir for great explaination.

[@KingUnity22]

Thanks for the explanation.

[@mahmudulhasansohag4037]

Thanks , this is now very clear to me

[@Mrs4alonangel]

Thanks for the video but just a little fix about the part you tried to print the url actually printed undefined. For printing - console.log(document.URL); or console.log(document.URI);

[@sabrinamitra8612]

Great video! Thanks!

[@marcelvarela3118]

Well explained!

[@sudeepmahato4967]

I was struggling to understand DOM from last 6 months, but this video made me understand DOM within 10 mins. Nice way to explanation. It would be helpful if you uploads full courses videos like react js or node js or angular in udemy or udacity.

[@HiteshChoudharydotcom]

Available here courses.learncodeonline.in

[@feiyucai5494]

7:38 It clearly said document.documentURL is undefined from line 1 on myscript.js...

[@alexandreboyon2871]

"console.log(document.documentURI);" should work! With an uppercase 'i', not an L

[@wovilearn5747]

Use "document.URL" instead

[@codigosencillo8981]

In simple words is a tree based on nodes, each node is an element.

[@balneetkaur2043]

Heartiest thanks to you sir ..😇 Whenever I wanna clear my concept i always.. Prefer to watch Ur videos at first as its always very helpfull(forSure)..!!! & your way of teaching is very APPRECIABLE .. simple+unique 😊😊 .. !!

[@tkssharma]

Watch 1000+ Tech Videos from My channel talking about Everything in Javascript Here is the playlist for React JS kzbin.info/www/bejne/kIjUl3R6mJJjgZo

[@sumitsharma8747]

Thanks for the amazing js series ... This is the most easy way to understand DOM please continue the same.

[@tkssharma]

Watch 1000+ Tech Videos from My channel talking about Everything in Javascript Here is the playlist for React JS kzbin.info/www/bejne/kIjUl3R6mJJjgZo

[@ayanasanthosh3334]

i was so confused...thank you so much

[@Jonnhy0989]

Thanks a lot! Very clear.

[@xinranyu1684]

Great video!

[@thisaraharshana2168]

Thank you sir. its very very clear

[@samosrecaipozitiva1764]

this man is true hero :D

[@mfklogsaif]

Excellent!

[@DeepakKumar-uo5zu]

hi hitesh where is your second video related to dom pls provide a link

[@KidsPoems274]

NIce Explanation

[@user-uz6xv4mw6p]

Fantastic

[@aceoneeve1562]

sir , I hate CS for my life until i found you Salute sir ,

[@EXPERIMENTSHOW.]

thanx bro to save my time

[@slowedandreverbgirl]

I only knew document.getElementById() before this tutorial. Never knew we can do this much with "document". Thank you, Hitesh. This really helped.

[@suryasikharej5511]

you are awesome sir thank you so muchhhhhhhhhh

[@EsenJolie]

Thanks bro 🙏😌

[@arnabchakraborty246]

Thank You very very much sir.........

[@blaublue624]

Thank you!

[@AW-ws5cf]

thank you very much very usefull

[@dev_casper]

Dear.. Which software do you use for coding.. Im I guess , sublime?

[@ramusesandasari8451]

Awesome

[@haythamkenway8343]

I think the video is quite misleading. DOM means Object model(representation) of the Document(The Website). It is basically a medium(API) by which we can interact with a website using javascript. Because the HTML of a website is turned into javascript objects under the hood in a tree-like model. Truly speaking DOM is separate from the javascript language itself. We can see the object representation of the document object by writing console.dir(document). Google Chrome just abstracts away the complexities if we write console.log(document).

[@Mike-vj8do]

If i'm on a website and click a button, the html never actually changed right? Even if i click a button right? Thank you for your help!

[@paankouri7511]

Great...

[@satyapradeep5812]

Hi Hitesh, Can you make ReactJs and NodeJs Videos also

[@soumyamandal4483]

Sir,its help me a lot...please make a video abou html class,id,name,value related..

[@stefanogpixels]

So this make sense, but when are you gonna use them? Still confused

[@DheerajRijhwani]

A video on AJAX.

[@Bisibletoanyoneonyoutube]

Mr. Hitesh why this video is not included in you js playlist???

[@mutaz9025]

this is very simply more than udacity course .

[@appaluza1988]

thank you!

[@prabinlamsal5125]

Thanks a lot

[@dharma01v]

Thanks!

[@barbobrien2097]

how can i get drop-down hints? very useful

[@asimshrestha1732]

Sir this tutorial is so good . Sir can tell how to setup the golive and open the js file

[@c-mmon2257]

"How you are structuring the web elements that your Document Object Model"

[@yasak6476]

Thank u

[@lb9915]

thanks!!

[@aminameera9001]

helped a lot tnx

[@user-qu4wb5qv6n]

Finally an indian with understandable english, amazing keep going 👌👌👌

[@user-pu8ds4ey5t]

you can type js code in the console directly, so you don't have to write "console.log(...)" in

[@itsinthewater6531]

Great video. Do you have a tutorial on how to fix page speed error - Avoid an excessive DOM size - For non-techies.

[@joshibhargav20]

Thank you very much man! this is pretty helpful. Something which I was searching since long, but didn't find anywhere. You mentioned exactly what we were looking at. By the way, when I am doing audit using Google Lighthouse in Chrome Dev Tools, one of the performance audit parameter is "Avoid excessive DOM size". It mentions ideally maximum tree depth should be 32 and parent-child elements should be fewer than 60. I wanna work on this; could you guide how can I get an overview of all these DOM hierarchy?

[@tkssharma]

Watch 1000+ Tech Videos from My channel talking about Everything in Javascript Here is the playlist for React JS kzbin.info/www/bejne/kIjUl3R6mJJjgZo

[@shauryaverma8780]

@2:52 you can use window key + z to use word wrap

[@NewLondonMarshall]

He's on a mac though unfortunately!

[@skhossain4116]

So in simple words: *How you structuring your web elements that is called DOM.*

[@skhossain4116]

@@bobbymidha3901 Really ?

[@bobbymidha3901]

@@skhossain4116 joking

[@mauriciolandos4712]

@@bobbymidha3901 did you get it right?

[@BangMaster96]

I just hate textbooks now, KZbin has provided so much free and easy to understand tutorials, textbooks fail to explain so many easy concepts to students. A simple example is better than a thousand words in a textbook.

[@kirthikas4940]

Well Explained. Thanks. What is virtual DOM?

[@zubair_borkala]

In short, The HTML DOM is a standard for how to get, change, add, or delete HTML elements

[@shipraagrahari3774]

Hiii Hitesh...you are doing fabulous job, I do like all your videos they all are relevant and helps me in lots of projects but do you any website or channel where we can discuss some of the issues we get. Like right now I am getting issue in one of my project built on angular and I need help to resolve that issue as soon as possible.

[@HiteshChoudharydotcom]

I usually prefer to take entire projects because to resolve such issues, I need to understand entire way of your code writing style and then fix it. This is like double work. But surely you can ping me at fb.com/HiteshChoudharyPage

[@shipraagrahari3774]

Hitesh Choudhary Ok no issues... thanks for replying...n keep posting videos like this, you are very good at it.👍

[@yashwardhan9014]

Sir in my vscode live server is not working .What should i do?

[@diveekkumar2590]

Hello Sir, add this video in playlist its missing over there...!

[@KingUnity22]

When you console logged the Document URL, it actually returned undefined.

[@hamzafaysal909]

why this video is not include in the JS playlist?

[@samuelmatheson9655]

//which is better const pannel = dcoument.getElementById('pannel'); function showpannel(){ pannel.style.display="block" } //or is it better to just function showpannel(){ dcoument.getElementById('pannel').style.display="block" }

[@mahmoodkashmiri]

Hair style changed!

[@HiteshChoudharydotcom]

Just like my t-shirt, I don't give much thought to looks :)

[@funplace3]

Which editor is this?

[@disha2932]

Visual Studio Code

[@simonllovefootball]

how does the keyword "Document" know to refer to index.html?

[@Agorila09]

What editor is that?

[@Divinecalls]

code.visualstudio.com/download

[@bojiun1377]

What does that 'model' mean?

[@shrivatsadeshpande5633]

Hello sir my live server is not working.i installed it but as i clicked on "Go live" the file is not opening in my browser(my (chrome) is not opening)??? someone help me !

[@rajchhatrala5988]

which text editor do you use

[@DheerajRijhwani]

Raj Chhatrala VS Code

[@rajchhatrala5988]

Dheeraj Rijhwani Is it free, how can I download it.