DOM Terminology: Nodes, Elements, Attributes, and Properties

本站添加: 2026-05-31

[00:00:00]in our previous videos we have used terms like node elements attribute and properties in this video we will go ahead and try to understand what is the difference between node and element and attribute and properties so first we'll focus on node and element when we write html browser converts that into a structure known as dom tree and dom tree consists of multiple nodes like here document head title h1 and body all these things are nodes so to understand node and element let's go ahead and look at an example everything we write in html gets converted to node it can be elements like head or a comment that we write in html or even enter that we press just for the space so these all things are nodes elements are special type of nodes that can only be specified using html tag something like h1 h2 p div and script but node can be anything it can be a html tag it can be comment or the space to understand this properly we'll go ahead and select this div element with id of main just look at this in object form we'll go ahead and do dir and press enter here we know that every element has a special property called children there is also another property called child nodes let's try to compare them so when we compare them we can see in children we can see there are three children but in our child node we can see eight child nodes the reason we can see there is only three children is because children only returns all the elements so look at this inside our div how many elements are there so we have h1 element h2 element and paragraph element and that is the reason in our children property we can see h1 h2 and p but child nodes return all the nodes that includes comment even the space between two elements so it starts with the text node that is the space between div and the comment the second one is comment so this is the second node the third node is from here to here h1 is the fourth node so similarly in that way there are eight child nodes but we only have three children so child note returns all the node in that element but children only returns a specific type of node known as element node and you will see the similar behavior when you look at something like first child first child returns the node but first element child returns the specific kind of node that is element node and you'll see the same thing here last child returns the node but last element child returns the element type of node let's move on to the next topic that is html attribute and dom properties in general terms attribute and properties means the same thing but in the context of html and javascript it becomes a bit confusing to display anything on the page we need to write html and browser generates the dom based on this html say for example here we have a anchor element and the dom object generated for this contains tag name of a and href of google.com for element nodes most standard html attributes such as href will directly become the property of the dom object here we can see href is an attribute because it is in the html element as soon as this html element gets converted to a dom href becomes the properties so whenever it is in html you call them attributes but in but in dom it is called properties because it is inside an object so let's look at this properly so here we can see we have a div with a class of node and id of main if we select that element and store it in a variable called main and look at that variable in an object form we'll see all these attributes or all these html attributes like class and id becomes the properties of the dom so here if we are looking for something known as id we can go ahead and see the attribute of html element became the property of the dom element and it is the same thing id became id but in lot of other cases like think about class so in attribute it was class but as soon as we see it in dom we can see class became class name in some of the cases attribute will remain same as the properties but in some other cases the attribute can change to some other name in properties like we can see it in class became class name but id remain to be the id in simple sentence we can say the html attribute becomes dom properties let's move on to the last topic that is understanding create element create text node and create comment in node versus element we got to understand that there are different kind of nodes element text and comment so we can use these methods to create those different nodes so let's go ahead and create a element tag so let's go ahead and create an element node to do that we use document.createelement and pass p as a parameter we'll store that in a variable called p now if we access p will see we have a element node similarly to create a text node we'll go ahead and say create text node and pass hello world we can store this in a variable called hello now if we access hello we'll see it is a text node that is hello world to create comment node we use create comment and we'll pass the comment that we want to pass that is like comment text and we'll store this in a variable called comment now if we access comment we'll see that this is how you create a comment using javascript and put it inside html so we created three nodes element node text node and comment node what if i want to put this text and this comment node inside the element that is p to do that we can just go ahead and say p dot append so we need to append the text that is stored in a variable hello and the comment if we do that and access the value of p we will be able to see that p has two things that is hello and comment so in this way you can create different kind of nodes and using append you can append them into dom so in this way we learnt about node and element node is different types of node that is present in dom element is a special type of node that we can define it using html tags attribute and properties attribute belongs to html but properties belongs to the dom created using the html using create element we can create a element node using text node we can create text node and using comment we can create a comment node