有啥方法可以在纯 javascript 中将元素作为函数获取？

Posted 2023-03-16

【中文标题】有啥方法可以在纯 javascript 中将元素作为函数获取？

【英文标题】：Are there any ways to get an element as a function in pure javascript?有什么方法可以在纯 javascript 中将元素作为函数获取？

【发布时间】：2019-09-19 09:32:34

【问题描述】：

我很困惑，因为我注意到以下这 2 个案例的结果与我预期的不同；

console.log(typeof document.querySelector('.holder'));
console.log(typeof $('.holder'));

浏览器说这两种情况是相同的变量类型，object。但是当我尝试添加 .each 方法时，它说 document.querySelector('.holder') 不是函数。

    'use strict'
    const createMenuTable = (root, clips) => 
      return root.each(() => 
        console.log(root);
      )
    
    let myTable = createMenuTable(
      document.querySelectorAll('.table'), 
      document.querySelector('.layerGroup')
    ); // When I change the `root` argument to the `$('.table')`, it runs w/o an error.

<div class="table">
  <div class="layerGroup">
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

未捕获的类型错误：root.each 不是函数

我的目标是像 jQuery 一样使用普通的 javascript 将element 作为函数，但不知道如何解决这个问题。

如果有人能解释一下为什么这两种情况即使它们的变量类型相同，也没有给出相同的结果，我将不胜感激。

【问题讨论】：

"Document 方法 querySelector() 返回文档中与指定选择器或选择器组匹配的第一个元素。如果未找到匹配项，则返回 null。"所以是的，那是真的developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

人们需要学习 JavaScript != jQuery，它们不是一回事。对于跳过 JS 学习的主要步骤并开始搞乱太多框架和库的开发人员来说，这是一个常见的误解......

document.querySelector('.layerGroup') == $('.layerGroup').get(0) 返回 true 的文档，其中一个匹配节点确实存在，document.querySelectorAll('.layerGroup')[0] == $('.layerGroup').get(0) 也存在，如果这有帮助:)

@sniffingdoggo 你应该为developer.mozilla.org/en-US添加书签，它们提供了所有javascript的完整文档。例如，document.querySelector 使用此资源，您可以查看底层类型实际上是什么，以及任何给定类型上可用的方法和属性。

此外，您可以通过引用 jQuery documentation 将其与 jQuery 绑定在一起

【参考方案1】：

querySelectorAll 方法返回一个 NodeList，它没有像 each 这样的任何方法，但您可以为此目的使用 NodeList#forEach 方法。

return root.forEach((ele) => 
   console.log(ele);
)

---

在 jQuery 中，each() 方法仅适用于 jQuery 对象，因此您可以通过 jQuery 包装集合来制定通用解决方案。

return $(root).each((i, ele) => 
   console.log(ele);
)

【讨论】：

感谢您的解答和解释。就像我在上面说的，但是作为一个首先学习 jQuery 基础代码的人，普通的 JS 对我来说有点棘手，哈哈。

@sniffingdoggo 你真的应该花时间学习一下 javascript 是如何运行的。 jQuery 只是 javascript 中的一个库，它遵循所有相同的规则，只是添加了自己的规则。如果你学习 javascript，它会消除一些魔力，让你的生活更轻松，即使使用 jQuery

@sniffingdoggo : 即使我是从 jQuery 开始的，后来花了一段时间才理解 vanila JS 和 DOM

@Marie 这就是为什么我要尝试编写不带 jQuery 的代码。我觉得我需要学习原始 JS。

@PranavCBalan 你的背景减少了我的担忧。我以为我是唯一一个从 jQuery 开始编写代码的人。