'；var'；在javascript中，不存储值

我正在学习javascript，我不明白为什么var不能保持这个值

function animate(oning){
  var hello=document.querySelector("."+oning).classList.add("pressed");
  
  setTimeout(function(){
    hello.classList.remove("pressed");
  },100)

}

控制台日志记录这归结为：

未捕获类型错误：无法读取未定义的属性类列表

---

为什么var不存储值？

我建议在浏览器中使用JavaScript之前，先学习一下面向对象编程的基础知识。web浏览器公开的API是基于面向对象编程的，如果没有它的理解，它仍然是一个黑暗的魔法。但让我们看看你的具体问题

在这些方面有很多工作要做。让我们打开第二行：

var hello=document.querySelector（“.”+ing）.classList.add（“按下”）；

您可以这样重写它：

var sel=“.”+ing；
var el=document.querySelector（sel）；//document.querySelector（“.”+0）
var clsList=el.classList；//document.querySelector（“.”+ing）
//.班级名单
clsList.add（“pressed”）；//document.querySelector（“.”+ing）
//.classList.add（“按下”）
你好；

我已经从作业的右侧分离了单独的表达。它显示了执行顺序以及一个表达式如何依赖于另一个表达式

然后，您可以看到

clsList.add（“pressed”）

是单独存在的，对变量

hello

没有影响。这是因为

add（）。在这种特殊情况下，并且给定一些约定，
add（）
方法没有任何有用的信息可以返回它所做的操作。换句话说，
add（）
方法没有返回值。

某些变异方法可能返回一个值。例如，
true
或
false
来指示它们是否成功，或者数组上类似于
push（）
的数字指示该数组中的元素数。您有时可以猜测，或者最终记住，但最好查阅文档——例如，其中引用的Teemu是一个很好的示例源、对正式规范的引用以及不同web浏览器中特定API的可用性

正如你自己所经历的，你肯定可以写：

var hello=clsList.add（“按下”）；

它仍然是有效的代码，并且执行得很好。然而，它并不能满足你的需求。在一般编程意义上不返回任何内容的方法调用，实际上在JavaScript中返回一个特殊值
undefined
。这是JavaScript的表达方式：“我不返回任何内容。我按照你告诉我的做，你不必关心结果。如果你关心，请检查其他地方…”存储不返回任何内容的方法调用的结果没有意义

好吧，这一切都很好……“但如何修复它呢？”你可能会问

让我们从一个意图开始。我们需要一个名为
animate（）
的函数，将CSS类
添加到其类名将作为参数传递的元素上。稍后（100毫秒），我们将移除该类。我想这可能会触发一些CSS动画（如果你问我，这不是最好的方式，但我是谁来判断…）。让我们探索代码“具体化”的一种方式：

定义一个函数：

function animate（）{
}


接收要设置动画的元素的类名：

函数动画（动画）{
}


查找元素：

函数动画（动画）{
文件查询选择器（“.”+N）；
}


向元素添加CSS类：

函数动画（动画）{
document.querySelector（“.”+ing）.classList.add（“按下”）；
}


以后做点什么：

函数动画（动画）{
document.querySelector（“.”+ing）.classList.add（“按下”）；
setTimeout（函数（）{
}, 100);
}


有东西正在从元素中删除CSS类：

函数动画（动画）{
document.querySelector（“.”+ing）.classList.add（“按下”）；
setTimeout（函数（）{
document.querySelector（“.”+ing）.classList.remove（“按下”）；
}, 100);
}


如果仍要使用变量，可能是为了提高可读性：

函数动画（动画）{
var hello=document.querySelector（“.”+ing）.classList；
您好。添加（“按下”）；
setTimeout（函数（）{
你好。移除（“按下”）；
}, 100);
}


请注意，我存储了
classList
引用以供以后使用。这是我们感兴趣的目标。然后，我在该类列表上调用
add（）
。稍后，我在前面存储的同一个类列表上调用
remove（）
。类列表对象可以操作元素的所有类，并提供其他有用的方法来处理CSS类名列表。事实上，当您使用Web API（特别是DOM）时，它是一个在其他地方使用的实例，而不仅仅是添加或删除CSS类名

如果您发现对象、实例、接口、方法、方法调用、参数或引用等名称不明确，请相信它们具有非常特定的含义。他们和许多其他人定义了所谓的面向对象编程，这是一种计算机编程范式。正如我在《乞讨》中所说的，Web浏览器公开的Web API就是在这个范例中定义的。你应该先学习这个范例的基本原理。虽然可能，但我实际上认为，同时学习OOP和Web API不是一个好主意。网络是非常复杂的，并且经常因为一些不了解其历史的原因而不一致。但那将是另一个话题。
hello
准确存储您分配的值