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

Get the element by looking up its line number

本文关键字：元素 获取 查找      更新时间：2023-09-26

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

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

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

我可以想出一些可能会给你带来你想要的结果的东西，但我认为这真的很难；所以我建议你不要这么做，我也不会为此付出太多努力：

  1. 复制你的整个页面，从开始的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>
-->

  2. 获取最后一条注释的内容（这应该会有所帮助：在HTML注释标记中获取文本？）。当我在接受的答案中尝试Fiddle时，它在Chrome、Firefox和IE中提供了格式正确的空白

  3. 在换行符（"''n"）处拆分结果

  4. 找你的线号，还有中提琴！给你。

所以，就像我之前警告的那样。这个"解决方案"会让你的HTML膨胀，是一个彻底的破解。但这是我能想到的唯一有机会保留空白并让你找到你想要的确切行号的方法。

我希望这能有所帮助，如果你最终使用了黑客，请不要相信我。

相关文章：