[go: up one dir, main page]
Scribd
Upload
14 views2 pages

Lexture14_Document Object Model

Object model

Uploaded by

sana amir
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views2 pages

Lexture14_Document Object Model

Object model

Uploaded by

sana amir
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Document Object Model (DOM):

The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of a
document as a tree-like model, where each node in the tree corresponds to a part of the document, such as
elements, attributes, and text. The DOM provides a way for programs and scripts to dynamically access and
manipulate the content, structure, and style of HTML or XML documents. The DOM tree can be manipulated using
JavaScript or other programming languages. Common tasks include navigating the tree, adding, removing, and
modifying nodes, and getting and setting the properties of nodes. The DOM API provides a set of methods and
properties to perform these operations, such as getElementById, createElement, appendChild, and innerHTML.

Key Concepts:

1. Tree Structure:

 The DOM organizes a document's elements in a hierarchical tree structure. The document itself is the
root, and each HTML or XML element becomes a node in the tree.

2. Nodes:

 Nodes can be of different types, including elements, attributes, text, comments, etc. Elements are
the most common and represent the HTML or XML tags.

3. Properties and Methods:

 Each node in the DOM tree has properties and methods that allow manipulation. For example, the
textContent property provides the text content of a node.

<div id="myDiv">Hello, <span>world!</span></div>

// Accessing and manipulating the DOM

var divNode = document.getElementById('myDiv');

console.log(divNode.textContent); // Outputs: Hello, world!

4. Dynamic Interaction:

 The DOM enables dynamic modification of a document. This can involve adding, removing, or
modifying elements and attributes. This dynamic interaction is the basis for many modern web
applications.

5. Document Object:

 The document object serves as the entry point to the DOM and represents the entire document.
Developers can use it to access various methods and properties, like getElementById() or
querySelector().

Use Cases:

1. Dynamic Content:

 Allows scripts to change the content of a webpage without requiring a full page reload.

2. Event Handling:

 Enables the attachment of event listeners to respond to user actions, such as clicks or key presses.

3. Animation:

 Supports the creation of dynamic and interactive animations by modifying elements and styles.
JavaScript BOM

The Browser Object Model (BOM) is the core of JavaScript on the web. The BOM provides you with objects that
expose the web browser’s functionality.

1. Window
 Window – understand the window object.
 Alert – display an alert dialog.
 Confirm – display a modal dialog with a question.
 Prompt – prompt the user to input some text.
 setTimeout – set a timer and execute a callback function once the timer expires.
 setInterval – execute a callback function repeatedly with a fixed delay between each call.
2. Location
 Location – manipulate the location of a document via the location object.
 Get query string parameters – learn how to retrieve query string parameters.
 Redirect to a new URL – show you how to redirect to a new URL using JavaScript.

You might also like