Unit – 3

Document Object Model

To create an interactive web page it is imperative that the browser continues to recognize individual HTML objects even they are rendered in the browser window. This allows the browser to access the properties of these objects using the built-in methods of the object.

Javascript enabled browsers are capable of recognizing individual objects in an HTML page, after the page has been rendered in the browser, because the javascript enabled browser recognizes and use the Document Object Model(DOM).

Uses of Document Object Model

Using the Document Object Model (DOM) javascript enabled browsers identify the collection of web page objects (web page elements) that while rendering an HTML based, web page in the browser window.

The HTML objects which belong to the DOM, have a descending relationship with each other.

The topmost object in the DOM is the Navigator. The next level in the DOM is the browser’s Window. The next level in the DOM is the Document.

The DOM hierarchy continues downward to encompass individual elements on a FORM, such

as Textbox, Labels, Radio buttons, Check boxes, push buttons and so on.

Javascript DOM

The Navigator – i.e. Netscape Navigator, Internet Explorer, Opera, so on.

Window

Document

Anchor

Link

Form

Textbox

Textarea

Radiobutton

Checkbox

Select

Button

Understanding objects in HTML HTML can be used to create a Graphical User Interface (GUI) in a web page. HTML is capable of accessing and using a number of objects that actually belong to the operating system. A textbox is used in an HTML form to accept user input.

The textbox is an object, which belong to the DOM. Javascript recognizes a text box. Javascript facilitates access to all the methods of a textbox.

Properties of HTML Objects

HTML objects have a number of properties that determine the behavior of that object. An object’s properties can be references as:

ObjectName.PropertyName

For example, a textbox can have properties like name, size and so on.

Methods of HTML Objects

Methods of objects are used to set or get a value of an object’s property. Thus determining how an object behaves. An object’s methods can be referenced as:

ObjectName.MethodName

Browser Object

The Browser Object Model (BOM) is used to interact with the browser.

When any Javascript enabled browser loads a webpage, the browser automatically creates a number of javascript objects that map to the DOM.

The default object of browser is window means you can call all the functions of window by specifying window.

For example

window.alert("hello javatpoint");

A lot of properties can use to defined underneath the window object like document, history, screen, navigator, location, innerHeight, innerWidth.

Window Object

The window object represents a window in browser. An object of window is created automatically by the browser.

Window is the object of browser, it is not the object of javascript. The javascript objects are string, array, date etc.

Methods of window object

Example of alert() in javascript

<script type="text/javascript">

function msg(){

alert("Hello Alert Box");

}

</script>

<input type="button" value="click" onclick="msg()"/>

Output

On clicking the button

Example of confirm() in javascript

<script type="text/javascript">

function msg(){

var v= confirm("Are u sure?");

if(v==true){

alert("ok");

}

else{

alert("cancel");

}

}

</script>

<input type="button" value="delete record" onclick="msg()"/> Output

Example of prompt() in javascript

<script type="text/javascript">

function msg(){

var v= prompt("Who are you?");

alert("I am "+v);

}

</script>

<input type="button" value="click" onclick="msg()"/>

Example of open() in javascript

It displays the content in a new window.

<script type="text/javascript">

function msg(){

open("http://www.google.com");

}

</script>

<input type="button" value="javatpoint" onclick="msg()"/>

Example of setTimeout() in javascript

It performs its task after the given milliseconds.

<script type="text/javascript">

function msg(){

setTimeout(

function(){

alert("Welcome to Javatpoint after 2 seconds")

},2000);

}

</script>

<input type="button" value="click" onclick="msg()"/>

History Object

The JavaScript history object represents an array of URLs visited by the user. By using this

object, you can load previous, forward or any particular page

Property of JavaScript history object

There are only 1 property of history object.

No. Property Description

1 Length returns the length of the history URLs.

Methods of JavaScript history object

No. Method Description

1 forward() loads the next page.

2 back() loads the previous page.

3 go() loads the given page number.

Example of history object

history.back();//for previous page

history.forward();//for next page

history.go(2);//for next 2nd page

history.go(-2);//for previous 2nd page

Navigator Object

The JavaScript navigator object is used for browser detection. It can be used to get browser information such as appName, appCodeName, userAgent etc.

Example of navigator object

<script>

document.writeln("<br/>navigator.appCodeName: "+navigator.appCodeName);

document.writeln("<br/>navigator.appName: "+navigator.appName);

document.writeln("<br/>navigator.appVersion: "+navigator.appVersion);

document.writeln("<br/>navigator.cookieEnabled: "+navigator.cookieEnabled);

document.writeln("<br/>navigator.language: "+navigator.language);

document.writeln("<br/>navigator.userAgent: "+navigator.userAgent);

document.writeln("<br/>navigator.platform: "+navigator.platform);

document.writeln("<br/>navigator.onLine:

"+navigator.onLine); </script>

Output

navigator.appCodeName: Mozilla

navigator.appName: Netscape

navigator.appVersion: 5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36

navigator.cookieEnabled: true

navigator.language: en-US

navigator.userAgent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36

navigator.platform: Win32

navigator.onLine: true

Screen Object

The JavaScript screen object holds information of browser screen. It can be used to display screen width, height, colorDepth, pixelDepth etc

Example of JavaScript Screen Object

<script>

document.writeln("<br/>screen.width: "+screen.width);

document.writeln("<br/>screen.height: "+screen.height);

document.writeln("<br/>screen.availWidth: "+screen.availWidth);

document.writeln("<br/>screen.availHeight: "+screen.availHeight);

document.writeln("<br/>screen.colorDepth:

"+screen.colorDepth);

document.writeln("<br/>screen.pixelDepth:

"+screen.pixelDepth); </script> Output

screen.width: 1366

screen.height: 768

screen.availWidth: 1366

screen.availHeight: 728

screen.colorDepth: 24

screen.pixelDepth: 24

Document Object

The document object represents the whole html document.

When html document is loaded in the browser, it becomes a document object. It is the root element that represents the html document. It has properties and methods. By the help of document object, we can add dynamic content to our web page.

window.document

Properties of document object

Methods of document object

Method

Description

write("string") writes the given string on the doucment.

writeln("string") writes the given string on the doucment with

newline character at the end.

getElementById() returns the element having the given id value.

getElementsByName() returns all the elements having the given name

value.

getElementsByTagName() returns all the elements having the given tag

name.

getElementsByClassName() returns all the elements having the given class

name.

Accessing field value by document object

<script type="text/javascript">

function printvalue(){

var name=document.form1.name.value;

alert("Welcome: "+name);

}

</script>

<form name="form1">

Enter Name:<input type="text" name="name"/>

<input type="button" onclick="printvalue()" value="print

name"/> </form> document.getElementById() method

The document.getElementById() method returns the element of specified id.

we can use document.getElementById() method to get value of the input text.

Example

<script type="text/javascript">

function getcube(){

var

number=document.getElementById("number").value

; alert(number*number*number); } </script>

<form>

Enter No:<input type="text" id="number"

name="number"/><br/> <input type="button" value="cube"

onclick="getcube()"/> </form> document.getElementsByName() method

The document.getElementsByName() method returns all the element of specified

name. The syntax of the getElementsByName() method is given below:

document.getElementsByName("name") Example

<script type="text/javascript">

function totalelements()

{

var

allgenders=document.getElementsByName("gender")

; alert("Total Genders:"+allgenders.length); } </script>

<form>

Male:<input type="radio" name="gender" value="male">

Female:<input type="radio" name="gender"

value="female"> <input type="button" onclick="totalelements()" value="Total

Genders"> </form> document.getElementsByTagName() method

The document.getElementsByTagName() method returns all the element of specified tag name.

The syntax of the getElementsByTagName() method is given below:

document.getElementsByTagName("name")

Example

<script type="text/javascript">

function countpara(){

var

totalpara=document.getElementsByTagName("p")

; alert("total p tags are: "+totalpara.length); } </script>

<p>This is a pragraph</p>

<p>Here we are going to count total number of paragraphs by getElementByTagName()

method.</p> <p>Let's see the simple example</p> <button onclick="countpara()">count paragraph</button>

Scanned by CamScanner

Scanned by CamScanner

Scanned by CamScanner

Scanned by CamScanner

Scanned by CamScanner

Scanned by CamScanner

Scanned by CamScanner

Scanned by CamScanner

Scanned by CamScanner

Scanned by CamScanner

Scanned by CamScanner

Scanned by CamScanner

Scanned by CamScanner

Scanned by CamScanner

Scanned by CamScanner

Scanned by CamScanner