实现一个函数 addClass(element, className)，给 DOM 元素添加类名

推荐答案

-- -------------------- ---- -------
-------- ----------------- ---------- -
    -- ------------------- -
        ---------------------------------
    - ---- -
        ----- ------- - ------------------------- ---
        -- --------------------------- --- --- -
            ------------------------
            ----------------- - -------------- ---
        -
    -
-

本题详细解读

1. 函数功能

addClass 函数用于给指定的 DOM 元素添加一个类名。如果元素已经拥有该类名，则不进行任何操作。

2. 代码解析

• element.classList：现代浏览器支持 classList 属性，它提供了 add 方法，可以方便地添加类名。如果 element.classList 存在，则直接使用 add 方法添加类名。

• element.className：对于不支持 classList 的旧版浏览器，我们通过 element.className 来获取元素的类名字符串，然后将其拆分为数组。如果数组中不存在要添加的类名，则将其添加到数组中，最后将数组重新拼接为字符串并赋值给 element.className。

3. 兼容性考虑

• 该函数考虑了浏览器的兼容性，优先使用 classList，在不支持的情况下回退到 className 的方式。
• 使用 indexOf 来检查类名是否已经存在，避免重复添加。

4. 使用示例

const div = document.createElement('div');
addClass(div, 'my-class');
console.log(div.className); // 输出: "my-class"

5. 注意事项

• 如果传入的 className 包含空格，可能会导致意外的行为。因此，建议传入的类名是单一的、不包含空格的字符串。
• 该函数不会处理 className 为空字符串的情况，调用时需要确保传入的 className 是有效的类名。