https://phuoc.ng/collection/html-dom/ * Phuoc Nguyen * Collections * Latest * * Mastering DOM manipulation with vanilla JavaScript Star me on GitHub - 5400 Web development moves at lightning speed. I still remember when I first started using libraries like jQuery, Prototype, script.aculo.us , Zepto, and many more. Even with modern tools like Angular, VueJS, React, Solid and Svelte, we still have to deal with the Document Object Model (DOM). While these frameworks encapsulate and hide direct DOM management, they still give us access to work with the DOM via refs and event handlers. Whether you're developing or using a web component in any framework, you need to work with the DOM at a certain level. Knowing the browser DOM APIs and how to use them is crucial to web development. A website that introduces the APIs, highlights common problems, and provides answers to popular questions can be incredibly useful. That's why I've put together this collection of resources: * No external libraries, just native browser APIs * Small, easy-to-understand examples * Live demos * Tips and best practices included * Real-life use cases * Works with modern browsers and [DEL:even supports Internet Explorer:DEL] Get ready to master DOM manipulation with vanilla JavaScript. Level 1 -- Basic Change the favicon dynamically based on user's color scheme preference 17 Oct, 2023 Select a given line in a text area 24 Sep, 2023 Calculate the reading time of a webpage 23 Sep, 2023 Dynamically update CSS root variables 21 Sep, 2023 Insert HTML at the current position of a contentEditable element 20 Sep, 2023 Insert text into a text area at the current position 19 Sep, 2023 Move the cursor to the end of a contentEditable element 18 Sep, 2023 Get or set the cursor position in a text field 17 Sep, 2023 Display a confirm modal when closing the browser 15 Sep, 2023 Make a textarea auto-expand 03 Sep, 2023 Check if users click outside of selected text 02 Sep, 2023 Prevent the page from scrolling to an element when it is focused 19 Oct, 2021 Detect the dark mode 03 May, 2020 Check if the code is running in the browser 03 May, 2020 Detect mobile browsers 25 Apr, 2020 Check if the touch events are supported 25 Apr, 2020 Detect internet explorer browser 24 Apr, 2020 Select the text content of an element 19 Apr, 2020 Get the selected text 19 Apr, 2020 Prevent body from scrolling when opening a modal 18 Apr, 2020 Scroll to an element 08 Apr, 2020 Calculate the mouse position relative to an element 02 Apr, 2020 Press Shift and Enter for a new line 01 Apr, 2020 Distinguish between left and right mouse clicks 01 Apr, 2020 Check if an element is in the viewport 28 Mar, 2020 Swap two nodes 18 Mar, 2020 Count the number of characters of a textarea 18 Mar, 2020 Upload files with Ajax 17 Mar, 2020 Submit a form with Ajax 17 Mar, 2020 Serialize form data into a query string 17 Mar, 2020 Insert given HTML after or before an element 16 Mar, 2020 Detect mac OS browser 15 Mar, 2020 Strip HTML from a given text 10 Mar, 2020 Prevent the default action of an event 10 Mar, 2020 Get size of the selected file 10 Mar, 2020 Check if the native date input is supported 10 Mar, 2020 Detect if an element is focused 09 Mar, 2020 Determine the height and width of an element 03 Mar, 2020 Toggle password visibility 28 Feb, 2020 Toggle an element 28 Feb, 2020 Put cursor at the end of an input 28 Feb, 2020 Select the text of a textarea automatically 27 Feb, 2020 Create one time event handler 24 Feb, 2020 Check if an element is a descendant of another 22 Feb, 2020 Resize an iframe to fit its content 21 Feb, 2020 Replace broken images 21 Feb, 2020 Redirect to another page 21 Feb, 2020 Go back to the previous page 21 Feb, 2020 Get the size of an image 21 Feb, 2020 Get the position of an element relative to another 21 Feb, 2020 Get or set the document title 21 Feb, 2020 Get the position of an element relative to the document 19 Feb, 2020 Scroll to top of the page 18 Feb, 2020 Reload the current page 18 Feb, 2020 Prepend to an element 18 Feb, 2020 Get the document height and width 18 Feb, 2020 Detect clicks outside of an element 18 Feb, 2020 Trigger an event 17 Feb, 2020 Show or hide an element 17 Feb, 2020 Set CSS style for an element 17 Feb, 2020 Get siblings of an element 17 Feb, 2020 Get, set and remove data attributes 17 Feb, 2020 Get, set and remove attributes 17 Feb, 2020 Get or set the HTML of an element 17 Feb, 2020 Get CSS styles of an element 17 Feb, 2020 Attach or detach an event handler 17 Feb, 2020 Append to an element 17 Feb, 2020 Wrap an element around a given element 16 Feb, 2020 Unwrap an element 16 Feb, 2020 Select the children of an element 16 Feb, 2020 Select an element or list of elements 16 Feb, 2020 Replace an element 16 Feb, 2020 Remove an element 16 Feb, 2020 Remove all children of a node 16 Feb, 2020 Loop over a nodelist 16 Feb, 2020 Insert an element after or before other element 16 Feb, 2020 Get the text content of an element 16 Feb, 2020 Get the parent node of an element 16 Feb, 2020 Get the closest element by given selector 16 Feb, 2020 Execute code when the document is ready 16 Feb, 2020 Create an element 16 Feb, 2020 Clone an element 16 Feb, 2020 Check if an element has given class 16 Feb, 2020 Check an element against a selector 16 Feb, 2020 Add or remove class from an element 16 Feb, 2020 Level 2 -- Intermediate Remove indentation in a text area using the Shift+Tab key combination 03 Oct, 2023 Truncate the content of an element 02 Oct, 2023 Jump to the beginning or end of the current line in a text area 25 Sep, 2023 Count how many lines a given string takes up in a text area 24 Sep, 2023 Enter full-screen mode 22 Sep, 2023 Indent content in a text area using the Tab key 20 Sep, 2023 Build a spin input 18 Sep, 2023 Get or set the cursor position in a contentEditable element 17 Sep, 2023 Build an OTP input field 17 Sep, 2023 Display a modal when users leave website 15 Sep, 2023 Waiting for an element to become available 13 Sep, 2023 Automatically resize an iframe when its content height changes 13 Sep, 2023 Add a special message when users copy text 27 Aug, 2023 Scroll an element to ensure it is visible in a scrollable container 03 May, 2020 Position an element absolutely to another element 02 May, 2020 Check if an element is visible in a scrollable container 02 May, 2020 Get the direction of the text selection 24 Apr, 2020 Show a custom context menu at clicked position 21 Apr, 2020 Save and restore the text selection 19 Apr, 2020 Print an image 08 Apr, 2020 Show a loading indicator when an iframe is being loaded 06 Apr, 2020 Show a ghost element when dragging an element 31 Mar, 2020 Allow to enter particular characters only 31 Mar, 2020 Paste as plain text 19 Mar, 2020 Paste an image from the clipboard 18 Mar, 2020 Export a table to csv 17 Mar, 2020 Scale a text to fit inside of an element 16 Mar, 2020 Resize an image 15 Mar, 2020 Highlight an element when dragging a file over it 09 Mar, 2020 Communication between an iframe and its parent window 08 Mar, 2020 Placeholder for a contenteditable element 04 Mar, 2020 Detect if the caps lock is on 03 Mar, 2020 Calculate the size of scrollbar 03 Mar, 2020 Resize the width of a text box to fit its content automatically 29 Feb, 2020 Measure the width of given text of given font 28 Feb, 2020 Get the default value of a CSS property 28 Feb, 2020 Change the website favicon 28 Feb, 2020 Get the first scrollable parent of an element 27 Feb, 2020 Check if an element is scrollable 27 Feb, 2020 Copy text to the clipboard 24 Feb, 2020 Preview an image before uploading it 21 Feb, 2020 Download a file 21 Feb, 2020 Load a JavaScript file dynamically 18 Feb, 2020 Load a CSS file dynamically 18 Feb, 2020 Level 3 -- Advanced Create a custom cursor 21 Sep, 2023 Sanitize HTML strings 20 Sep, 2023 Detect if users open another tab of the current page 18 Sep, 2023 Show an addition toolbar after users selects text 02 Sep, 2023 Create a custom scrollbar 03 May, 2020 Scroll to an element smoothly 26 Apr, 2020 Show or hide table columns 24 Apr, 2020 Drag to scroll 20 Apr, 2020 Copy highlighted code to the clipboard 19 Apr, 2020 Zoom an image 18 Apr, 2020 Create a range slider 07 Apr, 2020 Create an image comparison slider 06 Apr, 2020 Create resizable split views 04 Apr, 2020 Drag and drop table column 03 Apr, 2020 Drag and drop table row 02 Apr, 2020 Drag and drop element in a list 01 Apr, 2020 Sort a table by clicking its headers 08 Mar, 2020 Resize columns of a table 05 Mar, 2020 Make a resizable element 03 Mar, 2020 Make a draggable element 03 Mar, 2020 Tip Avoid shifting layout when opening a modal 13 Sep, 2023 Get the bounding rectangle of a text node 30 Aug, 2023 Attach event handlers inside other handlers 24 Apr, 2020 Recent posts [?] Scroll by dragging 03 Nov, 2023 Create an image comparison slider 02 Nov, 2023 Create a drawer 01 Nov, 2023 Create resizable split views 31 Oct, 2023 Create a range slider 30 Oct, 2023 Create a custom draggable hook 29 Oct, 2023 Make an element draggable on touchscreen devices 28 Oct, 2023 Make a given element draggable 27 Oct, 2023 Build a tooltip component 26 Oct, 2023 Pass a ref to a child component using forwardRef() 25 Oct, 2023 Expose methods of a component using useImperativeHandle() 25 Oct, 2023 Merge different refs 24 Oct, 2023 Make an element draggable 23 Oct, 2023 Create a custom hook returning a callback ref 22 Oct, 2023 Save the element passed to a callback ref as a state 21 Oct, 2023 See more- Newsletter If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter. By subscribing, you'll be the first to know about new articles, products, and exclusive promotions. Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time. [ ][ ][Subscribe] Phuoc Nguyen Collections * 1 LOC * Cross Browser * CSS Animation * CSS Layout * Front-end Tips * HTML DOM * this vs that In-depth * Mirror a text area * Grid layout * Master of React ref * The power of React context * Drag and drop in React * IntersectionObserver with React Products * BlurPage * Form Validation * React PDF Viewer Contact me * Twitter * GitHub * Email (c) 2019 -- 2023 Phuoc Nguyen. All rights reserved.