Skip to content

Commit c9569bf

Browse files
committed
learn about location and history object
1 parent fc3db90 commit c9569bf

File tree

1 file changed

+51
-0
lines changed

1 file changed

+51
-0
lines changed

Advanced-DOM-APIs/README.md

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
| [Working with `<template>` tag](#working-with-template-tag) |
1010
| [Loading Script Dynamically](#loading-script-dynamically) |
1111
| [Setting Timers and Intervals](#setting-timers-and-intervals) |
12+
| [The `location` and `history` Objects](#the-location-and-history-objects)
1213

1314
Below topics will be covered and for its practical application, [Planner Project](project_planner/) will be used as reference where concept of classes and functions are demonstrated:
1415

@@ -268,3 +269,53 @@ clearInterval(interval);
268269
```
269270

270271
In this example, `clearTimeout` is used to cancel the timer and prevent the code from executing after the specified time. `clearInterval` works similarly for intervals.
272+
273+
## The [`location`](https://developer.mozilla.org/en-US/docs/Web/API/Location) and [`history`](https://developer.mozilla.org/en-US/docs/Web/API/History_API) Objects
274+
275+
In the Document Object Model (DOM), the `location` and `history` objects are used to interact with the browser's location and history.
276+
277+
### The `location` object
278+
279+
The `location` object represents the current location of the document, including the URL and any query parameters. You can use this object to get information about the current location or to navigate to a new location. Here are some examples:
280+
281+
```javascript
282+
// Get the current URL
283+
const currentUrl = location.href;
284+
285+
// Navigate to a new URL
286+
location.href = "https://www.example.com";
287+
288+
// Get the query parameters
289+
const queryParams = location.search;
290+
```
291+
292+
Readings:
293+
294+
- [What is the DOM Location object?](https://www.educative.io/answers/what-is-the-dom-location-object)
295+
296+
- [JavaScript Location](https://www.javascripttutorial.net/javascript-bom/javascript-location/)
297+
298+
### The `history` object
299+
300+
The `history` object represents the user's navigation history, including the pages they have visited and any back/forward navigation. You can use this object to navigate back or forward in the user's history or to get information about the history. Here are some examples:
301+
302+
```javascript
303+
// Go back one page in the history
304+
history.back();
305+
306+
// Go forward one page in the history
307+
history.forward();
308+
309+
// Get the length of the history
310+
const historyLength = history.length;
311+
```
312+
313+
Both the `location` and `history` objects are part of the `window` object in the browser's global scope, so you can access them directly without needing to declare them first.
314+
315+
Readings:
316+
317+
- [Working with history object of HTML DOM](https://iq.opengenus.org/history-object-of-html-dom/)
318+
319+
- [JavaScript History](https://www.javascripttutorial.net/javascript-bom/javascript-history/)
320+
321+
- [JavaScript History Object](https://www.studytonight.com/javascript/javascript-history-object)

0 commit comments

Comments
 (0)