点击Font Awesome图标切换far/fas类时找不到对应类怎么办

问题根因 #

1. 用elem.childNodes[1]获取子元素的逻辑不可靠：HTML里的换行、空格都会被识别为文本节点，实际运行时节点索引可能和你预期的不一致，没法稳定拿到要操作的图标元素。
2. Font Awesome的JS脚本会自动把原始的<i>标签替换成SVG元素，还会新增svg-inline--fa这类自带类，既会改变原有类的排序，也可能导致你拿到的元素不是目标元素，这才会出现按索引取类得到undefined的情况。

修复代码 #

直接放弃按节点索引、类索引取值的写法，用精准选择器匹配元素，搭配classList.toggle方法即可实现类切换，不需要手动判断类是否存在：
如果你的changeClass方法是绑定在父级#bookmark元素上，修改逻辑如下：

function changeClass(elem) {
    // 自动匹配内部的图标元素，兼容原始i标签和FA生成的SVG标签
    const icon = elem.querySelector('i, svg');
    // 两个类同步切换，存在则移除，不存在则添加
    icon.classList.toggle('far');
    icon.classList.toggle('fas');
}

如果可以直接给图标绑定点击事件，写法更简洁：

document.querySelector('#bookmark i').addEventListener('click', function() {
  this.classList.toggle('far');
  this.classList.toggle('fas');
});

classList自带的contains、toggle方法会自动遍历所有类做判断，完全不需要关心类的排列顺序，比按索引取值的稳定性高很多。

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