按位置访问文档元素时检测数组

Question

As the browser reads an HTML document and forms a parse tree, JavaScript objects are 
instantiated for all elements that are scriptable. Initially, the number of markup 
elements that were scriptable in browsers was limited, but with a modern browser it 
is possible to access any arbitrary HTML element.

但是，目前，作为脚本语言的新手，我正专注于 HTML 元素 可通过传统JavaScript对象模型（也称为DOM级别0 )，特别是和其相关元素，让事情变得简单。

正在检测数组
虽然 arrays 与 objects 没有什么不同，但我们可以这样对待它们，并检测它们可能很重要。不幸的是，typeof 帮不上什么忙。

    var arr = [];
    alert(typeof arr);            // "object"

    alert(arr instanceof Array);  // returns true

    alert(Array.isArray(arr));    // returns true

使用 traditional JavaScript object model，我们可以使用

访问 <form> 标签

window.document.forms

这是一个从基本意义上看起来像数组的集合。
考虑一个非常基本的形式

    <form action="form1action.php" method="get">
        <input type="text" name="field1">

    </form>
    <br><br>

    <form action="form2action.php" method="get">
        <input type="text" name="field2">
        <br>
        <input type="text" name="field3">

    </form>

    <script type="text/javascript">

        console.log(typeof window.document.forms[1].elements[1]);            // object
        console.log(typeof window.document.forms[1].elements);               // object
        console.log(window.document.forms[1].elements instanceof Array);     // false
        console.log(window.document.forms instanceof Array);  // false

    </script>

我发现自己对意外行为感到很困惑（这只对我而言）

console.log(window.document.forms[1].elements instanceof Array);  // false
console.log(typeof window.document.forms instanceof Array);       // false

因为我的印象是 JavaScript 引擎会将 something[] 视为 instanceof Array，上面的例子是关注elements and forms。

Answer 1

并非所有具有索引属性（[0], [1] 等）的东西都是数组 - 它可以是任何类型的对象集合，这不是一回事。它甚至可能只是一个带有 0 属性的对象，而不是一个集合。

在这种情况下，document.forms 是一个 HTMLCollection - HTML 元素的专门集合 - 而 window.document.forms[1].elements 是一个 HTMLFormControlsCollection，它继承自HTMLCollection.

// all log true
console.log(window.document.forms instanceof HTMLCollection);
console.log(window.document.forms[1].elements instanceof HTMLFormControlsCollection);
console.log(window.document.forms[1].elements instanceof HTMLCollection);

// NOTE: typeof doesn't give the exact type of an object.
// This just logs "object", rather than "HTMLCollection", because it is an object, as opposed to e.g. a number
console.log(typeof window.document.forms);

var myObject = {0: 'foo', 1: 'bar'};
// log "foo bar"
console.log(myObject[0], myObject[1]);

<form></form>
<form></form>

Mozilla 在 MDN 上的文档通常有助于查看对象的实际类型，例如document.forms and HTMLFormElement.elements.

按位置访问文档元素时检测数组

Detecting Arrays when accessing Document Elements by Position

javascript

arrays

forms

dom