Scribd
Upload
3 views4 pages

FSD Module 2 Notes Partial

The document provides an overview of the Document Object Model (DOM) and its components, including methods for accessing and manipulating elements in JavaScript. It covers traversing the DOM tree, changing text content, updating attributes, and handling events, while emphasizing safe practices to prevent security risks like XSS attacks. Key concepts include creating and removing elements, adding event listeners, and the importance of using textContent over innerHTML for security.

Uploaded by

Manu Manoj
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
3 views4 pages

FSD Module 2 Notes Partial

The document provides an overview of the Document Object Model (DOM) and its components, including methods for accessing and manipulating elements in JavaScript. It covers traversing the DOM tree, changing text content, updating attributes, and handling events, while emphasizing safe practices to prevent security risks like XSS attacks. Key concepts include creating and removing elements, adding event listeners, and the importance of using textContent over innerHTML for security.

Uploaded by

Manu Manoj
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/ 4

Full Stack Development-BIS601 Dr.

Aravinda Thejas Chandra Dept of ISE SJCIT Chickballapur

Full Stack Development-BIS601


Module 2

1. The Document Object Model (DOM)


• DOM is a structured representation of an HTML page in the browser's memory.
• It allows JavaScript to access and update the content, structure, and styles
dynamically.
• The DOM tree consists of nodes representing elements, attributes, and text.

Key DOM Components:

1. Document Node → Represents the entire web page.


2. Element Nodes → Represent HTML tags (<h1>, <p>, <div>, etc.).
3. Attribute Nodes → Represent attributes within elements (e.g., id="header").
4. Text Nodes → Represent actual text inside an element.

2. Accessing Elements in the DOM


JavaScript provides several methods to select elements from the DOM.

a. Selecting a Single Element:

1. By ID (getElementById)

var heading = document.getElementById("header");

2. By CSS Selector (querySelector)

javascript
CopyEdit
var firstItem = document.querySelector("li.hot");

b. Selecting Multiple Elements:

1. By Class (getElementsByClassName)

var hotItems = document.getElementsByClassName("hot");

2. By Tag Name (getElementsByTagName)

var listItems = document.getElementsByTagName("li");

1
Full Stack Development-BIS601 Dr. Aravinda Thejas Chandra Dept of ISE SJCIT Chickballapur

3. By CSS Selector (querySelectorAll)

javascript
CopyEdit
var allHotItems = document.querySelectorAll("li.hot");

3. Traversing the DOM Tree


Once an element is selected, you can navigate through its related nodes.

Property Description
parentNode Moves to the parent element
firstChild Selects the first child node
lastChild Selects the last child node
previousSibling Moves to the previous sibling node
nextSibling Moves to the next sibling node

Example:

var list = document.getElementById("list");


console.log(list.parentNode); // Outputs parent of the list element
console.log(list.firstChild); // First child inside the list

4. Working with DOM Elements


a. Changing Text Content

• Using textContent (Recommended, ignores HTML inside the element):

document.getElementById("header").textContent = "New Heading";

• Using innerHTML (Includes HTML inside the element, but can pose security
risks):

document.getElementById("header").innerHTML = "<em>New Heading</em>";

b. Updating Attributes

• Get an attribute:

var link = document.getElementById("myLink").getAttribute("href");

• Set an attribute:

document.getElementById("myLink").setAttribute("href",
"https://example.com");

2
Full Stack Development-BIS601 Dr. Aravinda Thejas Chandra Dept of ISE SJCIT Chickballapur

c. Changing CSS Styles

• Modify an element's style property to change its appearance dynamically.

document.getElementById("header").style.color = "blue";
document.getElementById("header").style.fontSize = "24px";

5. Creating and Removing Elements


a. Adding New Elements to the DOM

Steps:

1. Create an element using createElement


2. Create text using createTextNode
3. Attach it to the parent using appendChild

Example:

var newItem = document.createElement("li");


var text = document.createTextNode("New List Item");
newItem.appendChild(text);
document.getElementById("list").appendChild(newItem);

b. Removing Elements from the DOM

• Using removeChild to remove an element

var list = document.getElementById("list");


var item = document.getElementById("item1");
list.removeChild(item);

6. Handling Events in JavaScript


Events allow JavaScript to respond to user actions like clicks, mouse movements, or
keyboard input.

a. Adding Event Listeners

1. Using onclick (Inline Method)

document.getElementById("btn").onclick = function() {
alert("Button Clicked!");
};

2. Using addEventListener (Preferred Method)

document.getElementById("btn").addEventListener("click", function() {

3
Full Stack Development-BIS601 Dr. Aravinda Thejas Chandra Dept of ISE SJCIT Chickballapur

alert("Button Clicked!");
});

b. Common Event Types

Event Description
click User clicks an element
mouseover Mouse hovers over an element
keydown Key is pressed
submit Form is submitted

Example:

document.getElementById("myInput").addEventListener("keydown",
function(event) {
console.log("Key Pressed: " + event.key);
});

7. Preventing Cross-Site Scripting (XSS) Attacks


• Never insert untrusted user input directly into innerHTML (This can lead to
malicious code execution).
• Escape user input using textContent

var userInput = "<script>alert('Hacked!')</script>";


document.getElementById("safe").textContent = userInput; // Displays
as plain text

8. Summary
✔ The DOM represents the structure of an HTML document in memory.
✔ JavaScript allows access, modification, and traversal of DOM elements.
✔ Events make web pages interactive.
✔ Use safe practices (e.g., textContent over innerHTML) to prevent security risks.

You might also like