Manage HTML DOM with vanilla JavaScript

Star me on GitHub · 4932★

Basic

Loop over a nodelist
Press Shift and Enter for a new line
Prepend to an element
Prevent body from scrolling when opening a modal
Prevent the default action of an event
Prevent the page from scrolling to an element when it is focused
Put cursor at the end of an input
Redirect to another page
Reload the current page
Remove an element
Replace an element
Remove all children of a node
Replace broken images
Resize an iframe to fit its content
Scroll to an element
Select an element or list of elements
Scroll to top of the page
Select the children of an element
Select the text content of an element
Select the text of a textarea automatically
Serialize form data into a query string
Set CSS style for an element
Show or hide an element
Strip HTML from a given text
Swap two nodes
Submit a form with Ajax
Toggle an element
Trigger an event
Unwrap an element
Toggle password visibility
Upload files with Ajax
Wrap an element around a given element
Add or remove class from an element
Calculate the mouse position relative to an element
Append to an element
Attach or detach an event handler
Check an element against a selector
Check if an element is a descendant of another
Check if an element has given class
Check if an element is in the viewport
Check if the native date input is supported
Check if the code is running in the browser
Check if the touch events are supported
Clone an element
Count the number of characters of a textarea
Create an element
Create one time event handler
Detect clicks outside of an element
Detect mac OS browser
Detect internet explorer browser
Detect if an element is focused
Detect mobile browsers
Detect the dark mode
Determine the height and width of an element
Distinguish between left and right mouse clicks
Execute code when the document is ready
Get or set the document title
Get, set and remove attributes
Get CSS styles of an element
Get siblings of an element
Get or set the HTML of an element
Get, set and remove data attributes
Get the closest element by given selector
Get size of the selected file
Get the document height and width
Get the parent node of an element
Get the position of an element relative to the document
Get the position of an element relative to another
Get the selected text
Get the text content of an element
Get the size of an image
Go back to the previous page
Insert an element after or before other element
Insert given HTML after or before an element

Intermediate

Load a JavaScript file dynamically
Measure the width of given text of given font
Paste an image from the clipboard
Paste as plain text
Placeholder for a contenteditable element
Position an element absolutely to another element
Preview an image before uploading it
Print an image
Resize an image
Resize the width of a text box to fit its content automatically
Save and restore the text selection
Scale a text to fit inside of an element
Scroll an element to ensure it is visible in a scrollable container
Show a custom context menu at clicked position
Show a loading indicator when an iframe is being loaded
Show a ghost element when dragging an element
Allow to enter particular characters only
Calculate the size of scrollbar
Change the website favicon
Check if an element is visible in a scrollable container
Check if an element is scrollable
Copy text to the clipboard
Communication between an iframe and its parent window
Detect if the caps lock is on
Download a file
Export a table to csv
Get the default value of a CSS property
Get the direction of the text selection
Get the first scrollable parent of an element
Highlight an element when dragging a file over it
Load a CSS file dynamically

Advanced

Make a draggable element
Make a resizable element
Resize columns of a table
Scroll to an element smoothly
Show or hide table columns
Sort a table by clicking its headers
Zoom an image
Copy highlighted code to the clipboard
Create a custom scrollbar
Create a range slider
Create an image comparison slider
Create resizable split views
Drag and drop element in a list
Drag and drop table row
Drag to scroll
Drag and drop table column

Tip

Attach event handlers inside other handlers
Follow me on and to get more useful contents.