Manage HTML DOM with vanilla JavaScript

Why

Web development goes very fast. I still remember the moments when starting to use jQuery, Prototype, script.aculo.us, Zepto and many more.

Nowadays, even if our application is powered by mordern tools such as Angular, Vue, React, Svelte, .etc, we have to deal with DOM. The frameworks encapsulate and hide the DOM management directly, but still give us a door to work with DOM via ref, event handlers.

If you develop or use a web component in any framework, you have to work with DOM at a certain level.

Knowing the browser DOM APIs and how to use them play an important role in web development. A website introducing the APIs, well-known problems, most popular questions could be very useful.

Covers

Examples

Basic

Add or remove class from an element

Basic

Append to an element

Basic

Calculate the mouse position relative to an element

Intermediate

Calculate the size of scrollbar

Intermediate

Change the website favicon

Basic

Check an element against a selector

Basic

Check if an element has given class

Basic

Check if an element is a descendant of another

Basic

Check if an element is in the viewport

Intermediate

Check if an element is scrollable

Intermediate

Check if an element is visible in a scrollable container

Intersection Observer Examples

Practical, real world examples of IntersectionObserver

Basic

Check if the code is running in the browser

Basic

Check if the native date input is supported

Basic

Check if the touch events are supported

Intermediate

Copy text to the clipboard

Basic

Create an element

Basic

Detect clicks outside of an element

Basic

Detect if an element is focused

Basic

Detect mac os browser

Basic

Detect mobile browsers

Basic

Determine the height and width of an element

Basic

Distinguish between left and right mouse clicks

Blur Page

A browser extension to hide sensitive information on a web page

Basic

Execute code when the document is ready

Basic

Get css styles of an element

Basic

Get or set the document title

Basic

Get or set the html of an element

Basic

Get set and remove attributes

Basic

Get set and remove data attributes

Basic

Get siblings of an element

Basic

Get the closest element by given selector

Basic

Get the document height and width

Basic

Get the parent node of an element

Basic

Get the position of an element relative to another

Check Browsers Support

Check browser compatibility without leaving your tab

Basic

Get the position of an element relative to the document

Basic

Get the selected text

Basic

Go back to the previous page

Basic

Insert an element after or before other element

Basic

Insert given html after or before an element

Intermediate

Load a css file dynamically

Basic

Loop over a nodelist

Intermediate

Measure the width of given text of given font

Basic

Prepend to an element

Basic

Prevent body from scrolling when opening a modal

Intermediate

Preview an image before uploading it

Form Validation

The best validation library for JavaScript

Basic

Redirect to another page

Basic

Reload the current page

Basic

Remove an element

Basic

Replace an element

Basic

Replace broken images

Intermediate

Save and restore the text selection

Basic

Select the children of an element

Basic

Select the text content of an element

Basic

Select the text of a textarea automatically

Basic

Set css style for an element

Basic

Show or hide an element

React PDF Viewer

A React component to view a PDF document

Basic

Submit a form with ajax

Basic

Swap two nodes

Basic

Toggle an element

Basic

Trigger an event

Basic

Unwrap an element

Basic

Upload files with ajax

Basic

Wrap an element around a given element

Basic

Select an element or list of elements

Intermediate

Paste an image from the clipboard

Intermediate

Paste as plain text

Basic

Press shift and enter for a new line

1 LOC

Favorite JavaScript utilities in single line of code

Basic

Toggle password visibility

Intermediate

Communication between an iframe and its parent window

Tip

Attach event handlers inside other handlers

Basic

Attach or detach an event handler

Basic

Clone an element

Advanced

Copy highlighted code to the clipboard

Basic

Count the number of characters of a textarea

Advanced

Create a custom scrollbar

Advanced

Create a range slider

Basic

Create one time event handler

Intermediate

Detect if the caps lock is on

CSS Layout

A collection of popular layouts and patterns made with CSS

Basic

Detect internet explorer browser

Basic

Detect the dark mode

Intermediate

Download a file

Advanced

Drag to scroll

Intermediate

Get the default value of a css property

Intermediate

Get the direction of the text selection

Intermediate

Get the first scrollable parent of an element

Basic

Get the text content of an element

Intermediate

Highlight an element when dragging a file over it

Intermediate

Load a javascript file dynamically

Intermediate

Placeholder for a contenteditable element

Front-end Tips

Super tiny, quick tips, tricks and best practices of front-end development

Basic

Prevent the default action of an event

Intermediate

Print an image

Basic

Put cursor at the end of an input

Basic

Remove all children of a node

Intermediate

Resize an image

Intermediate

Resize the width of a text box to fit its content automatically

Intermediate

Scroll an element to ensure it is visible in a scrollable container

Advanced

Scroll to an element smoothly

Basic

Scroll to an element

Basic

Scroll to top of the page

Intermediate

Show a ghost element when dragging an element

HTML DOM

How to manage HTML DOM with vanilla JavaScript

Intermediate

Show a loading indicator when an iframe is being loaded

Advanced

Sort a table by clicking its headers

Basic

Strip html from a given text

Intermediate

Allow to enter particular characters only

Advanced

Create an image comparison slider

Advanced

Create resizable split views

Advanced

Drag and drop element in a list

Advanced

Drag and drop table column

Advanced

Drag and drop table row

Intermediate

Export a table to csv

Basic

Get size of the selected file

Responsive Design Patterns

A collection of patterns to create a responsive web page

Basic

Get the size of an image

Advanced

Make a draggable element

Advanced

Make a resizable element

Intermediate

Position an element absolutely to another element

Basic

Resize an iframe to fit its content

Advanced

Resize columns of a table

Intermediate

Scale a text to fit inside of an element

Basic

Serialize form data into a query string

Intermediate

Show a custom context menu at clicked position

Advanced

Show or hide table columns

Advanced

Zoom an image

this VS that

The differences between _ and _ in the front-end development