将jQuery脚本转为JavaScript时遇querySelector执行错误，求解决方案

原jQuery代码 #

window.addEventListener("load", function() {
  jQuery(function($) {
    $('select.ddlVarianti').on('change', function() {
      var optionSelected = $(this).find("option:selected");
      var tagliaSelected   = optionSelected.text();
      window.dataLayer = window.dataLayer || [];
      dataLayer.push({
        'event':'GAevent',
        'eventID':'13',
        'eventCategory':'product',
        'eventAction':'taglia',
        'eventLabel': tagliaSelected,
      });
    });
  });
});

改写的错误原生JS代码 #

document.querySelector('select.ddlVarianti').addEventListener('change', function() {
  var optionSelected = document.querySelector(this).querySelector("option:selected");
  var tagliaSelected   = optionSelected.text();
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    'event':'GAevent',
    'eventID':'13',
    'eventCategory':'product',
    'eventAction':'taglia',
    'eventLabel': tagliaSelected,
  });
});

报错信息 #

Failed to execute 'querySelector' on 'Document': '[object HTMLSelectElement]' is not a valid selector.

错误原因及修正方案 #

错误点分析 #

1. document.querySelector(this) 用法错误：事件回调里的this已经是当前触发事件的<select> DOM元素，document.querySelector()接收的是字符串选择器而非DOM对象，把DOM元素传入自然会抛出无效选择器的错误。
2. 获取选中项的方式冗余：原生JS里<select>元素自带selectedOptions属性，直接就能拿到选中的<option>元素，无需嵌套querySelector。
3. optionSelected.text()方法不存在：jQuery的text()对应原生JS的textContent属性，DOM元素本身没有text()方法。

修正后的代码 #

window.addEventListener("load", function() {
  // 确保DOM加载完成后再获取元素
  const selectEl = document.querySelector('select.ddlVarianti');
  // 防止元素不存在导致报错
  if (selectEl) {
    selectEl.addEventListener('change', function() {
      // 直接通过select元素的selectedOptions获取选中项
      const selectedOption = this.selectedOptions[0];
      // 用textContent获取文本内容
      const tagliaSelected = selectedOption.textContent;
      
      window.dataLayer = window.dataLayer || [];
      dataLayer.push({
        'event':'GAevent',
        'eventID':'13',
        'eventCategory':'product',
        'eventAction':'taglia',
        'eventLabel': tagliaSelected
      });
    });
  }
});

额外优化说明 #

• 保留原代码的window.load监听，确保DOM完全加载后再操作元素，避免找不到元素的问题
• 增加元素存在性判断，防止页面中无select.ddlVarianti时抛出报错
• 去掉对象最后一个属性的尾逗号，避免在部分旧浏览器中出现语法错误

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