Scribd
Upload
8 views12 pages

DOM and Event Handling

The document provides an overview of key concepts related to the Document Object Model (DOM), including the window, history, navigator, form, frames, and location objects. It explains common properties and methods, event handling, loading events, JavaScript timers, and form validation. Examples are provided for each concept to illustrate their usage in web development.

Uploaded by

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

DOM and Event Handling

The document provides an overview of key concepts related to the Document Object Model (DOM), including the window, history, navigator, form, frames, and location objects. It explains common properties and methods, event handling, loading events, JavaScript timers, and form validation. Examples are provided for each concept to illustrate their usage in web development.

Uploaded by

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

Internet - Concepts and Overview

Introduction to DOM

DOM (Document Object Model) is a programming interface for HTML and XML documents. It represents the

page so that programs can change the document structure, style, and content.

- The DOM represents the document as a tree of nodes.

- Every element, attribute, and text in an HTML document is represented as a node.

Example:

```javascript

document.getElementById("demo").innerHTML = "Hello DOM!";

```
Internet - Concepts and Overview

Window Object

The **window** object is the global object in a browser that represents the browser window.

Common properties/methods:

- `window.alert()`: Displays an alert box.

- `window.innerHeight`, `window.innerWidth`: Viewport size.

- `window.open()`, `window.close()`: Open/close new window.

Example:

```javascript

alert("This is an alert box!");

```
Internet - Concepts and Overview

History Object

The **history** object contains the URLs visited by the user in the browser window.

Common methods:

- `history.back()`: Go to the previous page.

- `history.forward()`: Go to the next page.

- `history.go(n)`: Load a specific page from history.

Example:

```javascript

history.back(); // Go to the previous page

```
Internet - Concepts and Overview

Navigator Object

The **navigator** object contains information about the browser.

Example properties:

- `navigator.appName`: Name of browser

- `navigator.userAgent`: User agent string

- `navigator.language`: Language setting

Example:

```javascript

console.log(navigator.userAgent);

```
Internet - Concepts and Overview

Form Object

The **form** object represents an HTML form element.

You can access form elements and their values:

```javascript

let name = document.forms["myForm"]["username"].value;

```
Internet - Concepts and Overview

Frames and Location Objects

**Frames**:

Frames are used to divide the browser window into multiple sections. JavaScript can access frames using

`window.frames[]`.

**Location**:

The **location** object contains information about the current URL.

Properties/methods:

- `location.href`: Current URL

- `location.reload()`: Reload the page

- `location.assign(url)`: Navigate to new URL

Example:

```javascript

location.reload(); // Reload page

```
Internet - Concepts and Overview

Properties and Methods of DOM Objects

Common DOM methods and properties:

- `document.getElementById(id)`: Access element by ID

- `document.getElementsByTagName(tag)`: Access elements by tag

- `element.innerHTML`: Get/set content

- `element.style.property`: Modify style

- `element.setAttribute()`, `getAttribute()`

Example:

```javascript

document.getElementById("myDiv").style.color = "red";

```
Internet - Concepts and Overview

Different Types of Events

JavaScript allows interaction through events like:

- **Click**: User clicks an element

- **Focus**: Element gains focus (e.g., input box)

- **Blur**: Element loses focus

- **Key Events**: Keydown, keyup, keypress

- **Mouse Events**: Mouseover, mouseout, click

Example:

```javascript

document.getElementById("btn").onclick = function() {

alert("Button clicked");

```
Internet - Concepts and Overview

Loading Events

Loading events occur when the page or resources load.

- `window.onload`: Executes when the entire page is loaded

- `DOMContentLoaded`: Fires when DOM is fully loaded (without waiting for images etc.)

Example:

```javascript

window.onload = function() {

alert("Page fully loaded");

```
Internet - Concepts and Overview

Event Handlers

Event handlers are functions that respond to events.

You can assign them inline or via JavaScript:

```html

<button onclick="sayHello()">Click Me</button>

```

OR:

```javascript

document.getElementById("btn").addEventListener("click", sayHello);

```
Internet - Concepts and Overview

JavaScript Timers

Timers are used to delay execution.

**setTimeout()**: Executes a function after a delay.

```javascript

setTimeout(function() {

alert("Hello after 2 seconds");

}, 2000);

```

**setInterval()**: Repeats execution at intervals.

```javascript

setInterval(function() {

console.log("Repeated every second");

}, 1000);

```
Internet - Concepts and Overview

Form Validation

Form validation checks if form inputs are correctly filled before submitting.

Example:

```javascript

function validateForm() {

let name = document.forms["myForm"]["username"].value;

if (name == "") {

alert("Name must be filled out");

return false;

```

Use validation to prevent empty, invalid, or unsafe data from being submitted.

You might also like