dom-bird

https://github.com/cyyyu/dom-bird

dom-bird is a vanilla JavaScript lib which allows you to highlight nodes in your web page.

examples

1. basic highlighting

2. highlight form errors/warnings

try focus and then blur without any inputs.

3. Remove all from current page

usage

    
      import { killAll, createBird, killBird, getBird } from "dom-bird";

      // we have two nodes to be highlighted
      const node1 = document.querySelector('#node1');
      const node2 = document.querySelector('#node2');

      // create birds
      createBird('mybird1').flyTo(node1 [, options]);
      createBird('mybird2').flyTo(node1 [, options]);

      // kill one
      killBird('mybird1')

      // kill all
      killAll()
    
  

options

    
      {
        intent?: 'primary' | 'success' | 'warnings' | 'danger'; // default: 'primary'
        scrollIntoView?: boolean; // default: false. leveraging 'node.scrollIntoView' which makes sure the target node is present in the page
        touchable?: boolean; // default: false. equals to css'pointer-events: none'
        label?: string; // default: ''
        labelLocation?: "top" | "bottom"; // default: 'top'
        labelFontSize?: string; // default: '12px'
        noAnimation?: boolean; // default: false. set to true if you don't want animation
      }