【问题标题】:Get offset of node in whole html document in Javascript?在Javascript中获取整个html文档中节点的偏移量?
【发布时间】:2025-12-20 09:15:10
【问题描述】:

我正在寻找一种使用 Javascript 获取给定节点相对于整个文档的偏移量的方法。例如:

<html>
    <head></head>
    <body>
        <div id="mainContent">
            <h1 id="myTitle">Title</h1>
            <p>First paragraph</p>
            <p>Second <b>paragraph</b></p>
        </div>
    </body>
</html>

然后(使用 JQuery):

$("#myTitle").getDocumentOffset()

应该返回 47,因为 id 为 myTitle 的 h1 从相对于整个文档的偏移量 47 in characters 开始。

知道如何做到这一点吗?

提前致谢。

【问题讨论】:

    标签: javascript jquery html offset dom-node


    【解决方案1】:

    这个问题没有意义,因为 HTML 文档中忽略了额外的空格,因此同一页面可以用多种方式表示。例如,这个:

    <html>
      <body></body>
    </html>
    

    等价于:

    <html><body></body></html>
    

    此外,一旦浏览器解析了您的代码,就无法检索源文件中存在的原始 HTML 标记(具有相同的空格)。这意味着您要查找的“偏移量”不是唯一定义的。

    【讨论】:

    • 永远不可能得到未解析的 HTML 吗?如果是这样,是否有可能获得修剪后的身体的偏移量? (仅从正文开始计算,除空格外没有空格) - 更新:当我记录 $('html').html() 时,似乎确实保留了空格。例如。当我添加 5 个选项卡时,它会显示这 5 个选项卡。它还显示 Javascript 等。
    • 或者更好:$(document).children().html()
    • @Tom:不能保证它会起作用。例如,Firefox 似乎保留了格式,而 IE 和 Chrome 都根据自己的喜好去除空格。而且从“修剪过的主体”中获取偏移量并不容易:您基本上必须编写自己的 DOM 解析器。
    • @Tom:@casablanca 是正确的。此外,您想要的偏移量对我来说似乎没有用。将文档视为 HTML 字符串很少像将其视为节点树那样可靠或有用。
    • @Tim Down,这与我之前的问题有关。我需要它在字符串中的原因是因为我必须在我的服务器上的另一个程序中使用此信息,该程序没有 DOM 解析器。