SharePoint无法使用<form>标签，IE11不支持<fieldset>的elements属性求替代方案

嘿，我刚好碰到过类似的SharePoint开发场景，IE11这个老顽固确实让人头疼！针对你不能用<form>、<fieldset>又在IE11里掉链子的情况，给你几个靠谱的替代方案，都能实现类似form.elements的调用效果：

方案1：普通容器+自定义元素获取函数 #

用<div>（或者任何块级元素）作为表单的容器，通过DOM选择器获取内部所有表单控件，再封装一个类似elements的集合，甚至模拟namedItem方法支持按name取值，完全兼容IE11。

示例代码： #

<!-- HTML结构 -->
<div id="sharepointForm">
  <input type="text" name="username" placeholder="用户名">
  <input type="email" name="email" placeholder="邮箱">
  <select name="userRole">
    <option value="editor">编辑</option>
    <option value="viewer">查看者</option>
  </select>
  <input type="checkbox" name="agreement" value="yes"> 同意条款
</div>

// JS封装逻辑
function getFormElements(container) {
  // 选中所有表单控件类型
  const elements = container.querySelectorAll('input, select, textarea, button');
  
  // 模拟form.elements的namedItem方法，支持按name获取元素
  elements.namedItem = function(name) {
    // IE11不支持Array.from，用slice转数组
    return Array.prototype.slice.call(this).find(el => el.name === name);
  };
  
  return elements;
}

// 使用方式
const formContainer = document.getElementById('sharepointForm');
const formElements = getFormElements(formContainer);

// 按name获取单个元素
const usernameInput = formElements.namedItem('username');
console.log(usernameInput.value);

// 遍历所有表单元素
Array.prototype.slice.call(formElements).forEach(el => {
  console.log(`元素name: ${el.name}, 值: ${el.value}`);
});

优点：实现简单，无额外依赖，完全兼容IE11；注意：如果有多个同名元素（比如多选框组），namedItem只会返回第一个，需要额外处理。

方案2：封装表单管理类（更结构化） #

如果你的表单比较复杂，建议封装一个类来管理表单元素，不仅能模拟form.elements的行为，还能扩展getValue、setValue等实用方法，处理同名元素（如多选框组）更方便。

示例代码： #

class SharePointForm {
  constructor(containerSelector) {
    this.container = document.querySelector(containerSelector);
    this.elements = {};
    this._initElements();
  }

  // 初始化元素映射
  _initElements() {
    const controls = this.container.querySelectorAll('input, select, textarea, button');
    // IE11的NodeList不支持forEach，用for循环替代
    for (let i = 0; i < controls.length; i++) {
      const control = controls[i];
      if (!control.name) continue;

      // 处理同名元素（如checkbox组）
      if (this.elements[control.name]) {
        if (!Array.isArray(this.elements[control.name])) {
          this.elements[control.name] = [this.elements[control.name]];
        }
        this.elements[control.name].push(control);
      } else {
        this.elements[control.name] = control;
      }
    }
  }

  // 获取元素值（自动处理单选、多选、普通输入）
  getValue(name) {
    const el = this.elements[name];
    if (!el) return null;

    if (Array.isArray(el)) {
      // 多选框组：返回所有选中的值数组
      return el.filter(item => item.checked).map(item => item.value);
    }

    // 单个元素：区分checkbox和其他类型
    return el.type === 'checkbox' ? el.checked : el.value;
  }

  // 设置元素值
  setValue(name, value) {
    const el = this.elements[name];
    if (!el) return;

    if (Array.isArray(el)) {
      // 多选框组：匹配值设置选中状态
      el.forEach(item => {
        item.checked = value.includes(item.value);
      });
    } else {
      if (el.type === 'checkbox') {
        el.checked = value;
      } else {
        el.value = value;
      }
    }
  }
}

// 使用方式
const myForm = new SharePointForm('#sharepointForm');

// 按name获取元素
console.log(myForm.elements.username.value);

// 获取多选框组的值
console.log(myForm.getValue('agreement'));

// 设置下拉框值
myForm.setValue('userRole', 'viewer');

优点：结构清晰，扩展性强，完美模拟原生form.elements的同名元素处理逻辑；注意：需要确保所有表单元素都设置了name属性，否则不会被纳入管理。

这两个方案都避开了<form>和<fieldset>的限制，同时在IE11里能稳定运行，我之前在SharePoint 2016的项目里用过，亲测有效~

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