多相同元素操作及DOM空错误规避：原生JS与jQuery对比

刚好帮你梳理下原生JavaScript和jQuery在处理这类多元素交互、避免DOM空错误场景下的差异，先从两种实现方案说起，再对比核心区别：

需求回顾 #

给页面上所有type="date"的输入框实现：默认灰色文字，用户选择日期后变为黑色；同时要避免DOM元素不存在时触发报错。

jQuery 实现方案 #

jQuery的封装特性让这类场景的代码非常简洁，自带跨浏览器兼容和空集合容错：

完整代码示例 #

/* 默认样式：未选择时灰色 */
input[type="date"] {
  color: #9c9c9c;
}

<!-- 引入jQuery库 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- 多个日期输入框 -->
<input type="date" placeholder="MM/DD/YYYY">
<input type="date" placeholder="MM/DD/YYYY">
<!-- 更多输入框... -->

// 绑定change事件，自动遍历所有匹配元素
$('input[type="date"]').on('change', function() {
  const hasValue = $(this).val() !== '';
  // 切换文字颜色
  $(this).css('color', hasValue ? '#000000' : '#9c9c9c');
});

原生 JavaScript 实现方案 #

原生JS需要手动处理元素遍历和空DOM判断，但更轻量化（无需引入外部库）：

完整代码示例 #

/* 同样的默认样式 */
input[type="date"] {
  color: #9c9c9c;
}

<!-- 无需引入外部库 -->
<input type="date" placeholder="MM/DD/YYYY">
<input type="date" placeholder="MM/DD/YYYY">
<!-- 更多输入框... -->

// 获取所有日期输入框，转成数组方便遍历
const dateInputs = Array.from(document.querySelectorAll('input[type="date"]'));

// 先判断是否存在元素，避免空操作报错
if (dateInputs.length > 0) {
  dateInputs.forEach(input => {
    input.addEventListener('change', function() {
      // 直接操作DOM元素的样式和属性
      this.style.color = this.value !== '' ? '#000000' : '#9c9c9c';
    });
  });
}

核心实现差异对比 #

1. 多元素操作逻辑 #

• jQuery：$('input[type="date"]')返回的是jQuery封装的集合对象，调用.on()时会自动遍历集合内所有元素绑定事件，不需要手动写循环，语法更简洁。
• 原生JS：document.querySelectorAll()返回的是类数组的HTMLCollection，需要先转成数组（Array.from()或扩展运算符[...xxx]），再通过forEach()手动遍历绑定事件，步骤更清晰但代码量稍多。

2. DOM不存在时的错误处理 #

• jQuery：如果选择器匹配不到任何元素，返回的是空jQuery集合，但jQuery的所有方法（比如.on()）在空集合上调用都不会报错——它内部会自动判断集合长度，跳过无效操作，开发者无需额外判断。
• 原生JS：如果querySelectorAll()返回空集合，直接调用forEach()会触发类型错误（旧环境下）；即使转成空数组，forEach不会执行，但严谨起见还是需要手动判断dateInputs.length > 0，避免后续无效代码执行。

3. 底层操作与兼容性 #

• jQuery：所有DOM操作（.val()、.css()）都经过封装，自动处理了跨浏览器的兼容性差异（比如旧IE对样式、属性的处理方式），开发者无需关注细节。
• 原生JS：直接操作DOM元素的原生属性和方法（this.value、this.style.color），现代浏览器下兼容性很好，但如果要兼容老旧浏览器（如IE10及以下），需要自己处理兼容细节。

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