如何获取dom元素的代码行号

how to get the code line number of a dom element?

本文关键字：元素 代码 dom 何获取 获取      更新时间：2023-09-26

如何找到特定DOM元素的代码行号？

所以我在JS变量中有一个DOM元素，我需要一个函数来返回代码行号和文件名（路径）

这是不可能的，因为您可以操作dom。

两个原因：

  1. 浏览器在解析dom时添加了dom元素（像<tbody>一样，因为大多数人都忘记了它）浏览器还可以自动更正未关闭的标签等，因此查看时不可能定义wich-dom节点在wich-line中
  2. 您可以使用javascript添加/附加/手动操作/删除dom节点。dom不是静态的。一旦你做了类似于：var foo = document.createElement("div");的事情并将其附加到正文中，比如：document.body.firstChild.appendChild(foo);，行号就会在逻辑上发生变化

您还可以在树中移动dom节点，如更改元素的父级等。您也可以创建dom节点，而无需将它们附加到树中，但您可以在稍后的过程中附加它们。

简单地说：除非你安装了一个检查器，否则你无法弄清楚dom节点在哪一行（比如右键单击可视化浏览器窗口中的一个节点，然后选择chrome中的"inspect element"）

每个浏览器对html/dom进行不同的解释，因此不可能有相同的结果树。

您唯一能做的就是添加一个抛出异常的<script>标记。在大多数浏览器中，您可以通过警报框显示当前行号。（因为我认为这"不是一个好主意"，所以我不会详细介绍）

相关文章：