查找文档源中dom节点的位置答案

【问题标题】：Finding position of dom node in the document source查找文档源中dom节点的位置
【发布时间】：2022-07-30 18:20:33
【问题描述】：

上下文

我正在构建一组“提取器”函数，其目的是从页面中提取看起来像组件的东西（使用 jsdom 和 nodejs）。最终结果应该是这些“组件”对象，它们按照它们最初出现在页面中的位置排序。

问题

这个过程的最后一部分有点问题。据我所知，没有简单的方法可以判断给定元素在给定 dom 文档的源代码中的位置。

在这种情况下，数字深度或类似 css/xpath 的路径也没有帮助。

示例

const extractors = [
  dom => 
    Array.from(
      dom.window.document.querySelectorAll('button')
    )
    .map(elem => ({
      type: 'button',
      name: elem.name,
      position:                   ???
    }))
  dom => 
    Array.from(
      dom.window.document.querySelectorAll('a')
    )
    .map(elem => ({
      type: 'link',
      name: elem.textContent,
      position:                   ???
      link: elem.href,
    }))
];

对于给定的文档（我知道，这是一个丑陋且没有语义的例子..）：

<html>
  <body>
    <a href="/">Home</a>
    <button>Login</button>
    <a href="/about">About</a>
...

我需要类似的东西：

[
  { type: 'link', name: 'Home', position: 20, ... }
  { type: 'link', name: 'About', position: 72, ... }
  { type: 'button', name: 'Login', position: 45, ... }
]

（以后可以通过item.position订购）

【问题讨论】：

标签： javascript node.js dom indexof jsdom

【解决方案1】：

我能想到的一种可能的粗略方法是：

function findPos(elem){
  elem.setAttribute('data-pf', '1');
  try {
    return elem.ownerDocument.documentElement.outerHTML.indexOf('data-pf');
  } finally {
    elem.removeAttribute('data-pf);
  }
}

另请参阅：https://github.com/jsdom/jsdom#serializing-the-document-with-serialize

然而，除了不精确之外，它还让人感觉有点矫枉过正，而且可能表现不佳。

【讨论】：