如何获取DOM节点在文档源码中的位置？（jsdom与Node.js场景）

要给提取的DOM元素添加原始HTML中的位置偏移以排序结果，jsdom本身没有提供直接的API，但可以通过预处理原始HTML的方式实现，具体步骤如下：

1. 保存原始HTML字符串：确保你持有未被jsdom解析过的原始HTML内容（比如从文件读取或网络请求返回的字符串）。
2. 预处理HTML标记位置：用正则匹配目标元素的起始标签，给它们添加自定义data-pos属性，属性值就是该标签在原始字符串中的起始偏移量。
3. 解析预处理后的HTML：用带标记的HTML创建jsdom实例。
4. 提取时读取位置属性：在提取器函数中直接读取元素的data-pos属性，转为数值后作为position字段值。

完整代码示例 #

const { JSDOM } = require('jsdom');

// 原始HTML内容（实际场景可从文件/网络获取）
const rawHtml = `
<html>
  <body>
    <a href="/">Home</a>
    <button>Login</button>
    <a href="/about">About</a>
  </body>
</html>
`;

// 给button和a标签添加data-pos属性，记录原始位置偏移
const markedHtml = rawHtml.replace(/(<(button|a)\b)/g, (match, tagStart, tagName, offset) => {
  return `${tagStart} data-pos="${offset}"`;
});

// 创建jsdom实例
const dom = new JSDOM(markedHtml);

const extractors = [
  // 提取按钮
  dom => 
    Array.from(dom.window.document.querySelectorAll('button'))
    .map(elem => ({
      type: 'button',
      name: elem.name,
      position: parseInt(elem.dataset.pos, 10)
    })),
  // 提取链接
  dom => 
    Array.from(dom.window.document.querySelectorAll('a'))
    .map(elem => ({
      type: 'link',
      name: elem.textContent.trim(),
      position: parseInt(elem.dataset.pos, 10),
      link: elem.href,
    })),
];

// 合并所有提取结果并按原始位置排序
const allComponents = extractors.flatMap(extractor => extractor(dom));
allComponents.sort((a, b) => a.position - b.position);

console.log(allComponents);

说明 #

这个方法的核心是在原始HTML中直接标记元素位置，完全不受jsdom解析后DOM结构变化的影响，能精准对应元素在源码中的出现顺序，实现成本低且可靠性高。

内容的提问来源于stack exchange，提问作者Christian