📜

JavaScript: DOM & Event Handling

59 cards · 🇺🇸 English

DOM traversal, manipulation, and event handling in the browser.

Study all 59 cards for free

Flashcards, quizzes, pixel-art games and a daily review that remembers for you.

Study this deck free

Try the first 10 cards

1 / 10
Question

DOM

Knew itLearning

Tap the card for the answer · swipe right if you knew it, left if not

Already have an account? Sign in

Cards

  1. 1DOM
    Document Object Model - a programming interface representing the HTML/XML document as a tree structure of nodes and objects that can be manipulated with JavaScript.
  2. 2the DOM vs JavaScript
    JavaScript is the programming language; DOM is a Web API that JavaScript uses to access and manipulate web documents. DOM is not part of JavaScript itself.
  3. 3Document.querySelector()
    Returns the first element matching a CSS selector. Example: document.querySelector('.class') returns the first element with that class.
  4. 4Document.querySelectorAll()
    Returns a NodeList of all elements matching a CSS selector. Example: document.querySelectorAll('p') returns all paragraph elements.
  5. 5querySelector vs getElementById
    getElementById is faster but only selects by ID. querySelector is more flexible (accepts any CSS selector) but slightly slower.
  6. 6Document.createElement()
    Creates a new HTML element node. Example: const div = document.createElement('div') creates a new div element in memory (not yet added to page).
  7. 7Element.appendChild()
    Adds a node as the last child of a parent element. Example: parent.appendChild(child) inserts child at the end.
  8. 8Element.removeChild()
    Removes a child node from its parent. Example: parent.removeChild(child) removes child from parent.
  9. 9Element.remove()
    Modern method to remove an element directly without referencing the parent. Example: element.remove() removes the element.
  10. 10InnerHTML
    Gets or sets the HTML content inside an element. Example: div.innerHTML = '<p>Hello</p>' replaces content with new HTML.
  11. 11TextContent
    Gets or sets the text content of an element (strips HTML tags). Example: div.textContent = 'Hello' sets plain text.
  12. 12Element.getAttribute()
    Gets the value of an attribute. Example: img.getAttribute('src') returns the image source.
  13. 13Element.setAttribute()
    Sets an attribute value. Example: img.setAttribute('src', 'image.png') changes the image source.
  14. 14Element.classList
    A DOMTokenList of class names with methods: add(), remove(), toggle(), contains(). Example: div.classList.add('active').
  15. 15Element.style
    Accesses inline CSS styles. Example: div.style.color = 'red' sets inline style. Use camelCase for multi-word properties (backgroundColor).
  16. 16element.style vs getComputedStyle()
    element.style only accesses inline styles. getComputedStyle() returns all computed styles including CSS from stylesheets.
  17. 17AddEventListener()
    Attaches an event handler to an element. Example: button.addEventListener('click', handler). Multiple handlers can be attached.
  18. 18RemoveEventListener()
    Removes an event handler. Requires the same function reference: button.removeEventListener('click', handler).
  19. 19Common DOM events
    click, dblclick, mouseenter, mouseleave, keydown, keyup, submit, change, focus, blur, load, scroll.
  20. 20Event.preventDefault()
    Prevents the default browser action. Example: form.addEventListener('submit', e => e.preventDefault()) stops form submission.
  21. 21Event.stopPropagation()
    Stops event from bubbling up to parent elements. Prevents parent handlers from being triggered.
  22. 22Event bubbling
    Events propagate from the target element up through ancestors to the document root. Parent handlers are triggered after child handlers.
  23. 23Event capturing
    Events propagate from document root down to the target element. Opposite of bubbling. Enable with addEventListener('click', handler, true).
  24. 24Event.target
    The element that triggered the event (where the event originated). May be a child of the element with the listener.
  25. 25Event.currentTarget
    The element that has the event listener attached. Always the element where addEventListener was called.
  26. 26Event delegation
    Attaching a single event listener to a parent to handle events from multiple children. Uses event.target to identify which child triggered the event.
  27. 27Why use event delegation?
    More efficient than attaching listeners to many elements. Works with dynamically added elements. Reduces memory usage.
  28. 28Document.getElementById()
    Selects an element by its ID attribute. Example: document.getElementById('header'). Returns null if not found.
  29. 29Document.getElementsByClassName()
    Returns a live HTMLCollection of elements with the specified class. Example: document.getElementsByClassName('item').
  30. 30Document.getElementsByTagName()
    Returns a live HTMLCollection of elements by tag name. Example: document.getElementsByTagName('p') returns all paragraphs.

And 29 more cards. Study the whole deck free

Articles about this deck

More Programming decks

See all
Study all 59 cards free