JavaScript Tutorial For Beginners #32 - What is the DOM in JavaScript?

Yo Ninjas, in this JavaScript tutorial for beginners, I'll be walking you through what the DOM is and how we use it to interact with our web pages.

The DOM stands for Document Object Model and in technical terms, is an application programming interface. But what that really means is that we can use the DOM to go into our HTML code and 'grab' hold of elements (nodes) and then alter them via JavaScript.

If you have any questions about the DOM, fire away :)

========== JavaScript for Beginners Playlist ==========

========== CSS for Beginners Playlist ==========

========== HTML for Beginners Playlist ==========

========== The Net Ninja ============

========== Social Links ==========

[climbers]

0:10-0:45 The "Document Object Model" is used to add/remove/change content in HTML documents

0:51-1:18 "Document, " is both the "web-page" on your browser & "html file"
1:21-1:57 "Object, " is every HTML element in the document. (JavaScript can call them via: methods/proxies to add, change, or delete.)
--2:26-3:13 "Nodes, " everything that we can change in the document. (i.e. elements, text within elements, HTML attributes)
--3:13-3:58 Examples: changing nodes in the DOM.
2:01-2:24 "Model, " Shows how the objects are laid out in a hierarchy tree fashion (i.e. HTML-->Head--> title & HTML-->Body-->UL--> LI)

[happyrebel]

I'm one of those people who has to take every word apart to understand the content. this vid helped me a lot!

[mrskwrl]

Finally, an explanation that makes sense. It's incredible how vague and simply bad the definitions and explanations online are.

[shubhsheth]

Dude your videos are awesome this is a perfect start for someone who is learning JS, Thanks Alot!!!

[steveohare]

This was brilliant. I'm just getting into react, and many of the videos I've watched through all these terms and concepts at you without explaining them. This material is simple... when explained.

[ronimenkin]

finally a normal explanation online, i tried reading a lot about the DOM but no one bothered to explain what each word means, like document equals web page, and objects equals each element of the page, thanks for your effort, and love your accent

[sparshgupta]

short and to the point video. that's what all the programmers want

[Jacob_EstateAgent]

man i have no words, just very well explained, its a crime to watch it for free

[Bergamoism]

Every video I've seen from your channel so far deserved a thumbs up. Great job!

[itis]

this series gives me hope that i can actually learn this stuff. i'm pursuing coding as a hobby, and i'm realizing there are no short-cuts. this series of tutorials is really well made, and easy to understand. i hit a wall with the DOM. But am re-watching until i get it. so, thanks for this great channel. :)

[ranafaisaljoyia]

love from pakistan, stay blessed dear teacher

[renukagargicollege]

Thank you for this brilliant tutorial, i will be always thankful for the information you have given me.

[RahulSingh-nfpz]

Thanks bro for 👍❤️ use full short summary Of Dom

[Navak_]

ok the DOM is just the script that makes the webpage interactable

a static webpage is like an npc with no AI script -- just exists, does nothing
the DOM is to the webpage what the AI script is to the npc -- brings it to life, allows interaction

[tommyh]

it's great video, I didn't notice DOM was a kind of API before! You are genius!

[mrgrade_]

this is best DOM video i've seen so far, great Job!!!

[nourahaldahash]

awesome!!!! I always wanted to understand what does DOM word mean exactly!

[anonymousgod]

The intro bell sound/screech nearly made me lose my losing ability. Please change that sound. #Good Negative Feddback

[joyprecious]

Dude you explained it so well, thank you. It was simple and easy to understand.
Thanks again.

[shawnzain]

I think that this here should have had a separate playlist. The DOM is just so massive in terms of content and methods that you can call on the nodes, etc.