原生js通过类名怎么取

原生JS通过类名获取元素的方法包括：使用document.getElementsByClassName()、遍历 DOM 树、结合其他选择器方法等。 其中，最常用的是document.getElementsByClassName()，因为它可以快速获取所有具有指定类名的元素，并返回一个实时的 HTMLCollection。接下来，我们详细介绍如何使用这些方法来获取元素，并且在实际的项目中如何应用这些技巧来提高代码的效率和可维护性。

一、使用 `document.getElementsByClassName()`

document.getElementsByClassName() 是获取具有指定类名的元素的快捷方法。它返回一个实时的 HTMLCollection，当 DOM 发生变化时，该集合会自动更新。

// 获取所有具有类名 'example' 的元素
var elements = document.getElementsByClassName('example');

这个方法适用于需要快速获取大批量元素的场景，尤其是在对这些元素进行批量操作时，例如批量添加事件监听器或者修改样式。

详细描述：

document.getElementsByClassName() 返回一个 HTMLCollection 对象，而不是数组。虽然它类似于数组，但不具备数组的所有方法。你可以通过索引访问元素，并且可以使用 length 属性获取集合的大小。

for (var i = 0; i < elements.length; i++) {
    elements[i].style.color = 'red'; // 将所有元素的文字颜色修改为红色
}

二、遍历 DOM 树

在某些情况下，你可能需要更灵活的方法来查找元素。这时候，你可以手动遍历 DOM 树，结合其他选择器方法进行筛选。

// 自定义函数，通过类名获取元素
function getElementsByClassName(root, className) {
    var elements = [];
    var allElements = root.getElementsByTagName('*');
    for (var i = 0; i < allElements.length; i++) {
        if (allElements[i].classList.contains(className)) {
            elements.push(allElements[i]);
        }
    }
    return elements;
}
// 使用自定义函数
var customElements = getElementsByClassName(document, 'example');

这种方法虽然效率不如 document.getElementsByClassName()，但它提供了更大的灵活性，适用于复杂的 DOM 结构。

三、结合其他选择器方法

有时你可能需要结合其他选择器方法来获取更加精确的结果。例如，结合 querySelectorAll 方法，它允许你使用 CSS 选择器来获取元素。

// 使用 querySelectorAll 获取具有类名 'example' 的元素
var elements = document.querySelectorAll('.example');

querySelectorAll 返回一个 NodeList，它类似于数组，但并不是数组。你可以使用 forEach 方法来遍历它。

elements.forEach(function(element) {
    element.style.color = 'blue'; // 将所有元素的文字颜色修改为蓝色
});

四、在项目中的应用

在实际项目中，选择合适的获取元素的方法可以显著提高代码的效率和可维护性。对于大多数情况，document.getElementsByClassName() 已经足够使用，但在需要更高灵活性时，可以选择手动遍历 DOM 或结合其他选择器方法。

示例项目：动态菜单项高亮

假设你在开发一个导航菜单，需要根据用户点击的菜单项来动态高亮显示。你可以使用 document.getElementsByClassName() 来实现这一需求。

var menuItems = document.getElementsByClassName('menu-item');
for (var i = 0; i < menuItems.length; i++) {
    menuItems[i].addEventListener('click', function() {
        // 移除所有菜单项的高亮样式
        for (var j = 0; j < menuItems.length; j++) {
            menuItems[j].classList.remove('active');
        }
        // 为点击的菜单项添加高亮样式
        this.classList.add('active');
    });
}

在这个示例中，我们通过 document.getElementsByClassName() 获取所有菜单项，并为每个菜单项添加点击事件监听器。当用户点击某个菜单项时，移除所有菜单项的高亮样式，并为当前点击的菜单项添加高亮样式。

五、结合项目管理系统

在实际开发过程中，尤其是团队协作中，合理使用项目管理系统可以显著提高开发效率。我们推荐使用以下两个系统：

研发项目管理系统PingCode：专为研发团队设计，具备强大的任务管理和进度追踪功能，适合复杂项目的管理。
通用项目协作软件Worktile：适用于各类团队协作，提供灵活的任务管理、时间安排和文档共享功能，提升团队工作效率。

通过结合这些项目管理系统，你可以更好地组织和分配任务，确保项目按时高质量完成。

六、性能优化和注意事项

在使用 document.getElementsByClassName() 进行大规模 DOM 操作时，需要注意性能问题。以下是一些优化建议：

避免频繁操作 DOM：尽量减少 DOM 操作次数，可以通过批量更新或使用文档片段（DocumentFragment）来优化性能。
缓存选择结果：在循环中频繁使用选择器会影响性能，建议将选择结果缓存起来再进行操作。
使用事件委托：在需要为大量子元素添加事件监听器时，可以考虑使用事件委托，将监听器添加到父元素上，通过事件冒泡机制处理事件。

// 使用事件委托
document.querySelector('.menu').addEventListener('click', function(event) {
    if (event.target.classList.contains('menu-item')) {
        // 处理菜单项点击事件
        var menuItems = document.getElementsByClassName('menu-item');
        for (var i = 0; i < menuItems.length; i++) {
            menuItems[i].classList.remove('active');
        }
        event.target.classList.add('active');
    }
});

通过这些优化方法，可以显著提高代码的执行效率，减少性能开销，确保应用在大数据量的情况下依然流畅运行。

七、总结

原生JS通过类名获取元素的方法多种多样，最常用的是 document.getElementsByClassName()，它快速且高效；但在需要更灵活的操作时，可以选择手动遍历 DOM 树或结合其他选择器方法。在实际项目中，合理选择和优化这些方法，可以提高代码的性能和可维护性。结合项目管理系统如PingCode和Worktile，可以进一步提升团队协作效率，确保项目的成功交付。