Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #17289 > unrolled thread

getElementsByClassName: BUG in JS-engine?

Back to article view | Back to comp.lang.javascript

Contents

  getElementsByClassName: BUG in JS-engine? Mattias Campe <mattiaspuntcampe@geeeemeil.com> - 2012-11-18 11:47 +0100
    Re: getElementsByClassName: BUG in JS-engine? Martin Honnen <mahotrash@yahoo.de> - 2012-11-18 12:09 +0100
      Re: getElementsByClassName: BUG in JS-engine? Mattias Campe <mattiaspuntcampe@geeeemeil.com> - 2012-11-18 14:56 +0100
        Re: getElementsByClassName: BUG in JS-engine? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-11-18 18:43 +0100

#17289 — getElementsByClassName: BUG in JS-engine?

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

[toc] | [next] | [standalone]

#17290

Mattias Campe wrote:
> 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

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/

[toc] | [prev] | [next] | [standalone]

#17291

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

[toc] | [prev] | [next] | [standalone]

#17293

Mattias Campe wrote:

> 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 ;).

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$8300dec7@news.demon.co.uk> (2004)

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web