Scribd
Upload
2 views

Chapter - 6 DOM & Async Await

The document discusses the Document Object Model (DOM), which enables web developers to manipulate web pages dynamically through a hierarchical tree structure. It also explains the concepts of async and await in JavaScript, which facilitate writing asynchronous code for efficient task management. Additionally, it describes APIs as intermediaries that allow different software systems to communicate and function together effectively.

Uploaded by

kpushkar460
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

Chapter - 6 DOM & Async Await

The document discusses the Document Object Model (DOM), which enables web developers to manipulate web pages dynamically through a hierarchical tree structure. It also explains the concepts of async and await in JavaScript, which facilitate writing asynchronous code for efficient task management. Additionally, it describes APIs as intermediaries that allow different software systems to communicate and function together effectively.

Uploaded by

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

Chapter : 6

DOM, Async Await, API


Document
Object Model
(DOM)
The Document Object Model (DOM) is a powerful tool that
allows web developers to dynamically interact with and
manipulate the content, structure, and style of web
pages. It represents the HTML document as a hierarchical
tree of objects, providing a comprehensive interface for
accessing and modifying the page.
The Document Object
1 Root of the DOM Tree
The document object serves as the root element of
the DOM, representing the entire HTML document.

2 Provides Document Access


This special object allows you to access and modify
the content of the web page dynamically.

3 Essential Properties
Key properties include document.title,
document.URL, document.body, and
document.head.
Interacting with the DOM
Accessing Elements Powerful Selectors Dynamic Modification

Use methods like The querySelector and Manipulate the structure,


getElementById, querySelectorAll methods content, and style of the web
getElementsByName, allow for more flexible and page using DOM methods
getElementsByClassName, efficient DOM querying. and properties.
and getElementsByTagName
to target specific elements.
Syntax
Async and Await in JS
Async and await are powerful JavaScript features that allow you to write asynchronous code in a more
readable and manageable way. By understanding how they work, you can level up your JavaScript
skills and create efficient, non-blocking applications.
1. What is async?
• async is a keyword you put before a function to make it an "asynchronous function."
• An asynchronous function is one that can do something in the background and come back to it
later without stopping the rest of your code.

2. What is await?
• await is a keyword used inside async functions.
• It makes JavaScript wait until the promise (an operation that takes time) is done, without blocking
the whole program.

3. What is fetch?
• The fetch function in JavaScript is used to make HTTP requests to web servers and handle responses.
Why Use async and await?
Imagine you are cooking a meal:

• While the pasta is boiling (a time-consuming task), you can chop vegetables (another task).
• Instead of standing there doing nothing while the pasta boils, you are being efficient by doing
other tasks.
Similarly, async and await let your code be efficient by not waiting around for one task to finish before
starting another.
API
(Application programming
Interface)
An API is like a waiter in a restaurant. It takes your request, delivers it to the
appropriate system (like the kitchen), and then brings back the information or service
you asked for. APIs allow different software systems to work together seamlessly and
efficiently

You might also like