甜蜜警报querySelector一键工作

Question

此处我的代码仅对第一个按钮运行甜蜜警报，我需要对所有按钮运行甜蜜警报，不知道为什么会发生这种情况？

<button type="button" class="delete btn btn-danger  btn-sm" aria-pressed="false" value="2" style="border-radius: 4px;">Danger</button>

<button type="button" class="delete btn btn-danger  btn-sm" aria-pressed="false" value="3" style="border-radius: 4px;">Danger</button>

   <script>

        document.querySelector('.delete').addEventListener('click', function() 
        {
         swal({

             title: 'Are you sure?',
             text: "You won't be able to revert this!",
             type: 'warning',
             showCancelButton: true,
             confirmButtonColor: '#3085d6',
             cancelButtonColor: '#d33',
             confirmButtonText: 'Yes, delete it!'

         }).then((result) => {
             if (result.value) {
                 swal(
                     'Deleted!',
                     'Your file has been deleted.',
                     'success',

                 )
             }
         });
     });
 </script>