</dom>
how to manage HTML DOM
with
vanilla JavaScript
only?
for modern browsers and IE 11+
GitHub ∙ 3100 ★
1 — Add or remove class from an element
basic
2 — Allow to enter particular characters only
intermediate
3 — Append to an element
basic
4 — Attach event handlers inside other handlers
tip
5 — Attach or detach an event handler
basic
6 — Calculate the mouse position relative to an element
basic
7 — Calculate the size of scrollbar
intermediate
8 — Change the website favicon
intermediate
9 — Check an element against a selector
basic
10 — Check if an element has given class
basic
11 — Check if an element is a descendant of another
basic
12 — Check if an element is in the viewport
basic
13 — Check if an element is scrollable
intermediate
14 — Check if an element is visible in a scrollable container
intermediate
15 — Check if the code is running in the browser
basic
16 — Check if the native date input is supported
basic
17 — Check if the touch events are supported
basic
18 — Clone an element
basic
19 — Communication between an iframe and its parent window
intermediate
20 — Copy highlighted code to the clipboard
advanced
21 — Copy text to the clipboard
intermediate
22 — Count the number of characters of a textarea
basic
23 — Create a custom scrollbar
advanced
24 — Create a range slider
advanced
25 — Create an element
basic
26 — Create an image comparison slider
advanced
27 — Create one time event handler
basic
28 — Create resizable split views
advanced
29 — Detect clicks outside of an element
basic
30 — Detect if an element is focused
basic
31 — Detect if the caps lock is on
intermediate
32 — Detect internet explorer browser
basic
33 — Detect mac os browser
basic
34 — Detect mobile browsers
basic
35 — Detect the dark mode
basic
36 — Determine the height and width of an element
basic
37 — Distinguish between left and right mouse clicks
basic
38 — Download a file
intermediate
39 — Drag and drop element in a list
advanced
40 — Drag and drop table column
advanced
41 — Drag and drop table row
advanced
42 — Drag to scroll
advanced
43 — Execute code when the document is ready
basic
44 — Export a table to csv
intermediate
45 — Get css styles of an element
basic
46 — Get or set the document title
basic
47 — Get or set the html of an element
basic
48 — Get set and remove attributes
basic
49 — Get set and remove data attributes
basic
50 — Get siblings of an element
basic
51 — Get size of the selected file
basic
52 — Get the closest element by given selector
basic
53 — Get the default value of a css property
intermediate
54 — Get the direction of the text selection
intermediate
55 — Get the document height and width
basic
56 — Get the first scrollable parent of an element
intermediate
57 — Get the parent node of an element
basic
58 — Get the position of an element relative to another
basic
59 — Get the position of an element relative to the document
basic
60 — Get the selected text
basic
61 — Get the size of an image
basic
62 — Get the text content of an element
basic
63 — Go back to the previous page
basic
64 — Highlight an element when dragging a file over it
intermediate
65 — Insert an element after or before other element
basic
66 — Insert given html after or before an element
basic
67 — Load a css file dynamically
intermediate
68 — Load a javascript file dynamically
intermediate
69 — Loop over a nodelist
basic
70 — Make a draggable element
advanced
71 — Make a resizable element
advanced
72 — Measure the width of given text of given font
intermediate
73 — Paste an image from the clipboard
intermediate
74 — Paste as plain text
intermediate
75 — Placeholder for a contenteditable element
intermediate
76 — Position an element absolutely to another element
intermediate
77 — Prepend to an element
basic
78 — Press shift and enter for a new line
basic
79 — Prevent body from scrolling when opening a modal
basic
80 — Prevent the default action of an event
basic
81 — Preview an image before uploading it
intermediate
82 — Print an image
intermediate
83 — Put cursor at the end of an input
basic
84 — Redirect to another page
basic
85 — Reload the current page
basic
86 — Remove all children of a node
basic
87 — Remove an element
basic
88 — Replace an element
basic
89 — Replace broken images
basic
90 — Resize an iframe to fit its content
basic
91 — Resize an image
intermediate
92 — Resize columns of a table
advanced
93 — Resize the width of a text box to fit its content automatically
intermediate
94 — Save and restore the text selection
intermediate
95 — Scale a text to fit inside of an element
intermediate
96 — Scroll an element to ensure it is visible in a scrollable container
intermediate
97 — Scroll to an element
basic
98 — Scroll to an element smoothly
advanced
99 — Scroll to top of the page
basic
100 — Select an element or list of elements
basic
101 — Select the children of an element
basic
102 — Select the text content of an element
basic
103 — Select the text of a textarea automatically
basic
104 — Serialize form data into a query string
basic
105 — Set css style for an element
basic
106 — Show a custom context menu at clicked position
intermediate
107 — Show a ghost element when dragging an element
intermediate
108 — Show a loading indicator when an iframe is being loaded
intermediate
109 — Show or hide an element
basic
110 — Show or hide table columns
advanced
111 — Sort a table by clicking its headers
advanced
112 — Strip html from a given text
basic
113 — Submit a form with ajax
basic
114 — Swap two nodes
basic
115 — Toggle an element
basic
116 — Toggle password visibility
basic
117 — Trigger an event
basic
118 — Unwrap an element
basic
119 — Upload files with ajax
basic
120 — Wrap an element around a given element
basic
121 — Zoom an image
advanced
Hit the Subscribe button for the latest news on my tools. No spam. Ever!
Subscribe
Products
1 LOC
new
favorite JavaScript utilities in single line of code
Blur Page
a browser extension to hide sensitive element on page
Check Browsers Support
a browser extension to check browser compatibility without leaving your tab
CSS Layout
a collection of popular layouts and patterns made with CSS
Fake Numbers
a JavaScript library to fake a number
Form Validation
the best validation library for JavaScript
HTML DOM
common tasks of managing HTML DOM with vanilla JavaScript
React PDF Viewer
a PDF viewer made for React
this VS that
the differences between ___ and ___ in the front-end development
Follow me
I love building products!
Twitter
@nghuuphuoc
dev.to
@phuocng
GitHub
@phuoc-ng
© 2020 Nguyen Huu Phuoc. All rights reserved