Press "Enter" to skip to content

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
$ 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");
picker.start({
  onHover: (el) => {
    const tags = [];
    while (el.parentNode) {
      tags.push(el.tagName);
      el = el.parentNode;
    }
    status.innerText = tags
      .reverse()
      .map((t) => t.toLowerCase())
      .join(" > ");
  };
});

5. Stop the component picker on click on.

picker.start({
  onClick: () => {
    picker.stop();
  }
});

6. Run the demo:

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

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

DOM-Element-Picker-Demo


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.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *