Prev: Canvas animations - what's up with the "Burst Engine"
Next: FAQ Topic - How do I run a server side script? (2010-07-05)
From: William Gill on 4 Jul 2010 12:42
I am working on a snippet and in my research I see that the options
property of the select object is a collection, not an array. I am
having great difficulty finding any good, comprehensive documentation on
javascript collections and their methods. Can anyone point me to a good
reference?

While we are on the subject of references I'm open to suggestions in
general. I prefer to have down-loadable, searchable references because
I hop back and forth between many, and the differences sometimes blur. I
frequently have trouble remembering language specific semantics and
terminology, (i.e. I may remember that something exists, and what it
is/does, but can't remember what it's called in that particular
language.) but I can usually search and find things that remind me of
what I'm looking for, and where to look for it.

Thanks.
From: Gregor Kofler on 4 Jul 2010 15:58
Am 2010-07-04 18:42, William Gill meinte:
> I am working on a snippet and in my research I see that the options
> property of the select object is a collection, not an array.

You are looking for a NodeList.

> I am having
> great difficulty finding any good, comprehensive documentation on
> javascript collections and their methods. Can anyone point me to a good
> reference?

There are not too many properties or methods.

For a start:
https://developer.mozilla.org/En/DOM/NodeList

Gregor


--
http://www.gregorkofler.com
From: nick on 4 Jul 2010 19:40
On Jul 4, 12:42 pm, William Gill <nos...(a)domain.invalid> wrote:
> I am working on a snippet and in my research I see that the options
> property of the select object is a collection, not an array.  I am
> having great difficulty finding any good, comprehensive documentation on
> javascript collections and their methods. Can anyone point me to a good
> reference?

What makes you call it a "collection?" Are you just using that as a
generic term for things that are like arrays but are not really
arrays? I tend to do that also; afaik "collection" has no predefined
meaning in js/es, so it seems safe to use as a generic word for things
like that... but because it's just a generic word, you won't find any
references on "collection" as if it were a real 'datatype' (ctor
function).

Chrome calls it a NodeList, as Gregor mentioned. Firefox doesn't seem
to have a special name for it, unless I've totally forgotten how to
use firebug since switching to chrome.

Check this out, it might be useful to you. Try putting it into the
chrome console one statement at a time. It'll work in ff/firebug too,
although the console.log lines seem pretty useless there.

// get a collection of nodes
var foo = document.getElementsByTagName('div');

// what kind of object is "foo?"
console.log(foo.constructor.prototype);

// --console output from previous line--
//
// Object
// constructor: function NodeList() { [native code] }
// item: function item() { [native code] }
// __proto__: Object

// so it's a NodeList. Looks like NodeList has a method named
// "item," but not much else.

// ...so maybe we'd be better off with an Array; it can do a lot
// more than a NodeList... Here's a trick (it's been discussed
// here before) to turn a array-like object into a true array.

foo = [].slice.call(foo);

// did it work?

console.log(foo.constructor.prototype);
// (shows prototype for Array ctor)

// let's see if we can use Array methods on "foo" now.

foo.reduce(function(p, n){
return (p.innerHTML || p) + n.innerHTML
}, '');

> While we are on the subject of references I'm open to suggestions in
> general.  

I like developer.mozilla.org, pretty thorough and straightforward,
good about pointing out deviations from standard. In general it seems
like most of the docs at moz pertain to most of the modern non-IE
browsers, but not so much IE, so it can be good to compare moz docs to
the docs on MSDN whenever you get around to hacking in IE support. ;)

> I prefer to have down-loadable, searchable references because
> I hop back and forth between many, and the differences sometimes blur.

Downloadable and searchable? You probably want those ECMAScript pdfs.
I'm sure someone here has a link. Those seem to be more targeted at
browser vendors than javascript programmers, though, so they can be
quite verbose. Also wget and grep are your friends.

> I frequently have trouble remembering language specific semantics and
> terminology, (i.e. I may remember that something exists, and what it
> is/does, but can't remember what it's called in that particular
> language.) but I can usually search and find things that remind me of
> what I'm looking for, and where to look for it.

You could check out visibone's cheat sheets at www.visibone.com/javascript

I haven't recommended these in years because I don't use them myself
(I've seen them in print, though, they're good) but it sounds like the
kind of quick reference you might be looking for.
From: RobG on 4 Jul 2010 20:27
On Jul 5, 5:58 am, Gregor Kofler <use...(a)gregorkofler.com> wrote:
> Am 2010-07-04 18:42, William Gill meinte:
>
> > I am working on a snippet and in my research I see that the options
> > property of the select object is a collection, not an array.
>
> You are looking for a NodeList.

No, a collection.

>
> > I am having
> > great difficulty finding any good, comprehensive documentation on
> > javascript collections and their methods. Can anyone point me to a good
> > reference?
>
> There are not too many properties or methods.
>
> For a start:https://developer.mozilla.org/En/DOM/NodeList

The definitive reference is the W3C DOM Core spec, the above page has
a link to the DOM 3 Core reference, which doesn't seem to have changed
since Level 1.

However, the OP was asking about collections, which are a type of
NodeList that have some extra features:

DOM 2 HTMLCollection
<URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506 >

DOM 2 introduced the HTMLOptionsCollection interface, which is similar
to other collections but differs in that the namedItem method accepts
only an id and that length is not readonly, so it can be used to set
the number of items (e.g. as a quick way to remove all options, set
length to zero):

DOM 2 HTMLOptionsCollection
<URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#HTMLOptionsCollection
>

The relevant HTML5 reference is:
<URL: http://www.w3.org/TR/html5/common-dom-interfaces.html#collections-0
>

So given the following:

Array.prototype.shift.call(aCollection);

If aCollection is not an options collection, an error should result
similar to:

"Setting a property that has only a getter"

If aCollection is an options collection, the last option will be
removed from the DOM. However, setting the length directly is likely
more efficient:

aCollection.length = aCollection.length - 1;

though shift will return the deleted option element, setting the
length won't, so:

var deletedOption = Array.prototype.shift.call(optCollection);

and

var optsLength = optCollection.length - 1
var deletedOption =
selectElement.removeChild(optCollection[optsLength]);

should be equivalent.


--
Rob
From: RobG on 4 Jul 2010 21:54
On Jul 5, 9:40 am, nick <nick...(a)fastmail.fm> wrote:
> On Jul 4, 12:42 pm, William Gill <nos...(a)domain.invalid> wrote:
>
> > I am working on a snippet and in my research I see that the options
> > property of the select object is a collection, not an array.  I am
> > having great difficulty finding any good, comprehensive documentation on
> > javascript collections and their methods. Can anyone point me to a good
> > reference?
>
> What makes you call it a "collection?"

Because in DOM 1 it was an HTML collection and in DOM 2 and HTML5 it
is an HTML options collection. See my earlier post.

Are you just using that as a
> generic term for things that are like arrays but are not really
> arrays? I tend to do that also; afaik "collection" has no predefined
> meaning in js/es, so it seems safe to use as a generic word for things
> like that... but because it's just a generic word, you won't find any
> references on "collection" as if it were a real 'datatype' (ctor
> function).
>
> Chrome calls it a NodeList, as Gregor mentioned. Firefox doesn't seem
> to have a special name for it, unless I've totally forgotten how to
> use firebug since switching to chrome.
>
> Check this out, it might be useful to you. Try putting it into the
> chrome console one statement at a time. It'll work in ff/firebug too,
> although the console.log lines seem pretty useless there.
>
>   // get a collection of nodes
>   var foo = document.getElementsByTagName('div');

That returns a NodeList, not a collection.


>   // what kind of object is "foo?"
>   console.log(foo.constructor.prototype);

Replacing console.log with alert in IE 6 returns "undefined".

>
>   //  --console output from previous line--
>   //
>   //  Object
>   //    constructor: function NodeList() { [native code] }
>   //    item: function item() { [native code] }
>   //    __proto__: Object
>
>   // so it's a NodeList. Looks like NodeList has a method named
>   // "item," but not much else.

Which is per the W3C specification. The above is an unreliable way of
determining that - browsers are notoriously bad at implementing the
finer points of specifications consistently. Try it in IE 6.


>   // ...so maybe we'd be better off with an Array; it can do a lot
>   // more than a NodeList... Here's a trick (it's been discussed
>   // here before) to turn a array-like object into a true array.
>
>   foo = [].slice.call(foo);
>
>   // did it work?

Maybe - in Firefox, yes. IE 6, no. Any Array method that requires
setting length (e.g. shift) will fail as it will try to set length,
which is readonly.

[...]
> > I prefer to have down-loadable, searchable references because
> > I hop back and forth between many, and the differences sometimes blur.
>
> Downloadable and searchable? You probably want those ECMAScript pdfs.
> I'm sure someone here has a link.

There are links in the FAQ:

<URL: http://www.jibbering.com/faq/#onlineResources >


--
Rob
 |  Next  |  Last
Pages: 1 2 3 4 5 6
Prev: Canvas animations - what's up with the "Burst Engine"
Next: FAQ Topic - How do I run a server side script? (2010-07-05)