js只生效了一个

// 错误示例，只会选择第一个匹配的元素
const element = document.querySelector('.my-class');
element.style.color = 'red';

// 正确示例，选择所有匹配的元素
const elements = document.querySelectorAll('.my-class');
elements.forEach(el => el.style.color = 'red');

// 错误示例，只绑定到一个元素
document.querySelector('.my-button').addEventListener('click', function() {
  console.log('Button clicked');
});

// 正确示例，使用事件委托
document.body.addEventListener('click', function(event) {
  if (event.target.matches('.my-button')) {
    console.log('Button clicked');
  }
});

// 错误示例，可能在数据加载完成前执行
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data); // 确保在这里处理数据
  });

// 正确示例，使用async/await
async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data); // 确保在这里处理数据
}
fetchData();