我正试图在网站上记录用户的行为。
假设我有下一个（简化的）HTML页面，正在执行录制：
<html>
<head>
<title>Some title</title>
<link rel="stylesheet" href="somestyle.css" />
<script src="myrecordscript.min.js"></script>
</head>
<body>
<h1>Some header</h1>
<p>Lorem ipsum dolor sit amet</p>
<button id="appearModal">appear modal window</button>
</body>
</html>
当页面加载时，我将初始标记发送到服务器，然后创建一个观察MutationObserver的{{1}}，这样我就可以在文档中观察到所有突变。
使用这个JavaScript函数，例如，我可以获得插入元素的索引路径
document.documentElement例如，假设模态窗口附加在/* somewhere inside the ES6 class */
getElementIndex = (element) => {
return element.parentElement ? [...element.parentElement.children].indexOf(element) : 0
}
getInsertedPath = (mutation) => {
var target = mutation.addedNodes[0]
var parent = (mutation.previousSibling || mutation.nextSibling) ? (mutation.previousSibling || mutation.nextSibling).parentElement : mutation.target
var indexPath = []
if (!parent)
return indexPath
if (!mutation.previousSibling)
indexPath.push(-1)
else
indexPath.push(this.getElementIndex(target) - 1)
while (parent) {
indexPath.push(this.getElementIndex(parent))
parent = parent.parentElement
}
return indexPath.reverse()
}
的末尾，body将返回一个数组getInsertedPath，这意味着我应该在之后插入模态标记下一个要素：
[0, 1, 2]一切都很好，直到我发现不同的令人敬畏的浏览器扩展程序错误地修改了标记。例如，Chrome的Ghostery扩展程序会在document.children[0].children[1].children[2]
和div之间添加额外的head（原文如此！），即我获得了下一个初始标记：
body导致<html>
<head>
<title>Some title</title>
<link rel="stylesheet" href="somestyle.css" />
<script src="myrecordscript.min.js"></script>
</head>
<div id="anotherAwesomeGhosteryButtonOrSomething"></div>
<body>
<h1>Some header</h1>
<p>Lorem ipsum dolor sit amet</p>
<button id="appearModal">appear modal window</button>
</body>
</html>
返回getInsertedPath。
很好，听起来没有问题。但是当我尝试从它的数据中重新创建录音时，我知道当我将无效的HTML插入[0, 2, 2]时，浏览器（在Chrome和Firefox中测试）会自动修复它，而我得到了这个：
iframe它（显然）打破了一切，因为现在我<html>
<head>
<title>Some title</title>
<link rel="stylesheet" href="somestyle.css" />
<script src="myrecordscript.min.js"></script>
</head>
<body>
<div id="anotherAwesomeGhosteryButtonOrSomething"></div>
<h1>Some header</h1>
<p>Lorem ipsum dolor sit amet</p>
<button id="appearModal">appear modal window</button>
</body>
</html>
undefined document.children[0].children[2]...了
有没有其他方法可以获得元素位置（更安全，更能抵抗这种意外行为）？