getElementsByClassName

[Aaron Gray]

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

 

[Martin Honnen]

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.

A DOM collection is usually processed with a normal for loop
for (var i = 0, l = elements.length; i < l; i++) {
elements.style.fontWeight = ...;
}

 

[Aaron Gray]

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.

A DOM collection is usually processed with a normal for loop
for (var i = 0, l = elements.length; i < l; i++) {
elements.style.fontWeight = ...;
}

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

Aaron

 

[Gregor Kofler]

Am 2011-07-09 17:44, Aaron Gray meinte:

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

In what way does it "not work"?

var elements = document.getElementsByClassName("selected");

Your DOM-API knows gEBCN()?

for (e in elements) {

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

e.style.fontWeight = "bold";

None of the above properties have a style property.

}

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

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

 

[Aaron Gray]

Am 2011-07-09 17:44, Aaron Gray meinte:

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

In what way does it "not work"?

var elements = document.getElementsByClassName("selected");

Your DOM-API knows gEBCN()?

for (e in elements) {

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

e.style.fontWeight = "bold";

None of the above properties have a style property.

}

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

Replace the for ... in loop with a "normal" loop running from 0 to the
length-1 of your collection, and use proper references (elements).

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

 

[Martin Honnen]

A DOM collection is usually processed with a normal for loop
for (var i = 0, l = elements.length; i < l; i++) {
elements.style.fontWeight = ...;
}

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

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?

 

[Aaron Gray]

A DOM collection is usually processed with a normal for loop
for (var i = 0, l = elements.length; i < l; i++) {
elements.style.fontWeight = ...;
}

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

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?

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

 

[Martin Honnen]

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.

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]

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.

Works fine for me on http://jsfiddle.net/S43Ns/1/.

 

[Aaron Gray]

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.

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?

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

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

Aaron

 

[Martin Honnen]

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

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.

 

[Aaron Gray]

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.

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

 

[Thomas 'PointedEars' Lahn]

Am 2011-07-09 17:44, Aaron Gray meinte:

In what way does it "not work"?


Your DOM-API knows gEBCN()?

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.

This will iterate through all properties of your collection.

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.

For example the length property. Or the item property.

Which should not be enumerable in a reasonable (DOM) implementation.

And the numeric indices which hold the references to your elements.

Which should be enumerable (IMHO), but are not always so.

(IOW e becomes 0, 1, 2,..., length, item, namedItem, etc.)


None of the above properties have a style property.

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

 

[Gregor Kofler]

Am 2011-07-09 21:50, Thomas 'PointedEars' Lahn meinte:

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.

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.

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

Yes, bad and misleading wording.

Gregor

 

[Thomas 'PointedEars' Lahn]

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.

I think you know what to do now.


PointedEars

 

[Thomas 'PointedEars' Lahn]

Aaron Gray [wrote]:

for (e in elements) { […]
e.style.fontWeight = "bold";

[…] 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', not to an

^^^^^^^^^^^^^^
_TypeError_ ("Cannot read property '…' of undefined")

object reference or, in general, not to a primitive value that is
s/primitive//

convertible to an object to be referred. […]

PointedEars

 

[Dr J R Stockton]

In comp.lang.javascript message <[email protected]>,

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.

Undoubtedly confusion exists.

 

[Dr J R Stockton]

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.

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.

 

[Gregor Kofler]

Am 2011-07-10 08:27, Thomas 'PointedEars' Lahn meinte:

I think you know what to do now.

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

 

[Thomas 'PointedEars' Lahn]

Thomas 'PointedEars' Lahn posted:

Undoubtedly confusion exists.

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