Mastering DOM manipulation with vanilla JavaScript
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
Select a given line in a text area
24 Sep, 2023
Calculate the reading time of a webpage
23 Sep, 2023
Dynamically update CSS root variables
21 Sep, 2023
Indent content in a text area using the Tab key
20 Sep, 2023
Get or set the cursor position in a text field
17 Sep, 2023
Display a confirm modal when closing the browser
15 Sep, 2023
Make a textarea auto-expand
03 Sep, 2023
Check if users click outside of selected text
02 Sep, 2023
Detect the dark mode
03 May, 2020
Check if the code is running in the browser
03 May, 2020
Detect mobile browsers
25 Apr, 2020
Check if the touch events are supported
25 Apr, 2020
Detect internet explorer browser
24 Apr, 2020
Select the text content of an element
19 Apr, 2020
Get the selected text
19 Apr, 2020
Prevent body from scrolling when opening a modal
18 Apr, 2020
Scroll to an element
08 Apr, 2020
Press Shift and Enter for a new line
01 Apr, 2020
Distinguish between left and right mouse clicks
01 Apr, 2020
Check if an element is in the viewport
28 Mar, 2020
Swap two nodes
18 Mar, 2020
Count the number of characters of a textarea
18 Mar, 2020
Upload files with Ajax
17 Mar, 2020
Submit a form with Ajax
17 Mar, 2020
Serialize form data into a query string
17 Mar, 2020
Insert given HTML after or before an element
16 Mar, 2020
Detect mac OS browser
15 Mar, 2020
Strip HTML from a given text
10 Mar, 2020
Prevent the default action of an event
10 Mar, 2020
Get size of the selected file
10 Mar, 2020
Check if the native date input is supported
10 Mar, 2020
Detect if an element is focused
09 Mar, 2020
Determine the height and width of an element
03 Mar, 2020
Toggle password visibility
28 Feb, 2020
Toggle an element
28 Feb, 2020
Put cursor at the end of an input
28 Feb, 2020
Select the text of a textarea automatically
27 Feb, 2020
Create one time event handler
24 Feb, 2020
Check if an element is a descendant of another
22 Feb, 2020
Resize an iframe to fit its content
21 Feb, 2020
Replace broken images
21 Feb, 2020
Redirect to another page
21 Feb, 2020
Go back to the previous page
21 Feb, 2020
Get the size of an image
21 Feb, 2020
Get or set the document title
21 Feb, 2020
Scroll to top of the page
18 Feb, 2020
Reload the current page
18 Feb, 2020
Prepend to an element
18 Feb, 2020
Get the document height and width
18 Feb, 2020
Detect clicks outside of an element
18 Feb, 2020
Trigger an event
17 Feb, 2020
Show or hide an element
17 Feb, 2020
Set CSS style for an element
17 Feb, 2020
Get siblings of an element
17 Feb, 2020
Get, set and remove data attributes
17 Feb, 2020
Get, set and remove attributes
17 Feb, 2020
Get or set the HTML of an element
17 Feb, 2020
Get CSS styles of an element
17 Feb, 2020
Attach or detach an event handler
17 Feb, 2020
Append to an element
17 Feb, 2020
Wrap an element around a given element
16 Feb, 2020
Unwrap an element
16 Feb, 2020
Select the children of an element
16 Feb, 2020
Select an element or list of elements
16 Feb, 2020
Replace an element
16 Feb, 2020
Remove an element
16 Feb, 2020
Remove all children of a node
16 Feb, 2020
Loop over a nodelist
16 Feb, 2020
Insert an element after or before other element
16 Feb, 2020
Get the text content of an element
16 Feb, 2020
Get the parent node of an element
16 Feb, 2020
Get the closest element by given selector
16 Feb, 2020
Execute code when the document is ready
16 Feb, 2020
Create an element
16 Feb, 2020
Clone an element
16 Feb, 2020
Check if an element has given class
16 Feb, 2020
Check an element against a selector
16 Feb, 2020
Add or remove class from an element
16 Feb, 2020
Level 2 — Intermediate
Enter full-screen mode
22 Sep, 2023
Build a spin input
18 Sep, 2023
Build an OTP input field
17 Sep, 2023
Display a modal when users leave website
15 Sep, 2023
Waiting for an element to become available
13 Sep, 2023
Add a special message when users copy text
27 Aug, 2023
Get the direction of the text selection
24 Apr, 2020
Show a custom context menu at clicked position
21 Apr, 2020
Save and restore the text selection
19 Apr, 2020
Print an image
08 Apr, 2020
Show a ghost element when dragging an element
31 Mar, 2020
Allow to enter particular characters only
31 Mar, 2020
Paste as plain text
19 Mar, 2020
Paste an image from the clipboard
18 Mar, 2020
Export a table to csv
17 Mar, 2020
Scale a text to fit inside of an element
16 Mar, 2020
Resize an image
15 Mar, 2020
Placeholder for a contenteditable element
04 Mar, 2020
Detect if the caps lock is on
03 Mar, 2020
Calculate the size of scrollbar
03 Mar, 2020
Measure the width of given text of given font
28 Feb, 2020
Get the default value of a CSS property
28 Feb, 2020
Change the website favicon
28 Feb, 2020
Get the first scrollable parent of an element
27 Feb, 2020
Check if an element is scrollable
27 Feb, 2020
Copy text to the clipboard
24 Feb, 2020
Preview an image before uploading it
21 Feb, 2020
Download a file
21 Feb, 2020
Load a JavaScript file dynamically
18 Feb, 2020
Load a CSS file dynamically
18 Feb, 2020
Level 3 — Advanced
Create a custom cursor
21 Sep, 2023
Sanitize HTML strings
20 Sep, 2023
Create a custom scrollbar
03 May, 2020
Scroll to an element smoothly
26 Apr, 2020
Show or hide table columns
24 Apr, 2020
Drag to scroll
20 Apr, 2020
Copy highlighted code to the clipboard
19 Apr, 2020
Zoom an image
18 Apr, 2020
Create a range slider
07 Apr, 2020
Create an image comparison slider
06 Apr, 2020
Create resizable split views
04 Apr, 2020
Drag and drop table column
03 Apr, 2020
Drag and drop table row
02 Apr, 2020
Drag and drop element in a list
01 Apr, 2020
Sort a table by clicking its headers
08 Mar, 2020
Resize columns of a table
05 Mar, 2020
Make a resizable element
03 Mar, 2020
Make a draggable element
03 Mar, 2020
Tip
Avoid shifting layout when opening a modal
13 Sep, 2023
Get the bounding rectangle of a text node
30 Aug, 2023
Attach event handlers inside other handlers
24 Apr, 2020
Recent posts ⚡
Copy the content of an element to your clipboard
01 Oct, 2023
Make a text area fit its content automatically
30 Sep, 2023
Quickly insert alternate characters while typing
30 Sep, 2023
Zebra-like background
30 Sep, 2023
Add autocomplete to your text area
28 Sep, 2023
Linear scale of a number between two ranges
28 Sep, 2023
Highlight the current line in a text area
27 Sep, 2023
Create your own custom cursor in a text area
27 Sep, 2023
Mirror a text area for improving user experience
26 Sep, 2023
Display the line numbers in a text area
24 Sep, 2023
Highlight keywords in a text area
23 Sep, 2023
createDocumentFragment vs createElement
22 Sep, 2023
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