如何使用JS精准定位HTML中指定的span标签实现淡入淡出效果

解决方法 #

只需要修改querySelectorAll的选择器参数，将全局匹配所有span改为仅匹配类名为animated的容器下的span即可：

// 仅选中.animated容器内的所有span标签
const spans = document.querySelectorAll(".animated span");
const animation = function () {
  for (let span of spans) span.classList.toggle("fade");
};
setInterval(animation, 2400);

可选更精准方案 #

如果后续你在animated容器内可能新增其他不需要动画的span标签，可以直接指定目标span的id来匹配，完全避免误选：

// 直接通过id选中两个目标span，精准度更高
const spans = document.querySelectorAll("#animated-name, #animated-text");
const animation = function () {
  for (let span of spans) span.classList.toggle("fade");
};
setInterval(animation, 2400);

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