DOM Scripting Tutorial

By Xah Lee. Date: . Last updated: .

This is a beginner-friendly, example based, practical tutorial for writing web applications with JavaScript.

This tutorial teaches you the core standard web technology. No library, no framework, no JQuery, are used in this tutorial.

Basic Examples

  1. Change CSS
  2. Change Element's Content
  3. Create/Insert HTML Element
  4. Remove HTML Element
  5. Get Elements by ID, Tag, Name, Class, CSS Selector
  6. Get Element's Attribute Value
  7. Set Element's Attribute Value
  8. Remove Element's Attribute Value
  9. List/Add/Remove Class Attribute
  10. Add/Remove Event Handler

Web Scripting Overview

  1. Browser Window Object
  2. Event Basics
  3. JS Load Order
  4. What Does Live Object Mean?
  5. Array vs NodeList vs HTMLCollection
  6. DOM Whitespace Nodes

Basic DOM Methods

  1. Basic DOM Methods
  2. Node Type, Name, Value
  3. Navigate DOM Tree


  1. HTML Form
  2. Visit URL in a New Window
  3. Instant Field Validation
  4. Input Field Validation
  5. HTML: Input Range Slider

How To

  1. Encode URL, Escape String
  2. Browser Info, Navigator Object
  3. Get URL (window.location)
  4. Web Cookies
  5. Web Storage
  6. Find Window Width
  7. Find Element Width
  8. WebSocket

Simple Examples

  1. Disable Right Click
  2. document.write
  3. Image Rollover
  4. Pop-up New Window
  5. Digital Clock
  6. Stopwatch
  7. Fading Box
  8. Fading Box with CSS Transition
  9. Shake Box
  10. Tooltip
  11. Falling Hearts
  12. Scroll Following Box


  1. jQuery Basics
  2. jQuery() vs querySelectorAll()
  3. JS: How to Write a JQuery Plugin


Misc Tips

  1. Value of “this” in Event Handler
  2. Event Delegation
  3. Get Current Script Tag
  4. insertAfter Element
  5. Randomize List
  6. create Document Fragment
  7. innerHTML, nodeValue, textContent, innerText?
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog