Manage HTML DOM with vanilla JavaScript

Star me on GitHub ● 5008★

Basic

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

Intermediate

Resize the width of a text box to fit its content automatically
Scale a text to fit inside of an element
Scroll an element to ensure it is visible in a scrollable container
Save and restore the text selection
Show a loading indicator when an iframe is being loaded
Show a custom context menu at clicked position
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 first scrollable parent of an element
Get the direction of the text selection
Highlight an element when dragging a file over it
Load a CSS file dynamically
Load a JavaScript file dynamically
Paste an image from the clipboard
Measure the width of given text of given font
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

Advanced

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 resizable split views
Create an image comparison slider
Drag to scroll
Drag and drop element in a list
Drag and drop table row
Drag and drop table column
Make a resizable element
Make a draggable element
Resize columns of a table

Tip

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