Mastering DOM manipulation with vanilla JavaScript

Star me on GitHub → 6416 ⭐

Web development moves at lightning speed. I still remember when I first started using libraries like jQuery, Prototype, script.aculo.us, Zepto, and many more. Even with modern tools like Angular, VueJS, React, Solid and Svelte, we still have to deal with the Document Object Model (DOM). While these frameworks encapsulate and hide direct DOM management, they still give us access to work with the DOM via refs and event handlers.

Whether you're developing or using a web component in any framework, you need to work with the DOM at a certain level. Knowing the browser DOM APIs and how to use them is crucial to web development. A website that introduces the APIs, highlights common problems, and provides answers to popular questions can be incredibly useful.

That's why I've put together this collection of resources:

No external libraries, just native browser APIs
Small, easy-to-understand examples
Live demos
Tips and best practices included
Real-life use cases
Works with modern browsers and ~~even supports Internet Explorer~~

Get ready to master DOM manipulation with vanilla JavaScript.

Level 1 — Basic

Change the favicon dynamically based on user's color scheme preference

Select a given line in a text area

Calculate the reading time of a webpage

Dynamically update CSS root variables

Insert HTML at the current position of a contentEditable element

Insert text into a text area at the current position

Move the cursor to the end of a contentEditable element

Get or set the cursor position in a text field

Display a confirm modal when closing the browser

Make a textarea auto-expand

Check if users click outside of selected text

Prevent the page from scrolling to an element when it is focused

Detect the dark mode

Check if the code is running in the browser

Detect mobile browsers

Check if the touch events are supported

Detect internet explorer browser

Select the text content of an element

Get the selected text

Prevent body from scrolling when opening a modal

Scroll to an element

Calculate the mouse position relative to an element

Press Shift and Enter for a new line

Distinguish between left and right mouse clicks

Check if an element is in the viewport

Swap two nodes

Count the number of characters of a textarea

Upload files with Ajax

Submit a form with Ajax

Serialize form data into a query string

Insert given HTML after or before an element

Detect mac OS browser

Strip HTML from a given text

Prevent the default action of an event

Get size of the selected file

Check if the native date input is supported

Detect if an element is focused

Determine the height and width of an element

Toggle password visibility

Toggle an element

Put cursor at the end of an input

Select the text of a textarea automatically

Create one time event handler

Check if an element is a descendant of another

Resize an iframe to fit its content

Replace broken images

Redirect to another page

Go back to the previous page

Get the size of an image

Get the position of an element relative to another

Get or set the document title

Get the position of an element relative to the document

Scroll to top of the page

Reload the current page

Prepend to an element

Get the document height and width

Detect clicks outside of an element

Trigger an event

Show or hide an element

Set CSS style for an element

Get siblings of an element

Get, set and remove data attributes

Get, set and remove attributes

Get or set the HTML of an element

Get CSS styles of an element

Attach or detach an event handler

Append to an element

Wrap an element around a given element

Unwrap an element

Select the children of an element

Select an element or list of elements

Replace an element

Remove an element

Remove all children of a node

Loop over a nodelist

Insert an element after or before other element

Get the text content of an element

Get the parent node of an element

Get the closest element by given selector

Execute code when the document is ready

Create an element

Clone an element

Check if an element has given class

Check an element against a selector

Add or remove class from an element

Level 2 — Intermediate

Remove indentation in a text area using the Shift+Tab key combination

Truncate the content of an element

Jump to the beginning or end of the current line in a text area

Count how many lines a given string takes up in a text area

Enter full-screen mode

Indent content in a text area using the Tab key

Build a spin input

Get or set the cursor position in a contentEditable element

Build an OTP input field

Display a modal when users leave website

Waiting for an element to become available

Automatically resize an iframe when its content height changes

Add a special message when users copy text

Scroll an element to ensure it is visible in a scrollable container

Position an element absolutely to another element

Check if an element is visible in a scrollable container

Get the direction of the text selection

Show a custom context menu at clicked position

Save and restore the text selection

Print an image

Show a loading indicator when an iframe is being loaded

Show a ghost element when dragging an element

Allow to enter particular characters only

Paste as plain text

Paste an image from the clipboard

Export a table to csv

Scale a text to fit inside of an element

Resize an image

Highlight an element when dragging a file over it

Communication between an iframe and its parent window

Placeholder for a contenteditable element

Detect if the caps lock is on

Calculate the size of scrollbar

Resize the width of a text box to fit its content automatically

Measure the width of given text of given font

Get the default value of a CSS property

Change the website favicon

Get the first scrollable parent of an element

Check if an element is scrollable

Copy text to the clipboard

Preview an image before uploading it

Download a file

Load a JavaScript file dynamically

Load a CSS file dynamically

Level 3 — Advanced

Synchronize scroll positions between two elements

Create a custom cursor

Sanitize HTML strings

Detect if users open another tab of the current page

Show an addition toolbar after users selects text

Create a custom scrollbar

Scroll to an element smoothly

Show or hide table columns

Drag to scroll

Copy highlighted code to the clipboard

Zoom an image

Create a range slider

Create an image comparison slider

Create resizable split views

Drag and drop table column

Drag and drop table row

Drag and drop element in a list

Sort a table by clicking its headers

Resize columns of a table

Make a resizable element

Make a draggable element

Tip

Avoid shifting layout when opening a modal

Get the bounding rectangle of a text node

Attach event handlers inside other handlers

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn

Mastering DOM manipulation with vanilla JavaScript

Level 1 — Basic

Level 2 — Intermediate

Level 3 — Advanced

Tip

Recent posts ⚡

Newsletter 🔔