getElementsByClassName

Discussion in 'Javascript' started by Aaron Gray, Jul 9, 2011.

  1. Aaron Gray

    Aaron Gray Guest

    I am trying to make all the elements with class selected bold. The following
    does not weem to work at all though :-

    var elements = document.getElementsByClassName("selected");
    for (e in elements) {
    e.style.fontWeight = "bold";
    }

    Can someone put me right on this, I have not done any real JavaScript for a
    year or so.

    Many thanks in advance,

    Aaron
     
    Aaron Gray, Jul 9, 2011
    #1
    1. Advertisements

  2. A DOM collection is usually processed with a normal for loop
    for (var i = 0, l = elements.length; i < l; i++) {
    elements.style.fontWeight = ...;
    }
     
    Martin Honnen, Jul 9, 2011
    #2
    1. Advertisements

  3. Aaron Gray

    Aaron Gray Guest



    Ah yes, thanks, remember now, still not working though :(

    Aaron
     
    Aaron Gray, Jul 9, 2011
    #3
  4. Am 2011-07-09 17:44, Aaron Gray meinte:
    In what way does it "not work"?
    Your DOM-API knows gEBCN()?
    This will iterate through all properties of your collection. For example
    the length property. Or the item property. And the numeric indices which
    hold the references to your elements.

    (IOW e becomes 0, 1, 2,..., length, item, namedItem, etc.)
    None of the above properties have a style property.
    Replace the for ... in loop with a "normal" loop running from 0 to the
    length-1 of your collection, and use proper references (elements).


    Gregor
     
    Gregor Kofler, Jul 9, 2011
    #4
  5. Aaron Gray

    Aaron Gray Guest



    Yes, I remember this now.

    I need to scan all the elements of a given class in the whole document
    rather than just body or document.

    How do I go about this ?

    Many thanks in advance,

    Aaron
     
    Aaron Gray, Jul 9, 2011
    #5


  6. Well you will need to explain in more detail in what way it is "not
    working". Do you get any error in the browsers error console? Is
    getElementsByClassName supported in the (version of the) browser you are
    using?
     
    Martin Honnen, Jul 9, 2011
    #6
  7. Aaron Gray

    Aaron Gray Guest



    var elements = document.getElementsByClassName("selected");
    alert("length: " + elements.length);

    for (var i = 0, l = elements.length; i < l; i++) {
    elements.style.fontWeight = "bold";
    }


    The elements with class "selected" are not being made bold. I believe its
    because document.getElementsByClassName is not doing a deep scan of
    elements, just the ones in documents first layer, as length is printing out
    as zero.

    Aaron
     
    Aaron Gray, Jul 9, 2011
    #7


  8. If length is zero then there are no elements of that class in the document.
    Can you post a URL of a document where the
    getElementsByClassName("selected") fails to find elements?
     
    Martin Honnen, Jul 9, 2011
    #8


  9. Works fine for me on http://jsfiddle.net/S43Ns/1/.
     
    Martin Honnen, Jul 9, 2011
    #9
  10. Aaron Gray

    Aaron Gray Guest



    http://www.aarongray.org/comp.lang.javascript/tester.html

    Thanks for looking at this I have whittled it down AFAIC.

    Aaron
     
    Aaron Gray, Jul 9, 2011
    #10
  11. Well putting that code as top level code into a script element runs it
    while the script element is parsed. At that time there are no elements
    with the class "selected", as there are no such elements before that
    script elements.

    You will need to call that code from the body's onload handler or from
    window.onload or at least move it down to just before the closing
    </body> tag so that any elements you expect to be found are parsed
    before getElementsByClassName is called.
     
    Martin Honnen, Jul 9, 2011
    #11
  12. Aaron Gray

    Aaron Gray Guest

    Thanks Martin, feeling very dumb now !

    Must really brushup on my javascript, have not really done anything in JS
    for over a year now.

    Aaron
     
    Aaron Gray, Jul 9, 2011
    #12
  13. Probably yes. Of course, for the OP checking the error console and
    reporting their observations to the group could have removed that as
    a cause to consider.
    No, only the enumerable ones, i. e. those with the `DontEnum' attribute in
    conforming implementations of ES3, and those that do _not_ have the
    `Enumerable' attribute in conforming implementations of ES5.
    Which should not be enumerable in a reasonable (DOM) implementation.
    Which should be enumerable (IMHO), but are not always so.
    Worse: In a for-in loop, the loop variable has the *name* of the property as
    its value, _not_ the property value (to get that you would need
    elements[e]). Property names are primitive string values: "0", "1", "2", …,
    "length", "item", "namedItem", etc., if that. And String instances (which
    are created from those values through evaluation of property access) do not
    have a `style' property by default.

    So if there are any enumerable properties, this line would throw a
    ReferenceError, since e.style would evaluate to `undefined', and not to an
    object reference or, in general, not to a primitive value that is
    convertible to an object to be referred.

    Chances are that this object does not have enumerable properties. for-in
    loops on host objects are a really bad idea anyway, since host objects might
    not allow accessing some of their enumerable properties in such a way,
    throwing exceptions. Also, the iteration order of for-in iteration is
    unspecified (especially for host objects), which might result in all kinds
    of funny display, depending on the host object and the operations performed
    on its properties.


    PointedEars
     
    Thomas 'PointedEars' Lahn, Jul 9, 2011
    #13
  14. Am 2011-07-09 21:50, Thomas 'PointedEars' Lahn meinte:
    var c = document.getElementsByTagName("p"), n;
    for(n in c) {
    console.log(n);
    }

    // Firefox 5 result: 0, 1, 2, 3, 4, 5, 6, length, item, namedItem
    // Chromium 12 result: 0, 1, 2, 3, 4, 5, 6, length, item

    Not only is item and length enumerable, but depending on the DOM
    additional properties might pop up.

    Yes, bad and misleading wording.

    Gregor
     
    Gregor Kofler, Jul 9, 2011
    #14
  15. I think you know what to do now.


    PointedEars
     
    Thomas 'PointedEars' Lahn, Jul 10, 2011
    #15
  16. ^^^^^^^^^^^^^^
    _TypeError_ ("Cannot read property '…' of undefined")

    PointedEars
     
    Thomas 'PointedEars' Lahn, Jul 10, 2011
    #16
  17. In comp.lang.javascript message <>,
    Undoubtedly confusion exists.
     
    Dr J R Stockton, Jul 10, 2011
    #17

  18. That should work AFAICS, for the elements of that class which exist.

    I successfully use (for the 'All On' and 'All Off' buttons)

    function SetAll(N) { var All, X
    All = document.getElementsByClassName("pop")
    X = All.length
    while (X--) All[X].style.display = N ? 'block' : 'none' }

    in my page estr-xpl.htm (the page might amuse EjH)

    The 'while' loop is shorter and quicker to type than the 'for' loop, and
    might execute very slightly faster.
     
    Dr J R Stockton, Jul 10, 2011
    #18
  19. Am 2011-07-10 08:27, Thomas 'PointedEars' Lahn meinte:
    Get some sleep? Check. (Got some, unfortunately not enough.)

    Point out, that properties inherited through the prototype chain will be
    enumerated by a for ... in loop even if propertyIsEnumerable() returns
    false? Check.

    Gregor
     
    Gregor Kofler, Jul 10, 2011
    #19
  20. True, thanks for pointing this out. I meant to say:

    A for-in loop iterates only through the properties that are enumerable,
    i. e. those that do _not_ have the `[[DontEnum]]' attribute in conforming
    implementations of ES3, and those that _do_ have the `[[Enumerable]]'
    attribute in conforming implementations of ES5 (cf. sections 8.6.1,
    respectively).


    PointedEars
     
    Thomas 'PointedEars' Lahn, Jul 11, 2011
    #20
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.
Similar Threads
Loading...