Кусок волшебного кода, который следит за DOM

внешний интерфейс DOM

Автор: Эдди Эйч

Перевод: сумасшедший технический ботаник

оригинал:Dev.to/Эдди любит поесть/это…

Копирование без разрешения строго запрещено

Используя этот модуль, вы можете быстро просмотреть свойства элементов DOM, просто наведя курсор мыши в браузере. По сути, это мгновенная проверка.

SpyOn demo

Наведение курсора на элемент DOM показывает его свойства!

попробуй сам

Скопируйте весь блок кода ниже и вставьте его в веб-консоль браузера. Теперь наведите указатель мыши на любую веб-страницу, которую вы просматриваете.Что ты видел?

(function SpyOn() {

  const _id = 'spyon-container',
        _posBuffer = 3;

  function init() {
    document.body.addEventListener('mousemove', glide);
    document.body.addEventListener('mouseover', show);
    document.body.addEventListener('mouseleave', hide);
  }

  function hide(e) {
    document.getElementById(_id).style.display = 'none';
  }

  function show(e) {
    const spyContainer = document.getElementById(_id);
    if (!spyContainer) {
      create();
      return;
    }
    if (spyContainer.style.display !== 'block') {
      spyContainer.style.display = 'block';
    }
  }

  function glide(e) {
    const spyContainer = document.getElementById(_id);
    if (!spyContainer) {
      create();
      return;
    }
    const left = e.clientX + getScrollPos().left + _posBuffer;
    const top = e.clientY + getScrollPos().top + _posBuffer;
    spyContainer.innerHTML = showAttributes(e.target);
    if (left + spyContainer.offsetWidth > window.innerWidth) {
      spyContainer.style.left = left - spyContainer.offsetWidth + 'px';
    } else {
      spyContainer.style.left = left + 'px';
    }
    spyContainer.style.top = top + 'px';
  }

  function getScrollPos() {
    const ieEdge = document.all ? false : true;
    if (!ieEdge) {
      return {
        left : document.body.scrollLeft,
        top : document.body.scrollTop
      };
    } else {
      return {
        left : document.documentElement.scrollLeft,
        top : document.documentElement.scrollTop
      };
    }
  }

  function showAttributes(el) {
    const nodeName = `<span style="font-weight:bold;">${el.nodeName.toLowerCase()}</span><br/>`;
    const attrArr = Array.from(el.attributes);
    const attributes = attrArr.reduce((attrs, attr) => {
      attrs += `<span style="color:#ffffcc;">${attr.nodeName}</span>="${attr.nodeValue}"<br/>`;
      return attrs;
    }, '');
    return nodeName + attributes;
  }

  function create() {
    const div = document.createElement('div');
    div.id = _id;
    div.setAttribute('style', `
      position: absolute;
      left: 0;
      top: 0;
      width: auto;
      height: auto;
      padding: 10px;
      box-sizing: border-box;
      color: #fff;
      background-color: #444;
      z-index: 100000;
      font-size: 12px;
      border-radius: 5px;
      line-height: 20px;
      max-width: 45%;
      `
    );
    document.body.appendChild(div);
  }

  init();

})();

как это работает

Этот модуль начинается сIIFEформа реализации. Это позволяет вам копировать и вставлять код в веб-консоль всякий раз, когда вам нужна помощь в мониторинге DOM. Вставьте div в тело документа и включите прослушиватели событий мыши в теле. Получите атрибут из целевого элемента, уменьшите его до одной строки и, наконец, отобразите во всплывающей подсказке.

Пример

  1. Помощь с ошибками пользовательского интерфейса
  2. Убедитесь, что элементы DOM, которые вы применяете, работают должным образом (например, нажмите, чтобы получить правильный класс и т. д.).
  3. Понимание структуры веб-приложения

Что вы можете узнать из этого кода

  1. Как реализовать модуль всплывающей подсказки с помощью Vanilla JS
  2. Как анализировать свойства объектов DOM
  3. Как найти положение мыши по осям X и Y
  4. Как получить положение прокрутки документа
  5. Посмотрите, как ведут себя разные браузеры — Edge, Chrome и Safari.

Открытый исходный код

ты сможешьздесьНайден исходный код, надеюсь, вы сможете сделать лучше! Возможно, вы не хотите реализовывать его как IIFE или отображать другие данные.

Добро пожаловать на общедоступный номер внешнего интерфейса: первопроходец внешнего интерфейса, бесплатный доступ к учебнику по Webpack.

Категории