getElementsByClassName: BUG in JS-engine?

[Mattias Campe]

Dear comp.lang.javascript

I have strange behavior when using getElementsByClassName and I don't
understand what I'm doing wrong. There are some paragraphs, where I want
to change layout by selecting the className, to "link" another className
to it. But getElementsByClassName only gets some of those classnames,
but not all. It seems such a simple exercise to make it hard to have
errors, but still I succeed in doing so :-/.

Would somebody happen to know what the problem is? You can find my code
at
http://php.olvgroeninge.be/~sac.mcampe/werkmap/getElementsByClassName.html

Tested with browser Firefox 16.0.2 op Ubuntu 12.10


Kind regards
Mattias

[Martin Honnen]

Most DOM collections are "live" collections so it is difficult iterating
over them while manipulating them. Your loop manipulates the class of
elements and that way the collection changes while the loop is executed
and that leads to elements being skipped as after setting
alleOpvallendeAlineas[0].className
that element is removed from the collection and the one that was at
index 1 is now at index 0. And the next loop iteration changes
alleOpvallendeAlineas[1]
which is the third element in the original collection.

One way to avoid that problem is working from the end of the collection e.g.
for (var l = alleOpvallendeAlineas.length, i = l - 1; i >= 0; i--) {
alleOpvallendeAlineas[i].className = ...;
}


--

Martin Honnen --- MVP Data Platform Development
http://msmvps.com/blogs/martin_honnen/

[Mattias Campe]

Op 18-11-12 12:09, Martin Honnen schreef:

> Most DOM collections are "live" collections so it is difficult iterating
> over them while manipulating them. Your loop manipulates the class of
> elements and that way the collection changes while the loop is executed
> and that leads to elements being skipped as after setting
> alleOpvallendeAlineas[0].className
> that element is removed from the collection and the one that was at
> index 1 is now at index 0. And the next loop iteration changes
> alleOpvallendeAlineas[1]
> which is the third element in the original collection.
>
> One way to avoid that problem is working from the end of the collection
> e.g.
> for (var l = alleOpvallendeAlineas.length, i = l - 1; i >= 0; i--) {
> alleOpvallendeAlineas[i].className = ...;
> }

I wouldn't have found that explanation myself, but it all makes sense,
once you know that :). So it's not a bug in the JS-engine after all ;).

Thank you very much for your fast and clear explanation!!

Kind regards
Mattias

[Thomas 'PointedEars' Lahn]

It could not have been a bug in "*the* JS-engine" because

1. There is no such thing. Netscape/Mozilla JavaScript (e.g. in
Mozilla-based browsers, NES compatibles, B2G, and Firefox OS) is but one
of several ECMAScript implementations. Other major implementations
include JScript (e.g. in MSHTML/IE, with Windows Script Host, and on
IIS), V8 (e.g. in Chromium/Google Chrome, on Android, and as base of
node.js), Apple JavaScriptCore (e.g. in Safari, and on the iPhone/iPad),
Opera ECMAScript (in Opera and Opera Mobile), and KDE JavaScript (e.g.
in Konqueror):

<http://PointedEars.de/es-matrix> (to be updated)

Despite the historic name of the newsgroup, all of those implementations
are on-topic here and in similar newsgroups in other Usenet hierarchies.

2. The feature you are using here is not part of any ECMAScript
implementation to begin with, but of a language-independent DOM API.
You are merely using an implementation of that with ECMAScript
implementations:

<https://developer.mozilla.org/en/docs/DOM>

Scripting a DOM using an ECMAScript implementation is on-topic here as
well.

That said, next time you should be slow(er) to declare something a bug
without being sure, much less use the word "bug" that way in the message'
Subject:

<http://www.catb.org/~esr/faqs/smart-questions.html>,
in particular
<http://www.catb.org/~esr/faqs/smart-questions.html#idp29846432>.


HTH

PointedEars
--
Danny Goodman's books are out of date and teach practices that are
positively harmful for cross-browser scripting.
-- Richard Cornford, cljs, <cife6q$253$1$8300...@news.demon.co.uk> (2004)