Scribd
Upload
368 views

Javascript Dom

The document discusses the Document Object Model (DOM) in JavaScript. It explains that the DOM represents an HTML document as nodes and objects, allowing JavaScript to access and update the content, structure, and style of the document. The DOM presents an HTML document as a tree-like structure called the DOM tree, with each node representing an element. This allows JavaScript to traverse the tree by accessing and manipulating individual elements via properties and methods.

Uploaded by

Sunil Nagar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
368 views

Javascript Dom

The document discusses the Document Object Model (DOM) in JavaScript. It explains that the DOM represents an HTML document as nodes and objects, allowing JavaScript to access and update the content, structure, and style of the document. The DOM presents an HTML document as a tree-like structure called the DOM tree, with each node representing an element. This allows JavaScript to traverse the tree by accessing and manipulating individual elements via properties and methods.

Uploaded by

Sunil Nagar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

JAVASCRIPT DOM

WHAT IS DOM
• Documet -> Just like a file
• Object-> is anything you put inside html document
• Model-> layout of its structure

<html>
<head></head>
<body></body>
</html>
For head and body html is direct parent
<html>
<head>
<title></title>
</head>
<body>
<h1></h1>
<p></p>
</body>
</html>
• <title> parent is <head>
• <h1><p> parent is <body>
SO DOM IS USED TO SHOW HIERARCHICAL RELATIONSHIP AMONG
ELEMENTS
Properties
• It is an application programming interface for HTML & XML
documents
• Used to Navigate through structure of document, add , modify and
delete elements dynamically
• It is object oriented representation of web pages
• Used to represent document with a logical tree
• Treat every HTML tag as object
• Access properties of these objects using built in methods of objects
• Functionality of objects can be controlled dynamically
Navigator

Window

Document

Head Body

Title H1 P

text text text

Window.document.head.title.text=HTML
Structure of DOM
JSS DOM
JSSS DOM
Exercise : Change the checked value of checkbox and radio button
Window Object window.open()

window.close()
window.innerHeight
window.moveTo()
WINDOW
window.resizeTo() window.innerWidth

DOCUMENT LOCATION
HISTORY

∙ history.back() - same as clicking back in the


•window.location.href returns the href (URL) of the current page
browser
∙ history.forward() - same as clicking forward in •window.location.pathname returns the path and filename of the
current page
the browser •window.location.assign() loads a new document
•window.location.protocol returns the web protocol used (http: or
https:)
•window.location.hostname returns the domain name of the web
host
Example
Built-In Objects
1. String
2. Maths
3. Date
4. Array

You might also like