JavaScript DOM Manipulation

Introduction

• Importance of DOM manipulation in JavaScript.
• Useful for creating single-page applications and dynamic content without reloading the page.

Overview of Key Functions

• Discussed various functions for inserting and removing elements in the DOM.
• Importance of notes for reference and learning.

Basic DOM Manipulation Techniques

• Selecting Elements:

  • Use document.querySelector() to select elements.
  • Example: document.querySelector('.box').innerHTML retrieves HTML content of the first .box element.

• Inner and Outer HTML:

  • innerHTML: Retrieves HTML inside the selected element.
  • outerHTML: Retrieves the full HTML including the element itself.

• Text Content:

  • Use textContent to access only the text content of an element, excluding HTML tags.

Attributes and Node Types

• Node Name vs. Tag Name:

  • nodeName: applicable for all node types (e.g., comment, text).
  • tagName: applicable only for element nodes.

• Managing Attributes:

  • element.hasAttribute(): checks for the existence of an attribute.
  • element.getAttribute(): retrieves the value of an attribute.
  • element.setAttribute(): sets or updates an attribute.
  • element.removeAttribute(): removes an attribute.

Creating and Inserting Elements

• Creating New Elements:
  • Use `document.createElement(