Javascript Document Object Model - DOM

DOCUMENT OBJECT MODEL

Java script Document Object Model- DOM

(00:00)

Hello guys welcome to our series Java script.

In our last segment, we saw about Java script’s screen objects like how we can get resolution of our desktop, mobile, Ipad or whatever device we are using with help of Java script like width, height, color, pixel etc.

so we saw all these in our last segment through screen object,

Our today’s segment is very important because document is also a part of our BOM, browser object model.

but document in itself is a complete model, document object model, we call it DOM in short.

 Whenever we open browser let it be Google chrome, safari, Microsoft edge or any browser, when we have not run any program,

that time we can see a blank screen, completely white portion can be seen,

let’s say, I run a program but its body is empty then in that case in my dome we don’t have any html element,

but if I add any element,

let’s say I add p, then p will be shown where in my browser window?

How will it be rendered in my browser?

So all the knowledge behind it,

all the architecture behind it comes under document object model, like how our html elements are rendered in our browser?

Placed at different positions.

So let’s start with our today’s segment, document object model.

As we can see here,

“document object represents the whole html document”,

means the different objects which we had for browser object model like navigator, history, window and screen,

similar to that we have document object.

but document object deals with html elements, all the elements which I will add in my browser in my program, and how to show those elements is defined by DOM.

“When html document is loaded in the browse, it becomes a document object”,

means as soon as all the html elements like p, div, input, label comes in my browser once after that they become object of document,

so if you have completed CSS course of LearnVern then,

you must know whenever we have to select any element then we can select it with help of id, class and element,

but in Java script, we work on that as an object,

means if we have taken an element then as an object how to use it is taught to us by document object model.

It means our elements are already elements,

but once they are added in the browser,

 they act as objects of the document.

When these elements behave as a document's object then we can apply all the object related properties, methods,

so let’s see further,

“it is the root element that represents the html document”.

It means to show up html document who will be the root, DOM, document object model becomes the root.

Document object model has its own properties and methods,

with help of these properties and methods,

we can add our html dynamically in browser,

For example if you have attended our CSS course then,

in that we had one segment called visibility,

in visibility with help of Java script,

we hid and showed a div,

it means if we have to perform any dynamic task like hiding and showing is a dynamic task.

So if we have to perform this task then we can do that with the help of Java script.

Clear, so far?

It means even that time we used Java script’s get Element by id method,

so if you have to perform any dynamic task in our browser with html then, you can use Java script,

but in Java script what can you use?

i.e. DOM, Document object model,

when we have to use any object of window we can use it by window dot,

we can use it without window also,

The same concept applies here also, we want to use a document object and its properties and methods. We can simply write a window dot document and do that.

(05:15)

For the document object model here a graph is shown, we saw the same graph in BOM also, what happens in DOM?

In document, we have many sub portions,

we have anchor tag, form tag, we have link tag in head,

now in form tag, we have different things like text, text area, checkbox, radio button, selection means drop down button,

in select we have option tag then we have tag for reset and we have tag for button,

these all are tags,

 Now what does this architecture and graph define?

This defines our properties,

it means, whenever we have to access any element then we can access it through a document. Let’s say, if I want to access form, then how can I access it?

we can write document dot form,

whatever our form’s id or name we will use that, so document dot form name dot if I want to get value of any of these input type and I want to modify these through Java script then,

document dot form name dot then whatever our input element is its name and through this I can get the value,

here all these things act as an object independently and through a document object, I can use any element.

Here an example is given to understand a document object, we are explaining the same thing which we did in the graph just now,

like here on click of a button, I want to print whatever name I have given input.

so how can we do that?

Let’s open sublime text, this is our demo to show how a document works?

(7 seconds pause ;typing)

Example Document Object Model,

(6 seconds pause ;typing)

now in this, what will we do?

We script separately and I want some data in body too,

so for that I will generate a form,

form and in form,

when we conducted html course then in html course we used name very less,

we mostly used id or value in attributes,

when we will work with DOM in Java script we will use name also,

so let’s say I will give name to my form so name property, form 1.

Now in this, I want to enter something in input field and then when I will click the button whatever is written in input field will pop up through alert,

so let’s say,(4 seconds pause; typing)

I write enter your name and then,

here input and in input, we have two things type and name,

So let's say I will write text in type and here I will write name, which means our attribute is name, so I will keep here name and save and we will run this program.

so you can see here it is written enter your name and here it is empty,

Now, what will I do?

I will add a button here, so br (4 seconds pause; typing)

input type equal to B U T T O N, button name,

now we have to name all those things whose value we want,

If I don’t want to use button’s value then I don’t need to give name.

So simply I will write type equal to button, value equal to click me,

so that whatever we will write here will be shown and in this I will keep an on click event.

so with help of that data in our input field will be shown, show name.

now this is my function,

so if I save this and run here we can see enter your name and after that click me button.

 We got two things okay.

So now I will implement this showName method,

so here in Java script I will write my function, function showName…

 now in this what I have to do?

I have to get the name which I have written here from user, so I want to print this and on printing I want to show it in alert box,

so let’s say, I will take a variable name, so var name equal to..

and now DOM will come into picture,

if I want data from any element kept in my browser like what data is kept in that?

What is the current status? What is its color type? Is CSS applied on that?

All these datas if I want then I can use my document object,

so currently, if I want to check the data in this input field, if I add abcd here,

if I want to perform any operation on this then I will require this data so how can I get it?

so I can get that with the help of document object,

so here I will write document dot and what is my form's name

so form 1 dot and what is my element’s name?

name so form1 dot name dot value,

here at the end only value is constant, whereas form 1 is my form’s name and name from my elements and my input field’s name is name

so here name. so whatever data we have will come in name.

(11:58)

So I want to check whether correct value appears here or not,

so here I will write (5 seconds pause; typing) alert .

(8 seconds pause ;typing)

welcome and whatever my name is , I will save this and reload,

and here I will write a b c d and on click you can see here in pop up whatever data I have passed here is showing me here.

Let’s say I pass my name here….

So what am I getting here?

Welcome Joel Christian, means whatever name I have passed I am getting that in my pop up.

If I am passing any data between 1 to 0,

then here, I will get 1234 till 0.

so whatever we are passing here will be shown in my alert box.

So here, what have we implemented?

So here with the help of Document object the elements which are rendered in our browser like input field and button,

these two things are rendered here,

not only these two things but here form is also rendered

and in form,

We have input field and one input field is text and one input field is a button.

So the two things are the input field and button which are being rendered.

If we have to access that, modify that then we will use our browser’s document object model, so this was a demo like how we use document.

In our next segment, we will see different properties and methods related to document.

In today’s segment we will see only two methods because here from the table we have id, byname, tagname, and classname so for that we have a different segment for that as they are very important object methods.

In today’s segment, we will see only write and writeln,

if you remember then, in all segments till now we have used document dot write and document dot writeln ,

which indicates if we have to add any line in our browser through Java script then we add it through either write or writeln.

Now, what is the difference between write and writeln?

With write we show a string in document and if we have taken writeln then there will be some space between two strings.

Like here, if I add In script document dot write welcome to learnvern so here you can see welcome to learnvern is written,

now I will convert this in header( 14 seconds pause ; typing)

welcome to learnvern, so here we have a form so you can see this is our write and if I have to add something else other than, write so let’s say here I have to add something through Java script,

document dot write and now I will use ln so (10 seconds pause ; typing)so at the end, we have form ends here.

(15:53)

Now, if I have to add br then, here two times… and after adding br form ends here.

So at one place we have taken document dot write and at one place we have taken document dot writeln .

So when we conducted an array, we saw when we add ln then between two data like 1 2 3 4 a space is added.

so writeln is used when we have two things to print then writeln will add space between them.

If we write through document dot write then things will add after one another, so this was difference between our document methods write and writeln,

So you can see, here if we want to write anything on a document, if we have to add any string then we have facility of write and writeln.

Our next methods i.e. get Element by id, by name, by tag name, by class name

that ,

we will see in the next segment.

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 are going to continue our methods only, document object’s method and after that, we will see properties also.

So guys, we saw about why document or DOM is important in Java script

We have seen a dummy sample program.like how our html elements are rendered in the browser?

How can we access them?

In the next segment we will see methods of document object.

Thank you.

(video duration- 17 minutes 36 seconds)