Shradha Khapra Watch on YouTube

Lecture 6 : DOM - Document Object Model | JavaScript Full Course | Part 1

3 min read 4 hours ago
Published on Feb 13, 2025 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

This tutorial will guide you through the Document Object Model (DOM) as presented in Lecture 6 of the JavaScript Full Course by Shradha Khapra. Understanding the DOM is crucial for web development, as it allows you to interact with and manipulate the structure of web pages dynamically using JavaScript.

Step 1: Understanding the DOM Structure

  • The DOM is a programming interface for web 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:
    • Each node corresponds to part of the document (e.g., elements, attributes, text).
    • The root node is usually the <html> element.

Practical Advice

  • Visualize the DOM as a family tree where each element is a family member, and the relationships between them represent their hierarchical structure on the webpage.

Step 2: Accessing DOM Elements

  • Use JavaScript to interact with DOM elements through methods like:
    • document.getElementById(id): Accesses an element by its unique ID.
    • document.getElementsByClassName(className): Accesses elements by class name.
    • document.querySelector(selector): Selects the first matching element based on a CSS selector.

Example Code

// Access an element by ID
let header = document.getElementById('header');

// Access elements by class name
let items = document.getElementsByClassName('item');

// Select the first paragraph
let paragraph = document.querySelector('p');

Practical Advice

  • Always ensure that the elements you are trying to access exist on the page to avoid null references.

Step 3: Modifying DOM Elements

  • You can modify the content and attributes of DOM elements using properties like:
    • innerHTML: Change the HTML content inside an element.
    • style: Modify CSS styles directly.
    • setAttribute(attribute, value): Change an element's attribute.

Example Code

// Change the header text
header.innerHTML = 'Welcome to My Website';

// Change the background color of an element
header.style.backgroundColor = 'blue';

// Set a new attribute for an element
header.setAttribute('class', 'new-class');

Practical Advice

  • Use innerHTML cautiously to avoid security issues like XSS (Cross-Site Scripting).

Step 4: Adding and Removing Elements

  • Create new elements and append them to the DOM using:
    • document.createElement(tagName): Creates a new element.
    • appendChild(child): Adds a child element to a parent.

Example Code

// Create a new list item
let newItem = document.createElement('li');
newItem.innerHTML = 'New Item';

// Append it to an existing list
let list = document.getElementById('myList');
list.appendChild(newItem);
  • To remove an element:
    • Use parentNode.removeChild(child) to remove a specific child from its parent.

Example Code

// Remove an item from the list
let itemToRemove = document.getElementById('item1');
itemToRemove.parentNode.removeChild(itemToRemove);

Step 5: Event Handling

  • Attach event handlers to elements to make your web page interactive using:
    • element.addEventListener(event, function): Adds an event listener to an element.

Example Code

// Add a click event to the button
let button = document.getElementById('myButton');
button.addEventListener('click', function() {
    alert('Button was clicked!');
});

Practical Advice

  • Use event delegation for better performance when managing multiple elements.

Conclusion

In this tutorial, we covered the fundamentals of the DOM and how to access, modify, add, and remove elements using JavaScript. Understanding these concepts is essential for building interactive web applications. As a next step, explore more complex DOM manipulations and consider building a small project to practice these skills.

Table of Contents

Recent