javascript - 通过查找元素的行号来获取元素

Question

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

score 4 · Accepted Answer

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

当您使用 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>

我可以想到一些可能会给你带来你想要的结果的东西，但我认为它真的很老套；所以我会建议你不要这样做，而且我不会为此付出很多努力：

复制整个页面，从开始的 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，请不要相信我。

javascript - 通过查找元素的行号来获取元素

1 回答 1

Related

Reference