document.formBox是否为HTMLCollection？为何可使用for..of遍历？

示例代码 #

JavaScript

for (let i of document.formBox) {
  console.log(i);
};

HTML

<form name="formBox">
  <input name="inputOne">
  <input name="inputTwo">
  <button name='btn'>BUTTON</button>
</form>

• document.formBox 并非 HTMLCollection：它就是页面上name为formBox的<form>元素本身，属于HTMLFormElement（HTMLElement的子类），和你最初的认知一致。
• 能使用for..of遍历的原因：HTMLFormElement实现了可迭代接口，它的默认迭代器会指向自身的elements属性——这个属性才是包含表单内所有控件的HTMLCollection。当你用for..of遍历表单元素时，实际上是在遍历它内部的表单控件（input、button等），这是浏览器为表单元素提供的便捷遍历特性。

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