实现一个函数 hasClass(element, className)，判断 DOM 元素是否包含指定的类名

推荐答案

function hasClass(element, className) {
    if (element && element.classList) {
        return element.classList.contains(className);
    }
    return false;
}

本题详细解读

1. 函数功能

hasClass 函数用于判断一个 DOM 元素是否包含指定的类名。如果元素包含该类名，则返回 true，否则返回 false。

2. 参数说明

• element: 需要检查的 DOM 元素。
• className: 需要检查的类名，类型为字符串。

3. 实现细节

• element.classList: classList 是 DOM 元素的一个属性，返回一个包含元素所有类名的 DOMTokenList 对象。classList 提供了 contains 方法，用于检查元素是否包含指定的类名。
• element.classList.contains(className): 该方法返回一个布尔值，表示元素是否包含指定的类名。
• element && element.classList: 在调用 classList 之前，先检查 element 是否存在，以避免在 element 为 null 或 undefined 时抛出错误。

4. 使用示例

const element = document.getElementById('myElement');
if (hasClass(element, 'active')) {
    console.log('Element has the class "active"');
} else {
    console.log('Element does not have the class "active"');
}

5. 兼容性

• classList 在现代浏览器中广泛支持，包括 IE10 及以上版本。如果需要兼容更老的浏览器，可以考虑使用 className 属性结合正则表达式来实现类似的功能。