Scribd
Upload
25 views

6 JS Dom

The document discusses the DOM, which represents an HTML document as a tree structure that can be manipulated with JavaScript. It describes DOM node types like elements and text, and techniques for accessing and manipulating the DOM like getting elements by ID and adding or removing child nodes. It also covers common browser events like click and scroll that JavaScript can detect and handle.

Uploaded by

alaabachraoui1
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
25 views

6 JS Dom

The document discusses the DOM, which represents an HTML document as a tree structure that can be manipulated with JavaScript. It describes DOM node types like elements and text, and techniques for accessing and manipulating the DOM like getting elements by ID and adding or removing child nodes. It also covers common browser events like click and scroll that JavaScript can detect and handle.

Uploaded by

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

JavaScript

DOM and Events


CS200: Web Development
Tunis Business School - 2023/2024
Outline

Browser
The DOM
events
The DOM
What is DOM?

Document Object Model

DOM is an interface that represents the structure of a


document in a tree-like format, allowing programming
languages like JavaScript to manipulate its elements..
Structure of DOM

Tree-like • HTML documents are represented


as a tree structure with nodes.
Structure
• Elements, attributes, and text
Nodes within the HTML document are
nodes in the DOM tree.
Structure of DOM
<!DOCTYPE html>
<html>
<head>
<title>
DOM Example
</title>
</head>
<body>
<h1>Hello, DOM!</h1>
<p>This is a paragraph.</p>
</body>
</html>
https://fritscher.ch/dom-css/
Structure of DOM

Each document can have only one


document element.

In an HTML document, the document


element is the <html> element.
Node Types in DOM

Element Nodes • Represent HTML elements like <div>, <p>, etc.

Attribute Nodes • Represent HTML attributes within elements.

Text Nodes • Contain the text within elements.

Comment Nodes • Represent comments within HTML.


Accessing DOM elements

getElementById • Returns an element with a specific ID.

• Returns a collection of elements with a specific class


getElementsByClassName
name.

• Returns the first element that matches a specified


querySelector
CSS selector.

• Returns a collection of elements that match a


querySelectorAll
specified CSS selector.
Techniques for DOM Manipulation

Changing Text Content • Altering the text content of elements.

Modifying Attributes • Changing or setting attributes of elements.

Adding and Removing • Dynamically adding or removing elements from the


Elements DOM.

Styling Elements • Changing CSS styles and classes


Techniques for DOM Manipulation

Creating new var newDiv = document.createElement("div");


Elements

Adding text to newDiv.textContent = "Newly added div";


elements

Adding HTML newDiv.innerHTML = '<p>Created new element


Snippets to elements with innerHTML</p>';
Techniques for DOM Manipulation

Adding element to parentNode.appendChild(childNode);


the parent node

Removing document.body.removeChild(newDiv);
Elements

newDiv.style.backgroundColor =
Updating Styles "lightblue";
Examples of DOM
Manipulation
Browser Events
Introduction to Browser Events

Browser events are user or browser-generated


occurrences (e.g., clicks, keystrokes, page loads)
that JavaScript can detect and respond to.
Enable interactivity and responsiveness in web
applications.
Common Event Types

UI Events • load, unload, resize, scroll, etc.

Keyboard Events • keydown, keyup, keypress, etc.

Mouse Events • click, mouseover, mouseout, etc.

Form Events • submit, reset, change, etc.


Common Input Field Events

input event: • Fired when the value of an input field changes.

• Triggered when the value of an input field changes


change event: and focus moves away.

focus event: • Occurs when an input field gets focus.

blur event: • Fired when an input field loses focus


Handling Events

Inline Event • Event handlers specified within HTML


Handling attributes.

Using • Preferred method for attaching events


addEventListener dynamically.

Event Handler • Directly assigning functions to event


Properties handler properties.
Inline Event Handling

<button onclick="console.log('Clicked!')">Click Me</button>


Using addEventListener

const myElement =
document.getElementById('myElement');
myElement.addEventListener('mouseover', () => {
console.log('Mouse Over Element!');
});
Handling Multiple Events
const inputField =
document.getElementById('textInput');
inputField.addEventListener('input', () => {
console.log('Text Changed!');
});

inputField.addEventListener('focus', () => {
console.log('Input Field Focused!');
});
Event Handler Properties
const myButton =
document.getElementById('myButton');

myButton.onclick = function() {
console.log('Button Clicked!');
};
Pros and Cons of Each Method

Inline Event • Simple but not recommended for


Handling maintainability and separation of concerns.

• Provides flexibility and better separation of


addEventListener JavaScript and HTML.

Event Handler • Limited to one handler per event and can be


Properties overwritten
Best Practices for Event Handling

Prefer • Use for better code organization and


addEventListener scalability.

Separation of • Keep JavaScript separate from HTML


Concerns for maintainability.

Avoid Event • Due to limitations and overwrite


Handler Properties issues.
Examples of Event Handling

You might also like