从 Html 元素创建变量答案

【问题标题】：Create variables from Html elements从 Html 元素创建变量
【发布时间】：2016-10-24 12:48:25
【问题描述】：

是否可以从网页中获取所有元素，并为每个元素创建一个变量？您可以在每个函数中创建变量并将它们命名为与其元素名称相同的名称吗？

【问题讨论】：

您想将所有 DOM 元素变量保存在内存中吗？我真的认为这不是一个好主意。 JQuery 在执行它的函数时会搜索元素，这就是为什么你必须使用$()（$ 是函数名称的缩写）
酷，是的，我只是想尝试一下，但我不能在循环中创建变量，这就是我想要的......

【解决方案1】：

是的，但要小心。

如果元素引用在加载时存在并且以后没有更改，则将元素引用存储在变量中很有用，但是在加载后删除 div 会导致您的变量返回未定义。如果在声明变量后添加div，也会报错。

阅读here。

【讨论】：

谢谢，是的，我明白这不是最好的做法，只是我想:)
@TeTPsy 我一直在阅读您的 cmets，也许您想要做的是创建一个 jQuery 方法，它将类的所有元素扩展为具有自定义功能的对象。您可以编写一次方法，然后从那里开始，每个扩展元素都将获得原始元素的行为......

【解决方案2】：

正如你所说，这只是为了好玩......所以我认为这应该可以解决问题：

$("*").each(function() {
  const elmnt = $(this);      
  const id = elmnt.attr("id");

  if(id) {
     window[id] = elmnt;
  }
});

这只会为定义了 id 的 DOM 创建变量。但是您可以按照自己的方式更改规则。

【讨论】：

【解决方案3】：

用途：

var div = $('div');
div.click();

【讨论】：

是的，我知道这样，但我需要它是动态的，所以它可以在任何页面上使用，它需要自动分配每个元素
@TeTPsy 尚不清楚您要如何使用存储的变量。您所描述的内容听起来像是您将使用 AngularJS 执行的操作，您将使用单独的控制器加载不同的内容。您所指的 div 变量类似于角度指令...
感谢您的回复，正如我所说的只是为了好玩，我的意思是我想要它，这样任何人都可以将脚本添加到他们的网页，它会自动从他们的元素等中生成变量

【解决方案4】：

如果您想将点击事件绑定到所有 div 元素，您可以轻松做到：

var div = $('div');
div.click(function(){
    //do something
});

【讨论】：

【解决方案5】：

缩短 jQuery 选择器和开销以及页面性能的好方法是使用 VanillaJS：http://vanilla-js.com/

选择对象是使用 vanilla JS 最简单的事情之一。我不知道您的用例是什么，但 jQuery 所做的很多事情从未使用过。如果您正在寻找优化，请尝试暂时不使用它，您可能会感到惊讶。以下是一些在短变量中获取元素的现成方法。

获取文档中的所有 div：

var divs = document.querySelectorAll('div');

只获取第一个 div：

var div = document.querySelector('div');

获取特定的 div：

var div = document.getElementById('somediv');

这样你就可以控制一切（点菜变量，而不是试图解决你可能不需要解决的所有问题）。

【讨论】：