DOM元素查找高亮库:highlighter.js

jopen 4年前

Highlighter.js是一个迷你纯JavaScript库,能够让轻松查找,选择和高亮DOM元素。

document.addEventListener("DOMContentLoaded", function() {     var Highlighter = new window.Highlighter();      Highlighter.next('<div>');    Highlighter.underline(); window.console.log('Highlighter underlined this element:', Highlighter.element);  });

Demo

Live demo

Commands

Select Next

Select next element starting from the current selected element (by default is the first DOM element)

Highlighter.next();

Select Previous

Select previous element starting from the current selected element ( by default is the first DOM element)

Highlighter.previous();

Skip Next

Skip a bunch of next elements starting from the current selected element

Highlighter.skipNext(50);

Skip Previous

Skip a bunch of previous elements starting from the current selected element

Highlighter.skipPrev(35);

Underline

Highlight the current selected element

Highlighter.underline();

Erase

Remove highlighting from the current selected element

Highlighter.erase();

Select Next by ID

Select next element (by ID) starting from the current selected element (by default is the first DOM element)

Highlighter.next('#test');

Select Next by class/es

Select next element (by class/classes) starting from the current selected element (by default is the first DOM element)

Highlighter.next('.class .class-2');

Select Next by < tag > name

Select next element (by < tag > name) starting from the current selected element (by default is the first DOM element)

Highlighter.next('<span>');

Select Previous by ID

Select previous element (by ID) starting from the current selected element (by default is the first DOM element)

Highlighter.previous('#test');

Select Previous by class/es

Select previous element (by class/classes) starting from the current selected element (by default is the first DOM element)

Highlighter.previous('.class .class-2');

Select Previous by < tag > name

Select previous element (by < tag > name) starting from the current selected element (by default is the first DOM element)

Highlighter.previous('<span>');

Select Element By ID

Select first element in the DOM by ID

Highlighter.select('#id');

Select Element by class/es

Select first element in the DOM by class or classes

Highlighter.select('.class .class2');

Select Element by tag name

Select first element in the DOM by < tag > name

Highlighter.select('<span>');

项目主页:http://www.open-open.com/lib/view/home/1438503379920