通过查找元素的行号来获取元素答案

【问题标题】：Get the element by looking up its line number通过查找元素的行号来获取元素
【发布时间】：2013-08-02 05:36:04
【问题描述】：

我有一个捕获异常的 url 和行号的 onerror 事件。现在我需要从行号中获取元素的 HTML。如何查找 DOM 并获取该特定行号的内容？

【问题讨论】：

这几乎是不可能的，因为它完全取决于浏览器中的解释器。大多数内置的 DOM 检查工具甚至无法获得正确的行号。
试试 htmlLines = html.split("\n"); htmlLines[lineNumber] 是您要查找的内容，其中 html 是 url 的完整内容。

【解决方案1】：

Rory 的评论几乎是正确的。这不一定是不可能的，但获得一些有效的东西将是一个彻底的黑客攻击。原因如下：

当您使用 document.documentElement.outerHTML 获取页面的 HTML 时，您会开始遇到格式问题，因为不同的浏览器对空白的处理方式不同。考虑以下页面：

<html>
    <head>
        <title>Test Get HTML by Line Number</title>
        <script type="text/javascript">
            window.onload = function()
            {
                var lines = document.documentElement.outerHTML;
                console.log(lines);
            };
        </script>
    </head>
    <body>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet venenatis metus. Sed lobortis semper nisl,
        eget mollis nisl rutrum sed. Duis iaculis pharetra eros, eget imperdiet felis aliquet non. Aliquam non viverra eros, vitae
        malesuada lacus. Sed ligula sapien, volutpat id diam ac, bibendum imperdiet lacus. Proin turpis lorem, blandit nec pretium
        in, lobortis eu erat. Cras ultrices sapien nec quam luctus, nec dictum ante semper.</p>
    </body>
</html>

在 Chrome 和 Firefox 中，Javascript 控制台中的结果如下所示：

<html><head>
        <title>Test Get HTML by Line Number</title>
        <script type="text/javascript">
            window.onload = function()
            {
                var lines = document.documentElement.outerHTML;
                console.log(lines);
            };
        </script>
    </head>
    <body>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet venenatis metus. Sed lobortis semper nisl,
        eget mollis nisl rutrum sed. Duis iaculis pharetra eros, eget imperdiet felis aliquet non. Aliquam non viverra eros, vitae
        malesuada lacus. Sed ligula sapien, volutpat id diam ac, bibendum imperdiet lacus. Proin turpis lorem, blandit nec pretium
        in, lobortis eu erat. Cras ultrices sapien nec quam luctus, nec dictum ante semper.</p>

</body></html>

但在 IE 中，它看起来像这样：

<HTML><HEAD><TITLE>Test Get HTML by Line Number</TITLE>
<SCRIPT type=text/javascript>
            window.onload = function()
            {
                var lines = document.documentElement.outerHTML;
                console.log(lines);
            };
        </SCRIPT>
</HEAD>
<BODY>
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet venenatis metus. Sed lobortis semper nisl, eget mollis nisl rutrum sed. Duis iaculis pharetra eros, eget imperdiet felis aliquet non. Aliquam non viverra eros, vitae malesuada lacus. Sed ligula sapien, volutpat id diam ac, bibendum imperdiet lacus. Proin turpis lorem, blandit nec pretium in, lobortis eu erat. Cras ultrices sapien nec quam luctus, nec dictum ante semper.</P></BODY></HTML>

我可以想到一些可能会得到你想要的结果的东西，但是我认为这真的很hacky；所以我会建议你不要这样做，而且我不会投入大量精力：

复制整个页面，从开始的 HTML 标记到页面上最后一条评论中的结束 HTML 标记，如下所示：

<html>
    <head>
        <title>Test Get HTML by Line Number</title>
    </head>
    <body>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet venenatis metus. Sed lobortis semper nisl,
        eget mollis nisl rutrum sed. Duis iaculis pharetra eros, eget imperdiet felis aliquet non. Aliquam non viverra eros, vitae
        malesuada lacus. Sed ligula sapien, volutpat id diam ac, bibendum imperdiet lacus. Proin turpis lorem, blandit nec pretium
        in, lobortis eu erat. Cras ultrices sapien nec quam luctus, nec dictum ante semper.</p>
    </body>
</html>
<!--
<html>
    <head>
        <title>Test Get HTML by Line Number</title>
    </head>
    <body>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet venenatis metus. Sed lobortis semper nisl,
        eget mollis nisl rutrum sed. Duis iaculis pharetra eros, eget imperdiet felis aliquet non. Aliquam non viverra eros, vitae
        malesuada lacus. Sed ligula sapien, volutpat id diam ac, bibendum imperdiet lacus. Proin turpis lorem, blandit nec pretium
        in, lobortis eu erat. Cras ultrices sapien nec quam luctus, nec dictum ante semper.</p>
    </body>
</html>
-->

获取最后一条评论的内容（这应该会有所帮助：Get text inside HTML comment tag?）。当我在接受的答案中尝试使用 Fiddle 时，它在 Chrome、Firefox 和 IE 中提供了格式正确的空格。
在换行符处拆分结果（“\n”）
寻找你的行号，还有中提琴！给你。

所以，就像我之前警告过的那样。这个“解决方案”会使你的 HTML 膨胀，完全是 hack。但这是我能想到的唯一方法，它可以保留空白并让您找到所需的确切行号。

我希望这会有所帮助，如果您最终使用了该 hack，请不要相信我。

【讨论】：