如何在Svelte中遍历指定类名的DOM元素？

• 你之前尝试的那段代码之所以报错，是因为Svelte里不支持那样的导出别名写法，而且这段代码本身也没解决DOM元素获取的核心问题，放弃是合理的。

• 针对你要遍历类名元素做动画的需求，给两个实用方案：

  1. 用onMount钩子确保DOM渲染完成后再获取元素
     Svelte组件初始化阶段，DOM还没挂载到页面上，直接调用getElementsByClassName会拿不到目标元素。onMount钩子会在组件完全挂载到DOM后执行，这时候就能正确获取元素了：

     <script>
       import { onMount } from 'svelte';
     
       onMount(() => {
         // 把类数组转成普通数组，才能用forEach遍历
         const animateElements = Array.from(document.getElementsByClassName('animate-item'));
         animateElements.forEach(el => {
           // 这里添加你的动画逻辑，比如给元素加动画类
           el.classList.add('fade-in');
         });
       });
     </script>
     
     <div class="animate-item">动画元素1</div>
     <div class="animate-item">动画元素2</div>
     <style>
       .fade-in {
         animation: fadeIn 0.8s forwards;
       }
       @keyframes fadeIn {
         from { opacity: 0; }
         to { opacity: 1; }
       }
     </style>
     

  2. 绑定父容器，在组件内部范围查找元素（更推荐）
     如果不想用全局document查找元素（避免和页面其他组件的元素冲突），可以用bind:this绑定组件内的父容器，然后在容器内定位目标元素，更符合Svelte的组件封装思想：

     <script>
       import { onMount } from 'svelte';
     
       let componentContainer;
     
       onMount(() => {
         // 只在当前组件的容器内查找元素
         const animateElements = Array.from(componentContainer.querySelectorAll('.animate-item'));
         animateElements.forEach(el => {
           el.style.animation = 'slideUp 0.6s ease-out forwards';
         });
       });
     </script>
     
     <div bind:this={componentContainer}>
       <div class="animate-item">动画元素A</div>
       <div class="animate-item">动画元素B</div>
     </div>
     <style>
       @keyframes slideUp {
         from { transform: translateY(20px); opacity: 0; }
         to { transform: translateY(0); opacity: 1; }
       }
     </style>
     

• 补充：你提到bind:this不符合需求，应该是因为它只能绑定单个元素，没法直接获取一组元素。上面两种方法正好解决这个痛点，既能批量获取元素，又符合Svelte的生命周期规则。

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