• Stars
    star
    6,512
  • Rank 6,082 (Top 0.2 %)
  • Language MDX
  • License
    MIT License
  • Created over 4 years ago
  • Updated 5 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Common tasks of managing HTML DOM with vanilla JavaScript. Give me 1 ⭐if it’s useful.

HTML DOM

Story

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 modern 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.

Features

  • No external library. Only native browsers' APIs
  • Small and easy to understand examples
  • Live demos
  • Many tips and good practices included
  • Many real use cases
  • Work with the modern browsers. Try to support IE 11

Running it on local

  1. Clone the project:
$ git clone https://github.com/phuocng/html-dom
  1. Install the dependencies:
$ cd html-dom
$ npm install
  1. Run it on the local:
$ npm run start

Open http://localhost:8081 in your browser to see it in action.

About

This project is developed by Nguyen Huu Phuoc. I love building products and sharing knowledge.

Be my friend on

More Repositories

1

csslayout

A collection of popular layouts and patterns made with CSS. Now it has 100+ patterns and continues growing!
MDX
8,047
star
2

1loc

What's your favorite JavaScript single LOC (line of code)?
MDX
6,756
star
3

this-vs-that

Understanding the difference between ˍˍˍ and ˍˍˍ in front-end development
MDX
1,470
star
4

frontend-tips

Super tiny, quick tips, tricks and best practices of front-end development
MDX
619
star
5

css-animation

Popular CSS animation showcases. You don't need a CSS animation library for them.
MDX
99
star
6

react-drag-drop

Master the art of drag and drop in React
TypeScript
71
star
7

responsive-page

Collection of patterns to create a responsive website
TypeScript
63
star
8

mirror-a-text-area

Enhancing user experience through text area mirroring
HTML
62
star
9

fake-numbers

Generate fake, valid numbers. Check if a number is valid. Support a lot of different numbers: Credit card, EAN, ISBN, RTN, VIN, etc.
TypeScript
60
star
10

cross-browser

Techinques to deal with cross browser issues on the front-end side
MDX
31
star
11

placeholders

SVG-based placeholders in web components
TypeScript
28
star
12

master-of-react-ref

Your complete guide to mastering the use of "ref" in React
TypeScript
22
star
13

intersection-observer-examples

Practical, real world examples of Intersection Observer
15
star
14

frame

An iframe wrapper that resizes based on its content automatically
TypeScript
12
star
15

get-svg

A Chrome extension to download SVG from a webpage
JavaScript
12
star
16

javascript-proxy

Practical examples of using JavaScript Proxy
MDX
11
star
17

css-grid

Discover how to use CSS grid layout with real-life examples
9
star
18

phuocng

7
star
19

lit-web-component-aha

Aha moments when working with the Lit library
3
star