框架盛行，还记得原生JS如何获取表单数据吗？

你好同学，我是沐爸，欢迎点赞、收藏、评论和关注！

在这个前端框架遍地开花的时代，同学们常常被React、Vue、Angular等现代JavaScript框架的便捷性和高效性所吸引。那么多年过去，你还记得原生JS是如何获取表单数据的吗？今天我们一起回顾下。

如何获取整个表单？

// 方式一
var formEl = document.getElementById('loginForm'); 

// 方式二
var formEl = document.querySelector('#loginForm'); 

// 方式三
var formEl = document.forms.loginForm; 
var formEl = document.forms['loginForm']; 

document 提供了一个属性"forms"，用来存储页面上的所有表单元素。如果 form 元素具有 id 或 name 属性，那么可以通过 . 或 [] 快速访问。

如何获取单个表单元素？

方式一：
可以通过document.getElementById或document.querySelector获取单个表单元素，并读取其value属性。

var username = document.getElementById('username').value;  
var password = document.getElementById('password').value;

方式二：
可以借助 form 元素读取单个表单元素及其值。

var formEl = document.getElementById('loginForm'); 
或
var formEl = document.forms.loginForm; 

console.log(formEl.username.value, formEl.password.value)

遍历表单中的所有元素

对于包含多个输入字段的表单，我们可以使用document.forms集合来访问表单，并通过遍历表单中的elements集合来获取所有元素的值。

函数封装：

function collectFormData(form) {
   
    let formData = {
   };

    // 遍历表单中的所有元素  
    Array.from(form.elements).forEach(element => {
   
        // 忽略没有name属性的元素  
        if (!element.name) return;

        // 处理单值输入元素  
        if (['text', 'password', 'email', 'number', 'date', 'color', 'textarea'].includes(element.type) ||
            (element.type === 'radio' && element.checked)) {
   
            formData[element.name] = element.value;
        } else if