嘿，自学阶段碰到这类DOM操作问题太正常啦，我来帮你理清楚怎么解决～

首先直接回答你的问题：document.getElementsByClassName是完全可以用的，不过还有更简洁灵活的方法，我会把几种方案都给你讲明白。

一、用document.getElementsByClassName实现 #

这个方法会返回一个HTMLCollection（类数组对象），包含所有匹配指定class的元素，所以要注意处理集合：

1. 单个按钮的情况 #

如果页面上只有这一个Button1类的按钮，可以直接取集合的第一个元素：

// 确保代码在DOM加载完成后执行，否则会找不到元素
document.addEventListener('DOMContentLoaded', function() {
  const button = document.getElementsByClassName('Button1')[0];
  // 用onclick绑定事件
  button.onclick = function(event) {
    // 因为这是submit按钮，点击默认会提交表单，不需要的话可以阻止
    event.preventDefault();
    console.log('按钮被点击了！');
    // 这里写你要执行的自定义逻辑，比如跳转、弹窗等
  };
});

2. 多个同Class按钮的情况 #

如果有多个Button1类的按钮，需要遍历集合绑定事件：

document.addEventListener('DOMContentLoaded', function() {
  const buttons = document.getElementsByClassName('Button1');
  // 用for循环遍历（因为HTMLCollection不支持forEach，旧浏览器要注意）
  for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function(event) {
      event.preventDefault();
      console.log(`第${i+1}个按钮被点击`);
    });
  }
});

二、更推荐的方案：document.querySelector / querySelectorAll #

这两个方法支持CSS选择器语法，用起来更灵活，是现代开发中更常用的方式：

1. 单个按钮（推荐） #

querySelector会直接返回匹配的第一个元素，代码更简洁：

document.addEventListener('DOMContentLoaded', function() {
  const goButton = document.querySelector('.Button1');
  // 推荐用addEventListener，支持绑定多个事件，不会覆盖之前的绑定
  goButton.addEventListener('click', function(event) {
    event.preventDefault();
    alert("Let's GO！按钮被触发啦");
  });
});

2. 多个同Class按钮 #

querySelectorAll返回一个NodeList，现代浏览器支持直接用forEach遍历：

document.addEventListener('DOMContentLoaded', function() {
  const buttons = document.querySelectorAll('.Button1');
  buttons.forEach((button, index) => {
    button.addEventListener('click', function(event) {
      event.preventDefault();
      console.log(`按钮${index+1}的文本是：${this.textContent}`);
    });
  });
});

三、方法对比 #

总结一下：如果只是操作单个按钮，querySelector是最方便的；如果要处理多个同class元素，两种方法都可以，但querySelectorAll的遍历更简洁。另外，优先用addEventListener替代onclick，因为它可以绑定多个不同的点击事件，不会被覆盖。

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