Получение положения узла в 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.
У кого-нибудь есть идеи как этого добиться?