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.
