JavaScript 如何获取多个重复 div 内的 input 和 select 值

在前端开发中，常常会遇到需要获取多个重复 div 内的 input 和 select 值的情况。掌握有效的获取方法，能够极大地提升开发效率，优化用户交互体验。下面将详细介绍几种实用的获取方式。

使用 document.querySelectorAll 方法

document.querySelectorAll 是一个强大的工具，它允许我们使用 CSS 选择器来匹配一组元素。若要获取多个重复 div 内的 input 和 select 值，可以这样做：首先使用该方法选中所有包含目标元素的 div，然后遍历这些 div，再在每个 div 内部分别获取 input 和 select 的值。

例如：

const divs = document.querySelectorAll('.repeating-div');
divs.forEach((div) => {
    const inputValue = div.querySelector('input').value;
    const selectValue = div.querySelector('select').value;
    console.log('Input value:', inputValue);
    console.log('Select value:', selectValue);
});

在这段代码中，首先通过类名 “repeating-div” 选中所有重复的 div，接着遍历每个 div，利用 querySelector 分别获取其中 input 和 select 的值，并将其打印出来。

利用事件委托

事件委托是一种高效的事件处理方式。可以将事件监听器绑定到一个父元素上，当子元素触发事件时，事件会冒泡到父元素上进行处理。

例如，为包含多个重复 div 的父元素添加一个 change 事件监听器：

const parent = document.getElementById('parent-div');
parent.addEventListener('change', (event) => {
    if (event.target.tagName === 'INPUT' || event.target.tagName === 'SELECT') {
        const div = event.target.closest('.repeating-div');
        const inputValue = div.querySelector('input').value;
        const selectValue = div.querySelector('select').value;
        console.log('Input value:', inputValue);
        console.log('Select value:', selectValue);
    }
});

在这个示例中，当父元素 “parent-div” 内的 input 或 select 元素的值发生变化时，事件会被捕获。通过判断事件源的标签名，确定是目标元素触发的事件，再利用 closest 方法找到包含该元素的 div，进而获取 input 和 select 的值。

通过上述两种方法，能够轻松地在 JavaScript 中获取多个重复 div 内的 input 和 select 值。在实际项目中，可根据具体需求选择合适的方法，实现高效、准确的数据获取与处理。