在de Dom中获取节点的位置

Question

我使用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]

我无法依赖的是ID或类似的东西。我想在网站上使用这个脚本，我无法控制DOM，或者在很多动态数据的位置，这使得为每个元素添加唯一ID非常不方便。

我已经研究过XPath，这显然不是javascript本身支持的。

有没有人知道如何实现这个目标？