Learn JavaScript Online

JavaScript DOM

JavaScript DOM and browser APIs

Learn JavaScript DOM manipulation and browser APIs with lessons on the document tree, selecting elements, node properties, attributes, modifying the document, events, forms, loading, network requests, and browser storage.

DOM manipulation lessons

  1. Browser JavaScript environment

    Understand where JavaScript runs in the browser, how the window object fits in, and how browser APIs connect code to pages.

    • browser JavaScript
    • window object
    • browser APIs
    Study Browser environment, specs

  2. DOM tree and document nodes

    Learn how the Document Object Model represents HTML as nodes that JavaScript can inspect, traverse, and update.

    • JavaScript DOM
    • Document Object Model
    • DOM tree
    Study DOM tree

  3. Find elements in the DOM

    Select page elements with search methods and build reliable DOM queries for real interface work.

    • querySelector
    • getElementById
    • DOM selectors
    Study Searching: getElement*, querySelector*

  4. Navigate DOM relationships

    Move between parent, child, and sibling nodes so DOM code can respond to the surrounding document structure.

    • DOM navigation
    • parentNode
    • childNodes
    Study Walking the DOM

  5. Node properties

    Use text, HTML, and node property APIs carefully when reading and changing page content.

    • DOM node properties
    • textContent
    • innerHTML
    Study Node properties: type, tag and contents

  6. Attributes and properties

    Compare HTML attributes with DOM properties and choose the right API for reading or updating element state.

    • DOM attributes
    • DOM properties
    • HTML attributes
    Study Attributes and properties

  7. Modify the document

    Create, insert, replace, and remove elements with DOM manipulation methods used in dynamic JavaScript interfaces.

    • DOM manipulation
    • createElement
    • append
    Study Modifying the document

  8. Browser events

    Handle clicks, input, keyboard activity, and other browser events with predictable JavaScript event listeners.

    • JavaScript events
    • addEventListener
    • event handling
    Study Introduction to browser events

  9. Event delegation

    Use bubbling and delegation to manage many interactive elements with fewer event listeners.

    • event delegation
    • event bubbling
    • JavaScript event target
    Study Event delegation

  10. Forms and submit events

    Read form values, handle submit behavior, and connect form interfaces to JavaScript validation or actions.

    • JavaScript forms
    • submit event
    • form validation
    Study Forms: event and method submit

  11. Page loading lifecycle

    Know when DOM content and page assets are ready so browser code runs at the right time.

    • DOMContentLoaded
    • onload
    • page lifecycle
    Study Page: DOMContentLoaded, load, beforeunload, unload

  12. Network requests and browser storage

    Connect browser JavaScript to remote data and preserve client-side state with storage APIs.

    • Fetch API
    • localStorage
    • browser storage
    Study Fetch