如何用JavaScript选中首个.small floatfigure元素并添加.mgn类

• 查找所有同时携带small、floatfigure类的图片元素，选中匹配结果中的第一个元素，仅给该元素追加mgn类。
• 当前熟悉HTML与CSS，JavaScript基础较弱，多次尝试编写代码均未生效。

// 尝试1
var small floatfigure = { first: '.small floatfigure' };
      small floatfigure.forEach((e)=>{
           e.classList.add(".mgn");
          };      

// 尝试2
var floatfigure = document.getElementsByClassName('.small floatfigure');
var floatfigure = small floatfigure.firstChild;
small floatfigure.className += 'mgn';

// 尝试3
let aa = document.getElementsByClassName("small floatfigure");
aa.className = "small floatfigure";
aa.classList.add("mgn");

// 尝试4
var floatfigure = document.querySelectorAll(".small floatfigure");
console.log(floatfigure);
  if(!floatfigure.length==0){
      floatfigure.forFirst((f)=>{
           f.classList.add(".mgn");
      });
  };

• 语法问题：JS变量名不允许包含空格，small floatfigure属于非法变量名，代码会直接抛出语法错误。
• 选择器使用错误：
  • getElementsByClassName接收的参数是类名字符串，不需要带.前缀；
  • 匹配同时携带两个类的元素，CSS选择器需要写为.small.floatfigure，两个类选择器中间不能加空格，加空格会变成匹配.small元素内部的.floatfigure后代元素，不符合需求。
• API调用错误：
  • getElementsByClassName、querySelectorAll返回的是元素集合，不能直接对集合调用仅单个元素拥有的classList、className属性；
  • 原生JS的NodeList/数组没有forFirst方法，不存在该API；
  • classList.add()接收的参数是纯类名字符串，不需要带.前缀。

推荐使用最简洁的写法，querySelector本身就只会返回匹配选择器的第一个元素，不需要额外取集合第一项：

// 获取第一个匹配双类的元素，无匹配时返回null
const firstFloatImg = document.querySelector('.small.floatfigure');
// 判空避免无匹配元素时抛出JS错误
if (firstFloatImg) {
  firstFloatImg.classList.add('mgn');
}

如果业务场景需要先获取所有匹配元素再做其他处理，可以用集合取首项的写法：

const allFloatImgs = document.querySelectorAll('.small.floatfigure');
// 判断集合是否有元素
if (allFloatImgs.length) {
  allFloatImgs[0].classList.add('mgn');
}

注意：如果要精准匹配img元素，可以把选择器写为img.small.floatfigure，避免误选其他带相同类名的非图片元素。

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