html dom - manage html dom with vanilla javascript (https://htmldom.dev)

page = html dom - manage html dom with vanilla javascript

url = https://htmldom.dev analysed @ 2021-05-07 14:08 UTC

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
No external library. Only native browsers' APIs
Small and easy to understand examples
Include live demos you can play and see in action
Many tips and good practices included
Many real use cases that can be reused in your app
Work with the modern browsers. Try to support IE 11
Examples
Basic
Add or remove class from an element

Append to an element

Calculate the mouse position relative to an element

Intermediate
Calculate the size of scrollbar

Change the website favicon

Check an element against a selector

Check if an element has given class

Check if an element is a descendant of another

Check if an element is in the viewport

Check if an element is scrollable

Check if an element is visible in a scrollable container

Intersection Observer Examples Practical, real world examples of IntersectionObserver

Check if the code is running in the browser

Check if the native date input is supported

Check if the touch events are supported

Copy text to the clipboard

Create an element

Detect clicks outside of an element

Detect if an element is focused

Detect mac os browser

Detect mobile browsers

Determine the height and width of an element

Distinguish between left and right mouse clicks

Blur Page A browser extension to hide sensitive information on a web page

Execute code when the document is ready

Get css styles of an element

Get or set the document title

Get or set the html of an element

Get set and remove attributes

Get set and remove data attributes

Get siblings of an element

Get the closest element by given selector

Get the document height and width

Get the parent node of an element

Get the position of an element relative to another

Check Browsers Support Check browser compatibility without leaving your tab

Get the position of an element relative to the document

Get the selected text

Go back to the previous page

Insert an element after or before other element

Insert given html after or before an element

Load a css file dynamically

Loop over a nodelist

Measure the width of given text of given font

Prepend to an element

Prevent body from scrolling when opening a modal

Preview an image before uploading it

Form Validation The best validation library for JavaScript

Redirect to another page

Reload the current page

Remove an element

Replace an element

Replace broken images

Save and restore the text selection

Select the children of an element

Select the text content of an element

Select the text of a textarea automatically

Set css style for an element

Show or hide an element

React PDF Viewer A React component to view a PDF document

Submit a form with ajax

Toggle an element

Trigger an event

Unwrap an element

Upload files with ajax

Wrap an element around a given element

Select an element or list of elements

Paste an image from the clipboard

Paste as plain text

Press shift and enter for a new line

1 LOC Favorite JavaScript utilities in single line of code

Toggle password visibility

Communication between an iframe and its parent window

Tip
Attach event handlers inside other handlers

Attach or detach an event handler

Clone an element

Advanced
Copy highlighted code to the clipboard

Count the number of characters of a textarea

Create a custom scrollbar

Create a range slider

Create one time event handler

Detect if the caps lock is on

CSS Layout A collection of popular layouts and patterns made with CSS

Detect internet explorer browser

Detect the dark mode

Download a file

Get the default value of a css property

Get the direction of the text selection

Get the first scrollable parent of an element

Get the text content of an element

Highlight an element when dragging a file over it

Load a javascript file dynamically

Placeholder for a contenteditable element

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

Prevent the default action of an event

Put cursor at the end of an input

Remove all children of a node

Resize an image

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

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

Scroll to an element smoothly

Scroll to an element

Scroll to top of the page

Show a ghost element when dragging an element

HTML DOM How to manage HTML DOM with vanilla JavaScript

Show a loading indicator when an iframe is being loaded

Sort a table by clicking its headers

Strip html from a given text

Allow to enter particular characters only

Create an image comparison slider

Create resizable split views

Drag and drop element in a list

Drag and drop table column

Drag and drop table row

Export a table to csv

Get size of the selected file

Responsive Design Patterns A collection of patterns to create a responsive web page

Get the size of an image

Make a draggable element

Make a resizable element

Position an element absolutely to another element

Resize an iframe to fit its content

Resize columns of a table

Scale a text to fit inside of an element

Serialize form data into a query string

Show a custom context menu at clicked position

Show or hide table columns

this VS that The differences between _ and _ in the front-end development

© 2020-2021 Nguyen Huu Phuoc
Follow @nghuuphuoc on Twitter Follow @phuoc-ng on GitHub
Blur Page Check Browsers Support Fake Numbers Form Validation IntersectionObserver Examples React PDF Viewer
1 LOC (4.2k★) CSS Layout (3.5k★) HTML DOM (3.7k★) Front-end Tips Responsive Design Patterns HTML DOM (750★)