在JavaScript中，不具有属性“ foo”的对象“ obj”如何使用obj [“ foo”]赋值？

Question

I read in the book Secrets of the JavaScript Ninja, that we can use document.all["id"] to get all elements in the document that has such ID, if the browser supports it. (although supposedly we should only have one element with a particular ID).

But document.all returns an HTMLAllCollection object, and I see in Chrome that it has 9 elements, like an array (9 elements, as set up in jsfiddle). So I can understand why document.all[9] can return the element, but why can document.all["foo"] return it too? If we define var obj = { foo : 123 } , then we can say obj["foo"] , but document.all is not an object with a key foo . So supposedly, document.all["foo"] shouldn't be able to return an element like that.

Note: this question is not to ask about the use of document.all , and it is not about asking to have two elements with the same ID on the page. It is asking why an object obj that does not seem to have the key foo is able to give a value using obj["foo"] I do not know why this is not a valid programming question.

sample code:

1 element with such ID:
http://jsfiddle.net/ArR5x/5/

2 elements with such ID:
http://jsfiddle.net/ArR5x/10/

Update: Dan Tao is correct. It is due to some properties being enumerable and some are not, and we can easily produce the same situation if ECMAScript 5 is supported: http://jsfiddle.net/Akdp9/12/ The is a valid question about JavaScript, and the real answer is that it is due to the enumerable attribute of a property.

Answer 1

I think I understand why you're confused. Let me explain a couple of things to clear up any confusion. Some of this you may already know, but I'm going to cover all of it just to be safe.

First, an array-like object can still have properties just like any other object. Even a vanilla Array is like this.

var arr = [1, 2, 3];
arr.foo = "bar";
arr["foo"]; // => "bar"

So it seems perfectly reasonable that after parsing the DOM, the browser populates document.all with properties corresponding to every ID on the page, even though HTMLAllCollection is rather array-like.

Second, an object's properties are not necessarily all created equal. You may have tried this and noticed a lack of any "foo" property:

Object.keys(document.all)
// => ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "length"]

However, "foo" really is a property of document.all . You can verify that pretty easily:

document.all.foo;
// => [<div id=​"foo">​hello​</div>​, <div id=​"foo">​world​</div>​]

document.all.hasOwnProperty("foo") // => true

The issue here is that it is not an enumerable property. This means it won't show up in a for / in loop, and it also explains why you don't see it when you all Object.keys .

You can confirm this with the propertyIsEnumerable method :

document.all.propertyIsEnumerable("foo"); // => false

So in the end it's not so much of a mystery. Arbitrary properties can be assigned to the document.all object, just as they can with arrays. And that is the case here; the properties just aren't enumerable.

Answer 2

DOM is not implemented in Javascript and most rules of Javascript don't apply to it.

For example, in Chrome !!document.all evaluates to false even though in Javascript rules, all objects are truthy.

Answer 3

Just because you aren't supposed to have multiple elements with the same ID does not mean that you can't query them. A CSS selector will apply to multiple elements with the same ID, as will querySelectorAll :

document.querySelectorAll('#foo');

can also return multiple elements.

Here's the fiddle to prove it: http://jsfiddle.net/EgBbN/