</dom>
how to manage HTML DOM
with
vanilla JavaScript
only?
for modern browsers and IE 11+
GitHub ∙ 1.1k ★
01 — Add or remove class from an element
basic
02 — Allow to enter particular characters only
intermediate
03 — Append to an element
basic
04 — Attach or detach an event handler
basic
05 — Calculate the mouse position relative to an element
basic
06 — Calculate the size of scrollbar
intermediate
07 — Change the website favicon
intermediate
08 — Check an element against a selector
basic
09 — Check if an element has given class
basic
10 — Check if an element is a descendant of another
basic
11 — Check if an element is in the viewport
basic
12 — Check if an element is scrollable
intermediate
13 — Check if the native date input is supported
basic
14 — Clone an element
basic
15 — Communication between an iframe and its parent window
intermediate
16 — Copy text to the clipboard
intermediate
17 — Count the number of characters of a textarea
basic
18 — Create an element
basic
19 — Create an image comparison slider
advanced
20 — Create one time event handler
basic
21 — Create resizable split views
advanced
22 — Detect clicks outside of an element
basic
23 — Detect if an element is focused
basic
24 — Detect if the caps lock is on
intermediate
25 — Detect mac os browser
basic
26 — Determine the height and width of an element
basic
27 — Distinguish between left and right mouse clicks
basic
28 — Download a file
intermediate
29 — Drag and drop element in a list
advanced
30 — Drag and drop table column
advanced
31 — Drag and drop table row
advanced
32 — Execute code when the document is ready
basic
33 — Export a table to csv
intermediate
34 — Get css styles of an element
basic
35 — Get or set the document title
basic
36 — Get or set the html of an element
basic
37 — Get set and remove attributes
basic
38 — Get set and remove data attributes
basic
39 — Get siblings of an element
basic
40 — Get size of the selected file
basic
41 — Get the closest element by given selector
basic
42 — Get the default value of a css property
intermediate
43 — Get the document height and width
basic
44 — Get the first scrollable parent of an element
intermediate
45 — Get the parent node of an element
basic
46 — Get the position of an element relative to another
basic
47 — Get the position of an element relative to the document
basic
48 — Get the size of an image
basic
49 — Get the text content of an element
basic
50 — Go back to the previous page
basic
51 — Highlight an element when dragging a file over it
intermediate
52 — Insert an element after or before other element
basic
53 — Insert given html after or before an element
basic
54 — Load a css file dynamically
intermediate
55 — Load a javascript file dynamically
intermediate
56 — Loop over a nodelist
basic
57 — Make a draggable element
advanced
58 — Make a resizable element
advanced
59 — Measure the width of given text of given font
intermediate
60 — Paste an image from the clipboard
intermediate
61 — Paste as plain text
intermediate
62 — Placeholder for a contenteditable element
intermediate
63 — Prepend to an element
basic
64 — Press shift and enter for a new line
basic
65 — Prevent the default action of an event
basic
66 — Preview an image before uploading it
intermediate
67 — Put cursor at the end of an input
basic
68 — Redirect to another page
basic
69 — Reload the current page
basic
70 — Remove all children of a node
basic
71 — Remove an element
basic
72 — Replace an element
basic
73 — Replace broken images
basic
74 — Resize an iframe to fit its content
basic
75 — Resize an image
intermediate
76 — Resize columns of a table
advanced
77 — Resize the width of a text box to fit its content automatically
intermediate
78 — Scale a text to fit inside of an element
intermediate
79 — Scroll to top of the page
basic
80 — Select an element or list of elements
basic
81 — Select the children of an element
basic
82 — Select the text of a textarea automatically
basic
83 — Serialize form data into a query string
basic
84 — Set css style for an element
basic
85 — Show a ghost element when dragging an element
intermediate
86 — Show a loading indicator when an iframe is being loaded
intermediate
87 — Show or hide an element
basic
88 — Sort a table by clicking its headers
advanced
89 — Strip html from a given text
basic
90 — Submit a form with ajax
basic
91 — Swap two nodes
basic
92 — Toggle an element
basic
93 — Toggle password visibility
basic
94 — Trigger an event
basic
95 — Unwrap an element
basic
96 — Upload files with ajax
basic
97 — Wrap an element around a given element
basic
Hit the Subscribe button for the latest news on my tools. No spam. Ever!
Subscribe
Products
Blur Page
a browser extension to hide sensitive element on page
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
Follow me
I love building products!
Twitter
@nghuuphuoc
dev.to
@phuocng
GitHub
@phuoc-ng
© 2020 Nguyen Huu Phuoc. All rights reserved