从Html元素创建变量

Question

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

Answer 1

是的，但要小心。

如果元素引用在加载时存在且稍后未更改，则将其存储在变量中很有用，但在加载后删除div会导致变量返回undefined。如果在声明变量后添加div，则还会遇到错误。

阅读here。

Answer 2

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

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

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

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

Answer 3

使用：

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

Answer 4

如果您想将click事件绑定到所有div元素，您可以轻松地执行此操作：

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

Answer 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');

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