how to manage HTML DOM

with vanilla JavaScript only?

for modern browsers and IE 11+

GitHub ∙ 3100 ★

1 — Add or remove class from an elementbasic
2 — Allow to enter particular characters onlyintermediate
3 — Append to an elementbasic
4 — Attach event handlers inside other handlerstip
5 — Attach or detach an event handlerbasic
6 — Calculate the mouse position relative to an elementbasic
7 — Calculate the size of scrollbarintermediate
8 — Change the website faviconintermediate
9 — Check an element against a selectorbasic
10 — Check if an element has given classbasic
11 — Check if an element is a descendant of anotherbasic
12 — Check if an element is in the viewportbasic
13 — Check if an element is scrollableintermediate
14 — Check if an element is visible in a scrollable containerintermediate
15 — Check if the code is running in the browserbasic
16 — Check if the native date input is supportedbasic
17 — Check if the touch events are supportedbasic
18 — Clone an elementbasic
19 — Communication between an iframe and its parent windowintermediate
20 — Copy highlighted code to the clipboardadvanced
21 — Copy text to the clipboardintermediate
22 — Count the number of characters of a textareabasic
23 — Create a custom scrollbaradvanced
24 — Create a range slideradvanced
25 — Create an elementbasic
26 — Create an image comparison slideradvanced
27 — Create one time event handlerbasic
28 — Create resizable split viewsadvanced
29 — Detect clicks outside of an elementbasic
30 — Detect if an element is focusedbasic
31 — Detect if the caps lock is onintermediate
32 — Detect internet explorer browserbasic
33 — Detect mac os browserbasic
34 — Detect mobile browsersbasic
35 — Detect the dark modebasic
36 — Determine the height and width of an elementbasic
37 — Distinguish between left and right mouse clicksbasic
38 — Download a fileintermediate
39 — Drag and drop element in a listadvanced
40 — Drag and drop table columnadvanced
41 — Drag and drop table rowadvanced
42 — Drag to scrolladvanced
43 — Execute code when the document is readybasic
44 — Export a table to csvintermediate
45 — Get css styles of an elementbasic
46 — Get or set the document titlebasic
47 — Get or set the html of an elementbasic
48 — Get set and remove attributesbasic
49 — Get set and remove data attributesbasic
50 — Get siblings of an elementbasic
51 — Get size of the selected filebasic
52 — Get the closest element by given selectorbasic
53 — Get the default value of a css propertyintermediate
54 — Get the direction of the text selectionintermediate
55 — Get the document height and widthbasic
56 — Get the first scrollable parent of an elementintermediate
57 — Get the parent node of an elementbasic
58 — Get the position of an element relative to anotherbasic
59 — Get the position of an element relative to the documentbasic
60 — Get the selected textbasic
61 — Get the size of an imagebasic
62 — Get the text content of an elementbasic
63 — Go back to the previous pagebasic
64 — Highlight an element when dragging a file over itintermediate
65 — Insert an element after or before other elementbasic
66 — Insert given html after or before an elementbasic
67 — Load a css file dynamicallyintermediate
68 — Load a javascript file dynamicallyintermediate
69 — Loop over a nodelistbasic
70 — Make a draggable elementadvanced
71 — Make a resizable elementadvanced
72 — Measure the width of given text of given fontintermediate
73 — Paste an image from the clipboardintermediate
74 — Paste as plain textintermediate
75 — Placeholder for a contenteditable elementintermediate
76 — Position an element absolutely to another elementintermediate
77 — Prepend to an elementbasic
78 — Press shift and enter for a new linebasic
79 — Prevent body from scrolling when opening a modalbasic
80 — Prevent the default action of an eventbasic
81 — Preview an image before uploading itintermediate
82 — Print an imageintermediate
83 — Put cursor at the end of an inputbasic
84 — Redirect to another pagebasic
85 — Reload the current pagebasic
86 — Remove all children of a nodebasic
87 — Remove an elementbasic
88 — Replace an elementbasic
89 — Replace broken imagesbasic
90 — Resize an iframe to fit its contentbasic
91 — Resize an imageintermediate
92 — Resize columns of a tableadvanced
93 — Resize the width of a text box to fit its content automaticallyintermediate
94 — Save and restore the text selectionintermediate
95 — Scale a text to fit inside of an elementintermediate
96 — Scroll an element to ensure it is visible in a scrollable containerintermediate
97 — Scroll to an elementbasic
98 — Scroll to an element smoothlyadvanced
99 — Scroll to top of the pagebasic
100 — Select an element or list of elementsbasic
101 — Select the children of an elementbasic
102 — Select the text content of an elementbasic
103 — Select the text of a textarea automaticallybasic
104 — Serialize form data into a query stringbasic
105 — Set css style for an elementbasic
106 — Show a custom context menu at clicked positionintermediate
107 — Show a ghost element when dragging an elementintermediate
108 — Show a loading indicator when an iframe is being loadedintermediate
109 — Show or hide an elementbasic
110 — Show or hide table columnsadvanced
111 — Sort a table by clicking its headersadvanced
112 — Strip html from a given textbasic
113 — Submit a form with ajaxbasic
114 — Swap two nodesbasic
115 — Toggle an elementbasic
116 — Toggle password visibilitybasic
117 — Trigger an eventbasic
118 — Unwrap an elementbasic
119 — Upload files with ajaxbasic
120 — Wrap an element around a given elementbasic
121 — Zoom an imageadvanced

Hit the Subscribe button for the latest news on my tools. No spam. Ever!

Products

1 LOCnew
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