Как пройти путь DOM от одного элемента к другому (используя Firebug)?

у меня например эта структура:

<div id="items">
  <div class="item">
    <span class="date">5 Feb 2016</span>
    <span class="title">
      <a href="http://example.com">Title 1</a>
    </span>
  </div>
</div>

Мне нужен полный путь прохождения от #items до a - в моем случае это:

firstChild.firstChild.nextSibling.firstChild

or

childNodes[0].childNodes[1].childNodes[0]

Когда я пишу в командной строке Firebug:

document.getElementById('items');

Я вижу элемент и могу щелкнуть его правой кнопкой мыши и выбрать Проверить на панели DOM, чтобы увидеть его там. Затем я могу найти этот путь, развернув свойства childNodes или firstChild + nextSibling.

Когда я достигаю своего элемента (в моем примере a) на панели DOM, я затем щелкаю его правой кнопкой мыши и выбираю Копировать путь в меню, чтобы получить указанный выше путь.

Мой вопрос: есть ли решение для упрощения этих шагов?

  • Код на JavaScript
  • Плагин для Firefox или Firebug
  • Удалите другие свойства (кроме childNodes, attributes, nodeValue и т. д.) с панели DOM.
  • Другое решение (вне Firefox)

dom dom-traversal firebug
person yAnTar    schedule 04.02.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Firebug имеет функцию getPropertyPath(). чтобы получить путь DOM. Что делает эта функция, так это поднимает дерево DOM и добавляет каждый элемент в массив, который в конце соединяется со строкой.

person Sebastian Zartner    schedule 07.02.2016
comment
1. Не нашел. 2. Как я понимаю результат этой функции тот же, что и у меня при копировании пути. Я знаю, как получить копию, мне нужно упростить свои действия. - person yAnTar; 08.02.2016
comment
Обратите внимание, что я связал функцию выше с кодом Firebug. Вы должны отметить в своем вопросе, что вы пробовали до сих пор. - person Sebastian Zartner; 08.02.2016