有没有办法获取 DOM 中节点的索引？

Question

例如，如果我有一个 HTML 文档：

<html>
<body>
  <p>Hello</p>
  <p>World</p>
</body>
</html>

Hello 的索引在 18 到 22 之间，而 World 的索引在 32 到 36 之间。

Answer 1

简短的回答是否定的。

DOM和HTML不是一回事。

DOM 是一个树结构，表示（模型）文档的内容。在像 HTML 这样也是树结构的语言中，DOM 与源代码的结构非常相似，但并不完全相同。

浏览器使用HTML构造DOM，但之后HTML就不重要了。如果您有弱结构元素（例如 <p> 没有结束 </p>）或开始使用 JavaScript.

进行操作，情况尤其如此

可以从DOM重构HTML，但不一定相同。这是因为您通常在 HTML 周围使用白色 space（包括换行符）以提高可读性。白色 space 如果它在非文本元素中则被忽略，如果它是混合元素则添加到它自己的文本节点。

如果原始 HTML 包含格式错误的代码，则重构也不相同。

使用 DOM 和 JavaScript，以及一些明智的 CSS 选择器，您通常可以继续前进，并找到您所拥有的。例如：

document.querySelector('html>body>p:nth-child(2)')

将在现代浏览器中为您提供第二段，但 DOM 无法知道数据在原始 HTML 中的位置。

如果你不需要担心原来的 HTML，前面的白色 spaces，换行符和可能的格式错误的代码，那么它可能会找到你想要的通过从 dom 重建 HTML 并搜索字符串来寻找。

否则，您需要获取原始 HTML 作为字符串。如果你真的需要知道，你将需要再次获取页面作为文本。您可以使用 Ajax.

执行此操作

Is there a way to get an index of a node in DOM?