如何查找HTML元素对应的赋值变量（jQuery Widget插件开发）

你用document.getElementById('elementid')的方式没法直接找到元素对应的变量名——这个方法只能获取DOM元素本身，而变量名是代码层面的标识，和DOM元素没有直接绑定关系。下面是几个更高效的方法：

• 利用浏览器调试工具快速定位元素与实例
  选中元素面板里的目标元素后，控制台输入$0即可快速获取该DOM元素。如果它是jQuery Widget实例化的组件，尝试输入$($0).data('widgetName')（将widgetName替换为实际组件名，比如dialog、tabs），多数jQuery Widget会把实例存储在元素的data属性中，拿到实例后就能直接操作，也能从中找到关联的元素引用。

• 搜索代码库定位变量赋值
  用浏览器调试工具的全局搜索功能（快捷键Ctrl+Shift+F），搜索目标元素的ID、类名或者选择器，比如搜$('#elementid')，查看上下文的变量赋值语句，比如var targetElement = $('#elementid')，这样就能找到对应的变量名。

• 断点追踪作用域内的变量
  在目标元素相关的代码逻辑（比如Widget的_create初始化方法、绑定的事件处理函数）中设置断点，当代码执行到断点时，查看调试工具的作用域面板，就能找到当前作用域内和该元素绑定的变量。

• 查看Widget的全局实例集合
  部分jQuery Widget会维护全局的实例列表，比如$.widgetName.instances（不同组件命名可能有差异），在控制台打印这个集合并遍历，就能找到目标元素对应的实例，进而反推关联的变量。

内容的提问来源于stack exchange，提问作者Alon Cohen