A JavaScript Library for Interactively DOM Element Picker | pick-dom-element

Pick DOM Element is a JavaScript library (written in TypeScript) for interactively selecting DOM elements within the document and have a specified path when hovering the mouse.

How to make use of it:

1. Install & download the pick-dom-element library.

$ npm i pick-dom-element --save

2. Import the pick-dom-element as an ES module.

import { ElementPicker } from "pick-dom-element";

3. Create a brand new instance for the component picker.

const picker = new ElementPicker();

4. Start the component picker and return the selector path of the chosen component.

const status = document.getElementById("status");
  onHover: (el) => {
    const tags = [];
    while (el.parentNode) {
      el = el.parentNode;
    status.innerText = tags
      .map((t) => t.toLowerCase())
      .join(" > ");

5. Stop the component picker on click on.

  onClick: () => {

6. Run the demo:

$ cd ./pick-dom-element-main/example
$ npm install
$ npm start

DOM Element Picker In JavaScript, pick dom element Plugin/Github


See Demo And Download

Official Website(hmarr): Click Here

This superior jQuery/javascript plugin is developed by hmarr. For extra Advanced Usages, please go to the official website.

Related Posts


[Icon Picker] Iconpicker for Bootstrap 5 Icons Library

Bootstrap 5-based icon picker which supports any icon libraries like Bootstrap Icons, Font Awesome[fontawesome.com], etc. Must Read: 1000+ Pixel Perfect SVG Icons For Vue Components | Unicons How…


Bootstrap Multiple Image Upload with Preview and Delete | ImagesLoader

ImagesLoader is a standard bootstrap image upload plugin that provides an easy-to-use and nice-looking interface for uploading multiple images to a web server. Must Read: HTML 5…


A Lightweight jQuery Plugin for Animating Split-Flap Displays | fallblatt

fallblatt is a lightweight jQuery plugin for animating split screens. This jQuery plugin allows you to include such offers in your web application. Everything from virtual departure…


Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…


jQuery Plugin for Countdown Timer on HTML Page | SyoTimer

yoTimer jQuery plugin allows you to create digital style countdowns/periodic timers on the webpage, with callbacks support and timezone/translation customization. Features Periodic count with the specified period…


Dynamic, Data-driven Periodic Table built with Vue.js

Periodicity is a dynamic, data-driven periodic table created with Vue.js that uses D3 animations and graphs to show the beauty of periodic trends. Built With vue.js (component…