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

[@nugget-u2u]

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

[@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

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

[@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);

[@2013DNA]

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

[@shubhamkumarsingh8224]

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

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

[@codigosencillo8981]

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

[@geekyboy7725]

It's so simple but sounds scary

[@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

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

[@HiteshCodeLab]

Available here courses.learncodeonline.in

[@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

[@sathyamadhavan]

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

[@saurabhkanswal7954]

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

[@ayushmanbt]

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

[@shauryaverma8780]

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

[@NewLondonMarshall]

He's on a mac though unfortunately!

[@IsabelZamudio97]

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

[@srujan099]

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

[@aliuyank7377]

this man is a legendary king.

[@abhijitthorat9296]

You make teaching and learning easy bro.. 😘

[@Bisibletoanyoneonyoutube]

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

[@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

[@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" }

[@kirthikas4940]

Well Explained. Thanks. What is virtual DOM?

[@barbobrien2097]

how can i get drop-down hints? very useful

[@DeepakKumar-uo5zu]

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

[@alex19991014]

That's very clear! Thank you!

[@itsinthewater6531]

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

[@satyapradeep5812]

Hi Hitesh, Can you make ReactJs and NodeJs Videos also

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

[@HiteshCodeLab]

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

[@sangtran545]

Thank you for your simple explanation

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

[@MegaSpiderpunk]

My dude. You just earned a subscriber today.

[@KingUnity22]

Thanks for the explanation.

[@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!

[@VarshaSingh-ye9qv]

Fabulous explanation. Thanks :)

[@diveekkumar2590]

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

[@dev_casper]

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

[@DheerajRijhwani]

A video on AJAX.

[@BilalKhan-do1xg]

which IDE you were using

[@BilalKhan-do1xg]

@@Divinecalls hello sir, I have a question not about the on discussion topic, well , I am welling to work on web board project including canvas and shape as well, would you recommend me any awesome APIs/library which gonna me easily....

[@BilalKhan-do1xg]

@@Divinecalls I tried both in my project while didn't work well, a moment ago someone told me to look for shv.js api What about svg.js you have any experience with in ?

[@grandhegopichand4374]

Is this similar to stax..?

[@bojiun1377]

What does that 'model' mean?

[@aceoneeve1562]

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

[@priyanandinijain9467]

Thanku sir for great explaination.

[@sabrinamitra8612]

Great video! Thanks!

[@slowedandreverbgirl]

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

[@СлучващотоСеВБългария]

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

[@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

[@adamliberov9639]

It's helped me alot, thanks...

[@牛岱]

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

[@simonllovefootball]

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

[@stefanogpixels]

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

[@nayandey9112]

It seems clear to me now.Thanks a lot

[@zubair_borkala]

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

[@AkhileshKumar-mw2kq]

can someone please tell which script editor is that?

[@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

[@hamzafaysal909]

why this video is not include in the JS playlist?

[@KidsPoems274]

NIce Explanation

[@niketanchandarana]

is it compulsory to use "document" word in console.log()?..sir🤔

[@Akshay-Raut]

Niketan Chandarana if you intend to do some DOM manipulation using vanilla JavaScript then yes.

[@niketanchandarana]

AKshay Raut... Thanks for the answer 😊

[@musicforsoul123]

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

[@MrDavid123w]

Thanks for the simple answer

[@kmr_chan]

Loved your video ...awesome

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

[@asimshrestha1732]

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

[@rajchhatrala5988]

which text editor do you use

[@DheerajRijhwani]

Raj Chhatrala VS Code

[@rajchhatrala5988]

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

[@c-mmon2257]

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

[@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?

[@soumyamandal4483]

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

[@arnabchakraborty246]

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

[@funplace3]

Which editor is this?

[@disha2932]

Visual Studio Code

[@piushsingh6066]

if *title* is not a *direct child* of *HTML* tag object then how *doucment.title* works, it should be like *document.head.title*, just you shown is a *document.head*. Which means there is no parent-child relation just like tree data structure

[@EXPERIMENTSHOW.]

thanx bro to save my time

[@samosrecaipozitiva1764]

this man is true hero :D

[@mutaz9025]

this is very simply more than udacity course .

[@yashwardhan9014]

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

[@ShowBizJunkie]

You said ...now the script is connected... but you did not show how to connect and what to connect to?

[@cubedev4838]

Amazing explanation!!

[@marcelvarela3118]

Well explained!

[@abhijitthorat9296]

Hey I guess you have not included this video in js series.. And there is some problem in sequence of video when we see list of js videos in your channel.. This DOM video is missing and video no 34 and 33 should be interchange

[@mynkprtp]

Document.documentURL returned undefined in ur case sir.

[@aazammazaa]

Simple and clear, Thanks :)

[@Jonnhy0989]

Thanks a lot! Very clear.

[@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

[@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

[@jessmanoj6718]

Do you only wear grey t shirts? is it because u only have 1 shirt if u agree like

[@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 !

[@ayanasanthosh3334]

i was so confused...thank you so much

[@xinranyu1684]

Great video!

[@AW-ws5cf]

thank you very much very usefull

[@prabinlamsal5125]

Thanks a lot

[@ajaywadhwa3398]

Bro you have not included this video in your js playlist 😃

[@mfklogsaif]

Excellent!

[@suryasikharej5511]

you are awesome sir thank you so muchhhhhhhhhh

[@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).

[@KingUnity22]

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

[@mahmoodkashmiri]

Hair style changed!

[@HiteshCodeLab]

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

[@paankouri7511]

Great...

[@shradhapatil8351]

1:00 && 9:08

[@EsenJolie]

Thanks bro 🙏😌