表单元素数组提取ID

Question

使用JavaScript可以检索一组表单元素。

[
    input#NOM.form-control.input-md, 
    input#SURNAME.form-control.input-md, 
    input#AGE.form-control.input-md, input#ADDRESS.form-control.input-md, 
    input#GENDER.form-control.input-md, input#COUNTRY.form-control.input-md
]

我正在尝试从中提取ID。我尝试使用forEach失败。 我获取此数据的代码如下：

const getAllFormElements = element =>
    Array.from(element.elements)
        .filter(tag => ["select", "textarea", "input"]
            .includes(tag.tagName.toLowerCase()));
const pageFormElements = getAllFormElements(document.getElementById("requestForm"));
console.log(pageFormElements);

这是我的形式（非常经典）：

<form class="form-horizontal" id="requestForm">
    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <label class="col-md-12 control-label" for="NOM">NOM</label>
                <div class="col-md-12">
                    <input id="NOM" name="NOM" type="text" class="form-control input-md">
                </div>
            </div>
        </div>
        ...
        <div class="col-md-4">
            <div class="form-group">
                <label class="col-md-12 control-label" for="GENDER">GENDER</label>
                <div class="col-md-12">
                    <input id="GENDER" name="GENDER" type="text" class="form-control input-md">
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col" style="height: inherit">
            <div class="form-group" style="margin-top: 30px">
                <div class="col-md-4 align-bottom">
                    <button id="btnOk" name="btnOk" class="btn btn-primary">Button</button>
                </div>
            </div>
        </div>
    </div>
</form>

const getAllFormElements = element =>
  Array.from(element.elements)
  .filter(tag => ["select", "textarea", "input"]
    .includes(tag.tagName.toLowerCase()));
const pageFormElements = getAllFormElements(document.getElementById("requestForm"));
console.log(pageFormElements);

<form class="form-horizontal" id="requestForm">
  <div class="row">
    <div class="col-md-4">
      <div class="form-group">
        <label class="col-md-12 control-label" for="NOM">NOM</label>
        <div class="col-md-12">
          <input id="NOM" name="NOM" type="text" class="form-control input-md">
        </div>
      </div>
    </div>
    ...
    <div class="col-md-4">
      <div class="form-group">
        <label class="col-md-12 control-label" for="GENDER">GENDER</label>
        <div class="col-md-12">
          <input id="GENDER" name="GENDER" type="text" class="form-control input-md">
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col" style="height: inherit">
      <div class="form-group" style="margin-top: 30px">
        <div class="col-md-4 align-bottom">
          <button id="btnOk" name="btnOk" class="btn btn-primary">Button</button>
        </div>
      </div>
    </div>
  </div>
</form>