// Generally, these are all the same var arrVehicleTypes=new Array(); arrVehicleTypes="Economy"; arrVehicleTypes="Compact"; arrVehicleTypes="Luxury"; arrVehicleTypes="Sports"; arrVehicleTypes="Van"; var arrVehicleTypes=new Array('Economy', 'Compact', 'Luxury', 'Sports', 'Van'); var arrVehicleTypes=['Economy', 'Compact', 'Luxury', 'Sports', 'Van'];
Using our knowledge of the Object Class, which the Array is based on, we can even fake an Associative Array.
var arrColors=new Array(); arrColors['red']='#F00'; arrColors['blue']='#00F'; arrColors['green']='#0F0'; arrColors['yellow']='#FF0';
Other languages have many types of arrays, sometimes known as collections:
- Java has an Array, ArrayList, HashSet, LinkedList, HashMap, and TreeMap. Maps can be thought of as Associative Arrays.
- C#.NET and VB.NET have an Array and various collections of objects, such as lists, queues, bit arrays, hash tables and dictionaries. Hash tables and Dictionaries can be thought of as Associative Arrays.
- PHP only has two types of Arrays the Numeric Array and the Associative Array.
The JS Array Object and PHP Arrays have no problem with multi-dimensions or an array of arrays. Also they don’t require the declaration data type or class like Java and C#; meaning you may put any type of object in the array you want.
// For example, you can put an object, an array, a string, and a number all in the same array. var arr=new Array(Object(), Array(), 'a string',1234);
To My Surprise!
So the other day I was writing some js code and I was using the document.getElementsByTagName method which returns all the tags of the type declared.
I ran my variable (arrLIs) through a function that gets the object type. I was surprised when it didn’t return to me a type of Array!!! Upon farther review I discovered that the getElementsByTagName and getElementsByName methods as well as the anchors, forms, images, and links collections do not return an Object of type Array…they do in fact return an Object of type HTML Collection.
Below is a reference of the HTML Collection and the HTML Options Collection containing a list of its properties, methods, and a very unique feature…it is LIVE! (Which is its most redeeming quality.)
An HTML Collection and HTML Options Collection are lists of nodes. An individual node may be accessed by either ordinal index or the node’s name or id attributes.
Dreamweaver refers to these objects as a NodeList. HTML Options Collection is the same as the HTML Collection except just for Options.
|length||returns the number of elements in the collection|
*** Note the HTML Collection inherent toString method does not show the items like the Array Object. In other words, if you try and see the items of collection you will have to use a loop. (see example)
|item||This method retrieves a node specified by ordinal index. Nodes are numbered in tree order (depth-first traversal order). The index origin is 0.|
|namedItem||This method retrieves a Node using a name. With [HTML 4.01] documents, it first searches for a Node with a matching id attribute. If it doesn’t find one, it then searches for a Node with a matching name attribute, but only on those elements that are allowed a name attribute. With [XHTML 1.0] documents, this method only searches for Nodes with a matching id attribute. This method is case insensitive in HTML documents and case sensitive in XHTML documents. Upon failure (e.g., no node with this name exists), returns null.|
Collections in the HTML DOM are live meaning that they are automatically updated when the underlying document is changed.
In this example we are showing two HTML Collections: the document.links and the document.getElementsByTagName(‘a’).
var colLinks=document.links; var colByTagName=document.getElementsByTagName('a');
These two do behave differently!
The document.links lists all nodes with an href attribute which is really just a tags and map areas.
If an href does not exist (<a>like this; no declared href</a>) then it not be included.
The document.getElementsByTagName(‘a’) will list all a tags and anchors regardless of the populate of an href attribute.
To demonstrate that HTML Collections are live, click ‘Add Link’. Each time you click a new link will be appended below.
As you add or really append a new element to this document, both document.links and document.getElementsByTagName(‘a’) are automatically updated. Add a few more links and then click ‘See Collections’.
Please note, as elements are updated in the collections the indexes change. For example, note the w3.org links indexes keep getting larger.