使用document.getElementsByTagName选中的元素如何绑定点击修改事件

• 你混淆了jQuery的click()事件绑定方法和原生JavaScript的DOM API：原生DOM元素的click()方法仅用于模拟触发点击行为，不能用来绑定点击事件回调。
• 原生环境下绑定点击事件需要使用addEventListener方法。

document.getElementsByTagName("h1")[1].addEventListener('click', function() {
  this.style.fontSize = "9vw";
});

• 要保证代码执行时目标h1元素已经渲染完毕，避免出现下标越界选中undefined的报错，推荐把代码放在页面底部</body>标签之前，或者包裹在DOM加载完成的监听回调中：

document.addEventListener('DOMContentLoaded', function() {
  const targetH1 = document.getElementsByTagName('h1')[1];
  // 先校验元素是否存在再绑定事件
  if (targetH1) {
    targetH1.addEventListener('click', function() {
      this.style.fontSize = '9vw';
    });
  }
});

• 如果你是习惯了jQuery的语法，要确保页面提前引入了jQuery库，并且将原生DOM元素转为jQuery对象后再调用click()绑定方法：

// jQuery写法
$('h1').eq(1).click(function() {
  $(this).css('fontSize', '9vw');
});

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