Scribd
Upload
14 views

FSD-EXP-7(JavaScript Pre-defined and User-defined Objects)

The document explains the JavaScript Document and Window objects, detailing their properties and methods for manipulating HTML documents. It provides examples of how to access and modify document elements, retrieve document information like title and URL, and use window properties to get window dimensions and positions. The content is aimed at helping users understand and utilize these objects effectively in web development.

Uploaded by

swethaj789
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views

FSD-EXP-7(JavaScript Pre-defined and User-defined Objects)

The document explains the JavaScript Document and Window objects, detailing their properties and methods for manipulating HTML documents. It provides examples of how to access and modify document elements, retrieve document information like title and URL, and use window properties to get window dimensions and positions. The content is aimed at helping users understand and utilize these objects effectively in web development.

Uploaded by

swethaj789
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

7).

JavaScript Pre-defined and User-defined Objects


A). Write a program using document object properties and methods.
B). Write a program using window object properties and methods.

A). Write a program using document object properties and methods.


Window Document Object
The document object is a JavaScript object that provides the access to all elements of an HTML
document. When the HTML document is loaded in the web browser, it creates a document object. It
is the root of the HTML document.

The document object contains the various properties and methods you can use to get details about
HTML elements and customize them.

The JavaScript document object is a property of the window object. It can be accessed
using window.document syntax. It can also be accessed without prefixing window object.

JavaScript Document Object Properties

The JavaScript Document Object represents the entire HTML document, and it comes with several
properties that allow us to interact with and manipulate the document. Some common Document
object properties are as follows –

 document.title − Gets or sets the title of the document.


 document.URL − Returns the URL of the document.
 document.body − Returns the <body> element of the document.
 document.head − Returns the <head> element of the document.
 document.documentElement − Returns the <html> element of the document.
 document.doctype − Returns the Document Type Declaration (DTD) of the document.

Example: Accessing the document title

In the example below, we use the document.title property to access the property odd the document.

<html>
<head>
<title> JavaScript - DOM Object </title>
</head>
<body>
<div id = "output">The title of the document is: </div>
<script>
document.getElementById("output").innerHTML += document.title;
</script>
</body>
</html>

OutPut:
The title of the document is: JavaScript - DOM Object
Example: Accessing the document URL

In the example below, we have used the document.URL property to access the current URL of the
page.

<html>

<head>

<title> JavaScript - DOM Object </title>

</head>

<body>

<div id = "output">The URL of the document is: </div>

<script>

document.getElementById("output").innerHTML += document.URL;

</script>

</body>

</html>

OutPut:

The URL of the document is:


https://www.tutorialspoint.com/javascript/javascript_document_object.htm

JavaScript Document Object Methods

The JavaScript Document Object provides us with various methods that allow us to interact with and
manipulate the HTML document. Some common Document object methods are as follows –

 getElementById(id) − Returns the element with the specified ID.


 getElementsByClassName(className) − Returns a collection of elements with the specified class
name.
 getElementsByTagName(tagName) − Returns a collection of elements with the specified tag name.
 createElement(tagName) − Creates a new HTML element with the specified tag name.
 createTextNode(text) − Creates a new text node with the specified text.
 appendChild(node) − Appends a node as the last child of a node.
 removeChild(node) − Removes a child node from the DOM.
 setAttribute(name, value) − Sets the value of an attribute on the specified element.
 getAttribute(name) − Returns the value of the specified attribute on the element.

These methods enable us to dynamically manipulate the structure and content of the HTML
document using JavaScript.

Example: Accessing HTML element using its id

In the example below, we use document.getElementById() method to access the DIV element with id
"output" and then use the innerHTML property of the HTML element to display a message.

<html>

<body>

<div id = "result"> </div>

<script>

// accessing the DIV element.

document.getElementById("result").innerHTML +=

"Hello User! You have accessed the DIV element using its id.";

</script>

</body>

</html>

OutPut:

Hello User! You have accessed the DIV element using its id.

Example: Adding an event to the document

In the example below, we use document.addEventListener() method to add a mouseover event to the
document.
<html>

<body>

<div id = "result">

<h2> Mouseover Event </h2>

<p> Hover over here to change background color </p>

</div>

<script>

document.addEventListener('mouseover', function () {

document.getElementById("result").innerHTML = "Mouseover event occurred.";

});

</script>

</body>

</html>

OutPut:

Mouseover event occurred

B). Write a program using window object properties and methods.

Window Object Properties

The 'window' object contains the various properties, returning the status and information about the
current window.

Below, we have covered all properties of the 'window' object with a description. You may use the
'window' as a reference to access these properties.

Property Name Property Description

closed When the particular window is closed, it returns true.

console It returns the window's console object.

customElements It is used to define and access the custom elements in the browser window.
devicePixelRati
It returns the physical pixel ratio of the device divided by CSS pixel ratio.
o

document It is used to access the HTML document opened in the current window.

It is used to get the window items like iframes, which are opened in the
frames
current window.

frameElement It returns the current frame of the window.

history It is used to get the history object of the window.

It returns the inner height of the window without including the scroll bar,
innerHeight
toolbar, etc.

It returns the inner width of the window without including the scroll bar,
innerWidth
toolbar, etc.

length It returns the total number of iframes in the current window.

localStorage It is used to access the local storage of the current window.

location It is used to access the location object of the current window.

name It is used to get or set the name of the window.

navigator It is used to get the Navigator object of the browser.

It returns a reference to the window from where the current window is


opener
opened.

outerHeight It returns the total height of the window.

outerWidth It returns the total width of the window.

pageXOffset It returns the number of pixels you have scrolled the web page horizontally.

pageYOffset It returns the number of pixels you have scrolled the web page vertically.

parent It contains the reference to the parent window of the current window.

scheduler It is entry point for using the prioritized task scheduling.

screen It returns the 'screen' object of the current window.

It returns the position of the x-coordinate of the current window relative to


screenLeft
the screen in pixels.

It returns the position of the y-coordinate of the current window relative to


screenTop
the screen in pixels.

screenX It is similar to the screenLeft property.


screenY It is similar to the screenTop property.

scrollX It is similar to the pageXOffset.

scrollY It is similar to the pageYOffset.

self It is used to get the current state of the window.

sessionStorage It lets you access the 'sessionStorage' object of the current window.

speechSynthesis It allows you to use the web speech API.

visualViewPort It returns the object containing the viewport of the current window.

top It contains a reference to the topmost window.

OuterHeight/OuterWidth Properties of the Window object

The outerHeight property of the window object returns the window's height, and the outerWidth
property of the window object returns the window's width.

Example

In the code below, we used the outerHeight and outerWidth property to get the dimensions of the
window. You can change the size of the window and observe changes in the value of these
properties.

<html>

<body>

<p id = "output1">The outer width of the window is: </p>

<p id = "output2">The outer height of the window is: </p>

<script>

const outerHeight = window.outerHeight;

const outerWidth = window.outerWidth;

document.getElementById("output1").innerHTML += outerWidth;

document.getElementById("output2").innerHTML += outerHeight;

</script>
</body>

</html>

OutPut:

The outer width of the window is: 1536


The outer height of the window is: 816

ScreenLeft Property of the Window Object

The window screenLeft property returns the left position of the current window.

Example

In the output of the below code, you can see the left position of the current window in pixels.

<html>

<body>

<div id = "output">Your browser window is left by: </div>

<script>

const screenLeft = window.screenLeft;

document.getElementById("output").innerHTML += screenLeft + " px.";

</script>

</body>

</html>

Output
Your browser window is left by: 0 px.

You might also like