JavaScript DOM Manipulation Crash Course

Introduction

• Requests for a JavaScript crash course after HTML and CSS courses.
• Existing course: JavaScript Fundamentals for Beginners.
• Focus on language fundamentals: Variables, Arrays, Functions, Loops, etc.
• This video focuses on DOM manipulation with Vanilla JavaScript.

DOM (Document Object Model) Overview

• The DOM is a structured representation of the HTML document.
• Tree Structure: The DOM can be visualized as a tree of nodes:
  • Window object (top-level)
  • Document object (core of the DOM)
  • HTML element (root)
  • Child nodes (head and body elements) contain further elements (H1, A tags, etc.)
  • Nodes can also have text nodes and attributes (e.g., href on A tags).

Setting Up the Project

• Use Visual Studio Code with Live Server extension for auto-reloading.
• HTML file includes Bootstrap for styling.
• Basic structure includes a header, card with a form, and a list group.
• Link to the bare HTML file provided in the description.

Examining the Document Object

• Open the console to interact with the document object.
• Use console.dir(document) to view properties and methods attached to the document object.
• Useful properties include:
  • document.domain
  • document.URL
  • document.title (can be changed)
  • document.body and document.head
  • document.all (HTML collection of all items in the document).

Selecting DOM Elements

1. getElementById

• Select an element by its ID.
• Use .textContent, .innerText, and .innerHTML to manipulate content.

2. getElementsByClassName

• Returns an HTML collection of all elements with the specified class name.
• Loop through elements to apply changes (e.g., styling).

3. getElementsByTagName

• Select elements by their tag name (e.g., "li").
• Similar to getElementsByClassName.

4. querySelector

• Selects the first element matching the specified CSS selector.
• Can use any CSS selector (e.g., IDs, classes, tags).

5. querySelectorAll

• Selects all elements matching the specified CSS selector.
• Returns a NodeList, which allows array methods.

Changing Styles and Content

• Use .style property to change CSS styles (e.g., element.style.color).
• Understand the difference between the three methods of manipulating content:
  • .textContent: ignores styling
  • .innerText: respects styling
  • .innerHTML: allows HTML content.

Important Notes on Selecting Elements

• Avoid using index-based selection with document.all as it can lead to errors when the DOM changes.
• Always prefer specific selectors (by ID, class, or elements) to avoid potential issues.

Next Steps and Series Continuation

• Additional topics will cover:
  • Traversing the DOM: Parent and Child nodes
  • Handling Events: Mouse and Keyboard events
• Upcoming videos will continue from this point.