Получение положения узла в de Dom

Я использую MutationObserver, чтобы наблюдать за DOM для вставки или изменения DOM. Но чего я хочу добиться, так это воспроизвести изменения DOM в некотором виде бэкэнда.

Допустим, у меня есть следующий DOM:

<div class="container">
  <div class="row marketing">
    <div class="col-lg-6">
      <li>
        <h4>Text</h4>
        <p>More Text</p>
        <button class="add-stuff">Add Element</button>
      </li>
      <li>
        <h4>Text</h4>
        <p>More Text</p>
        <button class="add-stuff">Add Element</button>
      </li>
      <li>
        <h4>Text</h4>
        <p>More Text</p>
        <button class="add-stuff">Add Element</button>
      </li>
    </div>
  </div>
</div>

При нажатии на кнопку, соответствующий родитель li получает новый дочерний элемент (h1, div, span, что угодно). Теперь MutationObserver запускается, и я могу получить информацию о добавленном элементе (и, возможно, дочерних элементах).

Однако для некоторого воспроизведения я хочу получить точную позицию parentNode вставленного элемента.

Допустим, я нажимаю кнопку второго элемента, DOM меняется на

<div class="container">
  <div class="row marketing">
    <div class="col-lg-6">
      <li>
        <h4>Text</h4>
        <p>More Text</p>
        <button class="add-stuff">Add Element</button>
      </li>
      <li>
        <h4>Text</h4>
        <p>More Text</p>
        <button class="add-stuff">Add Element</button>
        <span>Example text</span> <!-- Node has been added -->
      </li>
      <li>
        <h4>Text</h4>
        <p>More Text</p>
        <button class="add-stuff">Add Element</button>
      </li>
    </div>
  </div>
</div>

Теперь, что мне нужно, это точное положение этого узла. Например

div.container > div.row.marketing > li[2]

На что я не могу положиться, так это на удостоверение личности или что-то вроде этого. Я хочу использовать этот сценарий на сайтах, где у меня нет контроля над DOM или где много динамических данных, что делает очень неудобным добавление уникального идентификатора для каждого элемента.

Я посмотрел на XPath, который явно не поддерживается изначально в javascript.

У кого-нибудь есть идеи как этого добиться?

0 ответов

Другие вопросы по тегам