我有一个 onerror 事件，它捕获异常的 url 和行号。现在我需要从行号中获取元素的 HTML。如何查找 DOM 并获取特定行号上的内容？
最佳答案
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>
我能想到一些可能会让您获得想要的结果的方法，但是我认为它真的很老套；所以我会建议你不要这样做，我不会为此付出大量的努力:
复制整个页面，从开始的 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 - 通过查找其行号获取元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17991941/