Unit 9: JavaScript DOM Manipulation & Events

9.1 DOM Manipulation

DOM (Document Object Model): Represents HTML as objects that JavaScript can interact with.

Selecting Elements:

• getElementById(id) - Select by ID
• getElementsByClassName(class) - Select by class (returns HTMLCollection)
• querySelector(selector) - Select first matching element
• querySelectorAll(selector) - Select all matching elements

Modifying Content:

• innerHTML - Get/set HTML content (use carefully)
• innerText - Get/set plain text content
• textContent - Get/set text (includes hidden elements)

Attributes:

• setAttribute(name, value) - Set attribute
• getAttribute(name) - Get attribute value
• removeAttribute(name) - Remove attribute
• Direct property access: element.id, element.class

Styling:

• element.style.color = "red" - Inline styles
• element.classList.add/remove/toggle() - Manage CSS classes
• element.className - Get/set class attribute

Creating & Removing Elements:

• createElement(tag) - Create new element
• appendChild(child) - Add child element
• removeChild(child) - Remove child element
• insertBefore(new, reference) - Insert before element

9.2 Event Handling

Common Events:

• Mouse: click, dblclick, mouseover, mouseout, mousemove, mouseenter
• Keyboard: keydown, keyup, keypress
• Form: input, submit, change, focus, blur
• Window: load, unload, scroll, resize

Handling Events:

• HTML attribute: <button onclick="myFunc()">
• Property: element.onclick = function() { }
• addEventListener: element.addEventListener('click', function() { })

Event Object:

• event.target - Element that triggered event
• event.type - Type of event
• event.key - Key pressed (keyboard events)
• event.preventDefault() - Prevent default action
• event.stopPropagation() - Stop event bubbling