Javascript Document Object Methods

DOCUMENT OBJECT MODEL

JavaScript Document Object Methods

(00:00)

Hello guys, welcome to our JavaScript series. In our last segment, we saw about JavaScript’s Document Object Method, like how html elements are rendered in browsers through JavaScript, How document is generated? We also saw an example of how we can get a name if we have added that in the input file and how we can get its values. So ultimately here we are getting values of our element through object, so we saw all this in the last segment.

I hope you practiced the practical which we did in the last segment. Let’s move further in our today’s segment. We are going to continue our last segment only of document object methods. In the last segment, we saw two methods i.e. write and write L N method and whenever we have to show something throughout our JavaScript program in our browser window we use document’s write and write L N method. Today we are going to see its advanced methods. All of these methods which we are going to see today are very important. We can get our elements inDIVidually, very properly through these methods. We can fetch these and modify it, getting its value, applying CSS and changing its design. We can do all of this, with the help of methods which we are going to see today.

Let’s start today's segment. Our first method is document’s "getElementbyID" method, which means if we have taken any element in our browser or our program and if we have given it an ID, what is ID and class? If you want detailed information on ID and class, then you can go through the selector segment of the CSS course on our LearnVern website, where we have explained ID and class in detail.

So here if we have given any ID to our element then we can get that element through ID. In our last segment, we got the value by using document dot form dot name dot value of input field. Let’s say I have given a uniquely IDentifiable ID to that input field, then I don’t need to write document dot form dot name, I can directly get the value of given ID by the "getElementbyID" method. But here, we should know where you have given ID and we should have typed it properly. This will be more clear with an example.

Let’s say I open sublime text, here in html… example (typing pause 5 sec) save (pause 6 seconds). Here we need form and in form in input field, I will write.

In type let’s say, I need a telephone number, as we did in the last example we will do the same as that. So here, in type I will take text and I don’t need name for time being, instead of name I will take ID and in ID I will take telephone number and here, (typing) enter… telephone number 2 times B R tag and my input type equal to (typing) button.. value (pause 6 sec) show contact.. number or on click show and we will create a number named method. We will save and run this program. Here is my program and you can see “Enter telephone number” and this is my text field and my button with “show contact number”.

(05:00)

Nothing is happening on clicking this as we have not implemented an alert box yet. Let’s say, in body, we will add in script, function whatever name we have given here in variable, my variable is telephone number. Now what do I have to do? In the last segment, I got it in this way: document dot form1 means whatever my form’s name is, dot name of the input field dot. In this way we got our value in the last segment. But here you can see I have not given any name to form and in the input field also the name attribute is not there.

So now what can we do here? Here you can see, I have given an ID for input. So if ID is given, then we can use our document’s "getElementbyID" and get our value. How will we write this document dot "getElementbyID" . Here you have to remember one thing, that E is capital, B is capital and I is also capital. So whenever you are typing, keep in mind that whatever spelling you write, type it correctly. In ID, you will add whatever ID we have passed, that’s it and here whatever value is, of our telephone number we will alert that,(typing pause 7 seconds) that’s it. Save.. and you can see “telephone number is object HTML input element”. It means, here we have missed something because of which object is returning to us instead of value.

As I said earlier, here I have used "getElementbyID" . In the last segment when we learnt about D O M DOM, that time I told you whenever we get something with the help of a document object, let’s say I get form or if I get input, then it acts as object. So if I want the value of this object then it is necessary to write dot value so if I write only document dot "getElementbyID" then an object will be returned, that’s why I have written here value.

Let’s say if I save this and reload then I will write here (typing pause 4 sec) okay so now you can see the “telephone number is” and the number which I have passed is appearing here. What have we done here? We did not get the data of input through form, instead we got this by document dot "getElementbyID" . We will move further in our slide, next is document dot get Elements By ClassName. Now what does class name mean?

What is written here? The get Elements By ClassName method is used for selecting or getting the elements through their class name values. So if any class name is given then at as many places we have used that class, then with help of that class name we can get selected value. In CSS, when we conducted the segment about ID, that time we strictly said that if we have to use ID or class, if we have to uniquely identify any element in our browser, then in that case we have to use ID.

It means in the whole program or webpage, only one element will be available with that ID, that means only one ID will be assigned to one element only but if we have to detect more than one element, then in that case, we don’t use ID, we use class. Let’s say we have multiple P tag and we have multiple DIV tag, multiple input tag and we have to give the same type of design so for that I use class. So, if we attach this concept with JavaScript then when I used the last method document dot "getElementbyID", then with help of ID I took one input to whom I assigned ID, then when we will get value through that ID then I will get only one value.

(09:47)

But as we know class is applied to more than one element, so if it is applied to more than one element then I will get values of more than one element then in that case whenever we use document dot getElementsByClassName in DOM, then in that case I will get an Array. As it is written here, “this DOM method returns an Array-like object that consists of all the elements having the specified classname” which means, I will get values from the places where I have used that class name.

So we will take an example to see how we can get values from classname. Let’s say, here as you can see, we have written a program for class name. We have simply written a class for DIVision in “body” and in that we have added a text. So whenever I will get data related to this class in my variable, then whichever text is written here, will show up. For example, we will go in sublime text.. We will copy this same program document dot element here. We have “elements by… class name”. That's it. So remember there we had “get element by ID” and here we have “get elements by class name”.

Here what will I add in form according to our program? Here I don’t want a form, I want a simple DIV. Therefore, I will add DIV, class in which I will write A B C and here I will write some data “This is a…(typing) class”, that’s it. We will save this program (pause 4 seconds) okay now in this a function which we have created we can write in the same function or it is okay if we don’t even write a function, I want a variable X equal to document dot getElementsByClassName. Now which class have I taken here? Class A B C, so I will print that and after this, I have to add whatever I got from class A B C, that I have to add in my browser DOM, so for that I will use alert and I will pass X and let’s see what will I get in X?

Now we will run the program. You can see here what am I getting? I am getting an alert directly in which I am getting an object named html collection and here in DIV I have printed this is a class we are getting that also, okay so let’s say here we will write class and alert, so here we are getting an array. What are we getting? An array object. My data has not been printed directly here. Let’s say I write X dot value here…(typing) then we are getting undefined and then my data is getting loaded. Data is loading later because we have written the script first and after that we have written html, if I write this here then my data will load first okay.

Now if we have to print our data which we got through our class then how can we do that? So let’s say its method is, here we saw we are getting an array through getElementsByClassName

Firstly we know in this X an array has been generated of this class that’s why I will write here 0 so that all the classes A B C which have generated its data has come in this array so if I want to show that in our browser so for that I have to write dot inner text property. Innertext property is a document's property which we are going to learn when we will see properties in document object, but if we have to print the values which we got from class name if we have to utilize it so for that we can use inner text. So if I save this and reload it, you can see this is a class and all my data of class is getting printed and after that my class is also getting printed.

(14:45)

Now let’s say here I write this class three times. This is a class and I will make a change everywhere. This is A B C first time…this is A B C second time.. this is A B C third time, now if I save this and reload then you can see this is A B C first time and all my three values are getting printed and if I have to print this one by one, X of 0 1 2 because we know here an array will be generated. A B C first time second time then third time then it will load, we can use “for of loop” instead of writing it in this way, for X dot length example for value of X dot length, X of value here we don’t need X dot value we need value only…so value dot… innertext first time, second time, third time and here my values are getting load.

Now if I implement the same class again, let’s say class A B C again if I want then I don’t need to change here in code, as many times I will use class A B C that many times our data will keep coming. So this was our”getElementsByClassName”. This is a bit difficult compared to "getElementbyID" because in that we get only one ID and in “getElementsByClassName” we get more than one value so we have to implement it logically.

Let’s move further in our slide. After class name we have “getElementsByName” , it means reference of element will be passed based on name simply class name, if we have passed class and ID, if we have passed ID similarly, if name is given then values will be returned based on name. let’s say as it is written here document dot getElementsByName then, on passing name we will get context of values. Here we will intentionally create such a program in which more than one name has been used like when we generate form. What we generate form, what do we see in it?

When we pass gender in form, we pass values like male female in which, only one name is passed in the radio button as it is given here. If we want data in this way, what will I do? Means the same name is used at more than one place then in which way I will get data? That’s why here we have taken this gender example okay, so this is our program “getElementsByName” save (pause 4 sec)Now what we have to do? We have to generate a form in which we can take more than one gender, so how do we take gender? By radio button because one user can be of one gender either male or female or others, gender can be any of these three that’s why here in form, first is male. What input type will we need for that? Radio, we need a name so we will keep it, gender and value will be male..Same thing we will repeat after B R tag, here we will write female, gender as it is, type radio as it is. Now what do we have to do with this?

Here we need a button because when I click on that button my data will show up in alert, so input type equal to button. As usual we don’t need a name here we need value show data. In onclick, we will show all the elements we have of name gender. That’s why we will generate a “show elements” named method. Here function “showelements” and here what will we do? We will add all gender name elements in function so this line will be VAR X equal to document dot “getElements” we need to add S as there are more than one element so “getElementsByName” and here I will pass my name i.e. gender, now I have to show this.

(20:41)

So first we will “Alert”. “Alert”. How many genders do we have of this name, as this is a small program so we are getting two genders that we have generated i.e. male and female. That’s why when I will write its length, how many genders are available to us? Two for example, total genders available. (pause 4 sec) here we will write X dot length. save. So let's say here I click on show data, so total genders available 2 because the name has been passed at two places that’s why through name, I am getting here how many elements do I have of gender name attribute. that’s why in this program if I have two elements available of gender name so in my X length, I am getting two.

Now let’s say, if I had pass this for first name then here first name would have been written so I will write here first name then I will get only 1 name here, if I have to show the values of X so we can do that as we did earlier, alert values are X is in form of array so X of 0 if I write, so let’s see what are we getting in X of 0? If we don’t get anything we will use innertext , so show data total gender available 2 in values we are getting object so we will use innertext here..Here we are getting values are and after that we are not getting anything, it means on value 0 we are not getting any values. For that, if you have to Identify how to get data? And if you are not getting any answer then you can console it, like if I am not getting any value in innertext, I will comment and console dot log and my variable is object X, so I will console X here, show data. okay I didn’t get any data, but in console we are getting something, so in the console it is written note list i.e. my object x I have two values because we have two values of the same name, of name gender. I will search wherever male is written because my value is male so you can see here in default value I am getting male at one place, second this is input its name text etc data I am getting here.

So from here also you can take data and keep it here. Let's see if I uncomment this and if innertext is not working then I will take the default value in which I was getting male. show data. total genders are 2, values are male okay because we have taken X of 0, you can get values by this way also. So if innertext is not working and if you are not getting value directly then you can console that object and in which property you are getting data based on that you can get value. We don’t need this also, we only wanted to print its length so that we have printed by getElementsByName.

(24:27)

Let’s move further in the slide, our last method is getElementsByTagName, what is this used for? Whatever elements are related to that tag is returned to us. For example if the name of my tag is input then that will be returned means all the input tags will be returned to us. What have we taken in the program? We have simply generated more than one P, means if we want to know how many P tags we have in our current program then how can we do that? With help of getElementsByTagName, the program for this is very simple, as we generated our getElementsByName we will repeat the same method.

First I will remove this form and this function will also be removed for the time being, so document dot getElementsByTagName and we will save this program (typing pause 8 seconds) here what do we want? We want lots of P tags, so let’s say I write P “this is a P tag” and then slash P and now I will repeat this 5 times. Now what do I have to print here? Let’s say I create button input type equal to button we don’t want name we want value count tag number…onclick and we have created function with name count tag.

Now we will write this function in script, function countTag. Now we have to know how many P tags we have used? So for that VAR X equal to document dot getElementsByTagName and here I will pass my tag, whatever tag I have to use that, so I have small P so here I will write small P, if I had input then I would have type input. After this we will alert it , so alert total number of P tags are.. X dot… length save and we will run over program. This is my program. I have taken 5 P tags so are shown here, countTag numbers so total number of P tags are 5 because here we have done selection based on tag. If I remove this and write input then let’s see what will we get? Total numbers of P tags are 1, here I have checked input tag so for input tag you can see in our program we have only one input tag so my answer is 1, I will change this back to P so my answer as I have written the message for P, if I had written for input then I would have get input also.

Let’s say VAR I equal to the same thing input. (typing pause 7 sec) In this only we will add, total number of input tags are (typing pause 7 sec) I dot length okay so total number of P tags are 5 and total number of input tags are 1, so you can see here B R is also printed this means we cannot write B R in alert, so I will remove this B R and we will write and in between, total number of P tags are 5 and total number of input tags are 1. You can see here we have used getElementsByTagName.

So guys in our today’s segment, we used all the methods of Document Object. All the methods are very useful and also very important , all the four methods are important. This is important from an interview point of view and when you are developing a web application you can provide dynamism with help of these 4 methods in your web application.

If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.

 In our next segment, we will see the document object’s two properties.

Thank you.

(video duration- 29 minutes 43 seconds )