Connecting Tech Pros Worldwide Help | Site Map

HTMLCollection strange behavior

 
LinkBack Thread Tools Search this Thread
  #1  
Old November 16th, 2006, 11:45 PM
sp1d3rx@gmail.com
Guest
 
Posts: n/a
Default HTMLCollection strange behavior

-----------code:------------- (whitesmiths indentation)

function PopulateUlList()
{
alert("started populating...");
var ulz = inter.getElementsByTagName("ul");
alert(ulz.length);
for(x in ulz)
{
alert(ulz[x].id);
}
}
-------------html-------------
<div id='inter'>
<ul id="cute"></ul>
<ul id="ugly"></ul>
</div>
--------------------------
When this code is run in Firefox 2.0, it alerts the following...

"started populating..."
"2"
"cute"
"ugly"
"undefined"
"undefined"

Why does it say 'undefined' ? Also, changing the loop from a "for in"
to a "for" loop (for(x = 0; x < ulz.length; x++)), I no longer get the
problem. Why can't I use "for in" ?


  #2  
Old November 17th, 2006, 01:15 AM
web.dev
Guest
 
Posts: n/a
Default Re: HTMLCollection strange behavior


sp1d3rx@gmail.com wrote:
Quote:
-----------code:------------- (whitesmiths indentation)
>
function PopulateUlList()
{
alert("started populating...");
var ulz = inter.getElementsByTagName("ul");
alert(ulz.length);
for(x in ulz)
{
alert(ulz[x].id);
}
}
-------------html-------------
<div id='inter'>
<ul id="cute"></ul>
<ul id="ugly"></ul>
</div>
--------------------------
When this code is run in Firefox 2.0, it alerts the following...
>
"started populating..."
"2"
"cute"
"ugly"
"undefined"
"undefined"
>
Why does it say 'undefined' ? Also, changing the loop from a "for in"
to a "for" loop (for(x = 0; x < ulz.length; x++)), I no longer get the
problem. Why can't I use "for in" ?
The for..in loop is used to cycle through all exposed properties of an
object (or array), but the for loop will only cycle through your
current collection.

  #3  
Old November 17th, 2006, 02:25 AM
RobG
Guest
 
Posts: n/a
Default Re: HTMLCollection strange behavior


sp1d3rx@gmail.com wrote:
Quote:
-----------code:------------- (whitesmiths indentation)
>
function PopulateUlList()
{
alert("started populating...");
var ulz = inter.getElementsByTagName("ul");
alert(ulz.length);
for(x in ulz)
{
alert(ulz[x].id);
}
}
-------------html-------------
<div id='inter'>
<ul id="cute"></ul>
<ul id="ugly"></ul>
</div>
--------------------------
When this code is run in Firefox 2.0, it alerts the following...
>
"started populating..."
"2"
"cute"
"ugly"
"undefined"
"undefined"
>
Why does it say 'undefined' ? Also, changing the loop from a "for in"
to a "for" loop (for(x = 0; x < ulz.length; x++)), I no longer get the
problem. Why can't I use "for in" ?
You can, but as web.dev said, it will return *all* the enumerable
properties of an object. document.getElementsByTagName() returns a
NodeList object:

<URL: http://www.w3.org/TR/DOM-Level-2-Cor...tml#ID-A6C9094 >

For an HTML document, this object also implements the HTMLCollection
interface:

<URL: http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-75708506 >


If you change your script slightly to show the property name also,
you'll discover what those 'undefined' properties are:

alert(x + ': ' + ulz[x].id);

In Firefox there's length, item and namedItem. IE exposes length, the
other two properties are there but aren't enumerable. Since the W3C
DOM spec doesn't say what should or shouldn't be enumerable, both
behaviours are OK from that perspective.

A for loop works because the items in a NodeList have numeric property
names, like an array. The for loop iterates over just those, skipping
the ones with non-numeric names. Note that even though the names are
numeric (0, 1, 2, etc.) they are strings, not numbers.

The HTMLCollection interface also allows you to use the ID to reference
DOM elements in the collection, e.g.:

alert( typeof ulz['cute'] );


--
Rob

 

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Popular Articles

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 220,989 network members.