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

yo what's going on guys you're watching JavaScript for beginners less than 32 and in this video we're going to talk about the Dom Wow alright so what is the Dom well the Dom is just an acronym and it stands for document object model now in technical terms you're going to find descriptions like it's an application programming interface but what that really means is that we can use the Dom when we interact with webpages and when I say interact and mean we can add content to a HTML document we can remove content from a HTML document and we can change content on a HTML document all of that interactivity we can do via the DOM and we can do this on the fly as your web page is being loaded or viewed in a web browser so working through the Dom one component at a time first of all we've got the document right and the document is just the web page now it doesn't matter whether you view that web page in a browser like this on the left or in your text editor on the right we'll see two different things it's the same thing it's just the document and typically speaking when we do web design and web development that document is a HTML document so when we say the document in regards to the Dom we generally mean the HTML document the next component is the object now in Haiti ml pretty much every element within your document is an object that means the head tag is an object the body tags an object the UL tags an object the P tags an object a tags span tags div tags any tag in your HTML document is an object in the eyes of the DOM and we know by now that JavaScript works very well with objects we can call methods on objects we can call properties on objects so we can use those objects in HTML all those tags to call methods on them to change them delete them add to them etc and finally we come to the last component which is the model now the model basically describes how these objects are laid out in a tree fashion much like this diagram we've got the HTML at the top underneath that have head tags title tags body tags ul tags div blardy blardy blar it's all displayed in some kind of hierarchical tree so that is one aspect of the model it describes how those objects are laid out but we can take it one step further and we can introduce nodes and yet nodes are pretty much anything we can change in a HTML document so yes these are all nodes these objects are these elements they're all no it's within the DOM and we can grab each one of these nodes and change it but also the text within these elements are also known so the Li tag is a node but the text within that Li tag is also a separate node right and we can grab hold of that separately and change it and finally HTML attributes are also know so when they have a href attribute on a particular tag or a class attribute or a styles attribute and we can grab hold of all of those individually as well they and nodes so what can we do with the Dom well we can change these nodes we can interact with them right and a few examples are here we could change the text node within h1 tag right we could change the background color of an element node we could animate the logo node from the left to the right so that's going to be an image node right we just animate that from the left side of the document to the right side of the document we could expand the height of an element node when you click on it for example you might have a bit of text then a read more link below if you click that link it expands the height of that element node so you can read more plus we can do tons of other things with the Dom as well animations validations tons of other cool stuff and we're going to go into a bit of that later on so that pretty much sums up what the DOM is and if you have any questions feel free to ask down below I'll answer any questions also if you enjoy these videos please like share and subscribe and I'll see you guys in the next one where we're going to take this one step further

Channel: The Net Ninja

Views: 144,213

Keywords: javascript, javascript tutorials, javascript tutorial, javascript tutorials for beginners, js tutorials, js tutorials for beginners, tutorial, javascript lesson, javascript lessons, javascript lessons for beginners, js lessons, introduction to javascript, DOM, Javascript DOM, JS DOM, what is the DOM?, what is the DOM in javascript?, the DOM in javascript, HTML DOM, Programming DOM, Document object model, what is the document object model, javascript document object model

Id: H63dVFDuJDM

Length: 4min 31sec (271 seconds)

Published: Fri Sep 04 2015