change style value for several elements

[Denis McMahon]

At the moment I use named elements, and group the elements by giving
them a common name, but this feels "wrong". For example:

function vis(name, state)
{
var els = document.getElementsByName(name);
for (var el in els) els[el].style.visible = state;
}

Has anyone got a "better" way to do this sort of thing?

Rgds

Denis McMahon

 

[Evertjan.]

Denis McMahon wrote on 10 aug 2010 in comp.lang.javascript:

At the moment I use named elements, and group the elements by giving
them a common name, but this feels "wrong". For example:

function vis(name, state)
{
var els = document.getElementsByName(name);
for (var el in els) els[el].style.visible = state;
}

Has anyone got a "better" way to do this sort of thing?

class

 

[Denis McMahon]

Denis McMahon wrote on 10 aug 2010 in comp.lang.javascript:

At the moment I use named elements, and group the elements by giving
them a common name, but this feels "wrong". For example:

function vis(name, state)
{
var els = document.getElementsByName(name);
for (var el in els) els[el].style.visible = state;
}

Has anyone got a "better" way to do this sort of thing?

class

Yes, nice answer, but how do you refer to a class to change it's style rule?

If I have to trawl through
document.styleSheets[*].cssRules|rules[*].selectorText looking for any /
every rule that matches my class to set the style element, that's not
really "better".

Rgds

Denis McMahon

 

[Gregor Kofler]

Am 2010-08-11 05:30, schrieb Denis McMahon:

Denis McMahon wrote on 10 aug 2010 in comp.lang.javascript:

At the moment I use named elements, and group the elements by giving
them a common name, but this feels "wrong". For example:

function vis(name, state)
{
var els = document.getElementsByName(name);
for (var el in els) els[el].style.visible = state;

This rather works by coincidence, since el will become any property of
your els collection - and quite a few of these properties won't have a
style property. (And most DOM elements don't have a name property.)

A working approach:

var l = els.length;
while(l--) {
els[l].style.visibility = state;
}

Yes, nice answer, but how do you refer to a class to change it's style rule?

You don't.

element.getElementsByClassName(cName) in recent enough browsers will
give you all elements with the according class. Rest of the solution
looks exactly like the one above.
If getElementsByClassName() is not available, a simple function will do
the job:

(untested)
function gEBCN(cN) {
var els = document.getElementsByTagName("*");
var result = [];
var l = els.length;

while(l--) {
if(els[l].className == cN) {
results.push(els[l]);
}
}
return result;
}

The main difference: the "native" gEBCN() will return a live collection,
the custom version a snapshot.

If I have to trawl through
document.styleSheets[*].cssRules|rules[*].selectorText looking for any /
every rule that matches my class to set the style element, that's not
really "better".

Obviously not.

Gregor

 

[Richard Cornford]

Denis McMahon wrote on 10 aug 2010 in comp.lang.javascript:

At the moment I use named elements, and group the elements by giving
them a common name, but this feels "wrong". For example:
function vis(name, state)
{
var els = document.getElementsByName(name);
for (var el in els) els[el].style.visible = state;
}
Has anyone got a "better" way to do this sort of thing?

class

Yes, nice answer, but how do you refer to a class to change it's
style rule?

If I have to trawl through
document.styleSheets[*].cssRules|rules[*].selectorText looking for
any / every rule that matches my class to set the style element,
that's not really "better".

You don't necessarily have to do that. Remember that when rules have
equal specificity the last rule overrides all previous ones. So just
adding a rule for a class at the end of the last (appropriate media
(i.e. probably not 'print' style sheets, etc.)) style sheet overrides
all previous equivalent rules for that class in that and all preceding
style sheets.

Richard.

 

[Gregor Kofler]

Am 2010-08-11 12:49, williamc meinte:

(untested)
function gEBCN(cN) {
var els = document.getElementsByTagName("*");
var result = [];
var l = els.length;

while(l--) {
if(els[l].className == cN) {
results.push(els[l]);
}
}
return result;
}

The main difference: the "native" gEBCN() will return a live collection,
the custom version a snapshot.

If I have to trawl through
document.styleSheets[*].cssRules|rules[*].selectorText looking for any /
every rule that matches my class to set the style element, that's not
really "better".

Obviously not.

Gregor

I was going to post this question myself (i.e. what's the best getEBCN
function?)...

Good point about the difference between the native implementation
returning a (live) node list vs. just a snapshot.

Any solution must work with multiple values, though, e.g. class="foo
bar" and I don't see how the function above will do that.

As below: Either with a RegExp or you could split() the className and
use Array.indexOf() (again not supported in some browsers) on the
resulting array.

Crockford suggested this (calling his recursive walkTheDom function)...

function getElemsByClassName2(className) {
if (document.getElementsByClassName) {
return(elem.getElementsByClassName(className));
} else {
var results = [];
walkTheDOM(document.body, function (node) {
var a, c = node.className, i;
if (c) {
a = c.split(' ');
for (i = 0; i< a.length; i += 1) {
if (a === className) {
results.push(node);
break;
}
}
}
});
return results;
}
}

Well, one could benchmark that, but since it is a fallback, I don't care
too much about speed (though the fallback will be used by the slowest
browsers, Internet Explorer 6 to 8).

I saw a very long "ultimate" version somewhere (Robert Nyman?). I'd be
interested to see what people use in their own work.

element.gEBCN() (transfered into a "static" array), document.evaluate(),
filtered element.gEBTN().

Gregor

 

[Denis McMahon]

Am 2010-08-11 05:30, schrieb Denis McMahon:

Denis McMahon wrote on 10 aug 2010 in comp.lang.javascript:

At the moment I use named elements, and group the elements by giving
them a common name, but this feels "wrong". For example:

function vis(name, state)
{
var els = document.getElementsByName(name);
for (var el in els) els[el].style.visible = state;
}

This rather works by coincidence, since el will become any property of
your els collection - and quite a few of these properties won't have a
style property. (And most DOM elements don't have a name property.)

A working approach:

var l = els.length;
while(l--) {
els[l].style.visibility = state;
}

Good catch, I usually use:

for (var i = 0; i < els.length; i++) els.style.visible = state;

Don't know why I wrote it with a for / in really.

element.getElementsByClassName(cName) in recent enough browsers will
give you all elements with the according class. Rest of the solution
looks exactly like the one above.
If getElementsByClassName() is not available, a simple function will do
the job:

(untested)
function gEBCN(cN) {
var els = document.getElementsByTagName("*");
var result = [];
var l = els.length;

while(l--) {
if(els[l].className == cN) {
results.push(els[l]);
}
}
return result;
}

The main difference: the "native" gEBCN() will return a live collection,
the custom version a snapshot.

That's really the same as my current solution, but using class as n
identifier instead of name, which is marginally better, but I was hoping
for a means of setting the class style, rather than the element style of
each element in the class.

If I have to trawl through
document.styleSheets[*].cssRules|rules[*].selectorText looking for any /
every rule that matches my class to set the style element, that's not
really "better".

Obviously not.

Indeed, but (unfortunately) I'm not convinced that any solution that has
me trawling through any collection of elements is really significantly
better (more efficient, more elegant) than the current solution.

I came up with this, which will work on (a) style rule(s) based on the
class in the selector. The method of finding the style rule(s) to change
doesn't strike me as great, but I can't see an obviously better one:

function changeClassStyles(theClass, theProp, theVal)
{
if (theClass.charAt(0) != ".") theClass = "." + theClass;
var ss = document.styleSheets;
for (var ssnm = 0; ssnm < ss.length; ssnm ++)
{
if (ss[ssnm].cssRules) // non ie
{
var rls = ss[ssnm].cssRules;
}
else if (ss[ssnm].rules) // ie
{
var rls = ss[ssnm].rules;
}
if (rls)
{
for (var rlnm = 0; rlnm < rls.length; rlnm ++)
{
var rl = rls[rlnm];
var select = rl.selectorText;
/*
// for complex eg. 'ele.classseudo' selectors and
// simple ie. '.class' selectors
var classre = /\.[a-z0-9]/gi;
var clss = select.match(classre);
for (var clsnm = 0; clsnm < clss.length; clsnm ++)
{
if (theClass == clss[clsnm])
{
eval("rl.style." + theProp + " = theVal");
}
}
*/
///*
// for simple ie. '.class' selectors
if (theClass == select)
{
eval("rl.style." + theProp + " = theVal");
}
//*/
}
}
}
}

What I'd really like is:

document.classes[classname].style.property = value

but I can see that classes aren't a valid collection of themselves,
rather they represent a one-or-many to one-or-many link between elements
and styles.

I think any dom representation of an html class attribute or css class
selector would need a collection of rules and a collection of elements,
to maintain the mapping. A class would be added to document.classes
either (a) when a style rule selector first referenced it or (b) when an
element class attribute first referenced it, with the style rule or
element being added to it's appropriate member collection. Subsequent
style rules or elements that featured the class would also be added to
the collection.

Maybe:

var l = document.classes[classname].rules.length;
while (l--)
{
eval ("document.classes[classname].rules[l]." + theProp + " = theVal");
}

or even better, using a construct like:

document.classes[classname].rules[l].properties[theProp] = theVal;

(Yes, I know style rules don't have a properties collection either, I
just think it would be nice if they did.)

Rgds

Denis

 

[Denis McMahon]

You don't necessarily have to do that. Remember that when rules have
equal specificity the last rule overrides all previous ones. So just
adding a rule for a class at the end of the last (appropriate media
(i.e. probably not 'print' style sheets, etc.)) style sheet overrides
all previous equivalent rules for that class in that and all preceding
style sheets.

Ooh, nice, hadn't thought of that approach.

Rgds

Denis McMahon

 

[Thomas 'PointedEars' Lahn]

function changeClassStyles(theClass, theProp, theVal)
{
if (theClass.charAt(0) != ".") theClass = "." + theClass;
var ss = document.styleSheets;
for (var ssnm = 0; ssnm < ss.length; ssnm ++)

for (var ssnm = 0, len = ss.length; ssnm < len; ++ssnm)

is more efficient. You might even want to consider

for (var ssnm = ss.length; ssnm--

or, as Gregor suggested,

var ssnm = ss.length;
while (ssnm--)

instead.

{
if (ss[ssnm].cssRules) // non ie
{
var rls = ss[ssnm].cssRules;
}
else if (ss[ssnm].rules) // ie

You should use multi-line pre-comments instead of single-line post-comments,
and the comments should contain at least "W3C DOM" and "MSHTML DOM". IE or
not IE ─ that is _not_ the question.

{
var rls = ss[ssnm].rules;
}

Since the /IfStatement/ type-converts its condition to boolean, it is easier
to maintain and not more error-prone to write

var o = ss[ssnm],
rls = o.cssRules || o.rules;

instead.

if (rls)
{
for (var rlnm = 0; rlnm < rls.length; rlnm ++)

See above for the optimization. And it makes no sense to me to insert
whitespace between a *unary* operator and its operand, even if the grammar
allows it.

{
var rl = rls[rlnm];
var select = rl.selectorText;
/*
// for complex eg. 'ele.classseudo' selectors and
// simple ie. '.class' selectors
var classre = /\.[a-z0-9]/gi;

That is hardly sufficient. Check the CSS (2.1) grammar.

var clss = select.match(classre);
for (var clsnm = 0; clsnm < clss.length; clsnm ++)
{
if (theClass == clss[clsnm])
{
eval("rl.style." + theProp + " = theVal");

Ouch. Please read the FAQ about eval(), and from then on use only this
syntax:

rl.style[theProp] = theVal;

Note that the `style' property is not required to be implemented per W3C DOM
Level 2 Style CSS here. Use .getPropertyValue() as fallback.

[...]
What I'd really like is:

document.classes[classname].style.property = value

No, you won't. Do not augment host objects, such as the one that `document'
refers to. (Doing otherwise is an clear indicator of the cluelessness of a
library author.)

but I can see that classes aren't a valid collection of themselves,
rather they represent a one-or-many to one-or-many link between elements
and styles.

ISTM rather easy to read all stylesheet selectors into a mapping object on
load. I have started writing an object type to that effect, but the query
method (findSimpleSelector) is not ready yet:

<http://pointedears.de/websvn/filedetails.php?repname=JSX&path=/trunk/css-
commented.js>

[...]
eval ("document.classes[classname].rules[l]." + theProp + " = theVal");
[...]

You are not ready for this yet.


PointedEars

 

[Evertjan.]

williamc wrote on 11 aug 2010 in comp.lang.javascript:

Any solution must work with multiple values, though, e.g. class="foo
bar" and I don't see how the function above will do that.

Why?

Remember,
you just wanted an alternative for elements with the same "name".

Since it is your page, [unless you are writing one of those silly third
party libraries], just define a class that covers all the styles you want.

Otherwise bubble them down from a higher [in the dom-tree] element.

 

[SAM]

Le 11/08/10 05:30, Denis McMahon a écrit :

Denis McMahon wrote on 10 aug 2010 in comp.lang.javascript:

At the moment I use named elements, and group the elements by giving
them a common name, but this feels "wrong". For example:

function vis(name, state)
{
var els = document.getElementsByName(name);
for (var el in els) els[el].style.visible = state;
}

Has anyone got a "better" way to do this sort of thing?

class

Yes, nice answer, but how do you refer to a class to change it's style rule?

Wrong way fom my point of view.

css :
..questions dd { visibility: hidden }
..answers .questions dd { visibility: visible }

html :
<body>
<p>
<button onclick="var b=document.body.className;
document.body.className = b==''? 'answers' : '';">
show/hide answers
</button>
<div class="questions">
<dl>
<dt>question 1</dt>
<dd>answer 1</dd>
<dt>question 2</dt>
<dd>answer 2</dd>
<dt>question 3</dt>
<dd>answer 3</dd>

If I have to trawl through
document.styleSheets[*].cssRules|rules[*].selectorText looking for any /
every rule that matches my class to set the style element, that's not
really "better".

I think, if you worked on your css, very rarely you'll have to change a
rule of a predefined class.

At worst you can re-define that class when you want (adding a new css)

var s = document.createElement('style');
s.innerHTML = '.answer { visibility: visible}';
document.body.appendChild(s)

 

[SAM]

Le 11/08/10 12:49, williamc a écrit :

Am 2010-08-11 05:30, schrieb Denis McMahon:

On 10/08/10 21:57, Evertjan. wrote:
Denis McMahon wrote on 10 aug 2010 in comp.lang.javascript:

At the moment I use named elements, and group the elements by giving
them a common name, but this feels "wrong". For example:

function vis(name, state)
{
var els = document.getElementsByName(name);
for (var el in els) els[el].style.visible = state;
}

This rather works by coincidence, since el will become any property of
your els collection (...)
A working approach:

var l = els.length;
while(l--) {
els[l].style.visibility = state;
}

Has anyone got a "better" way to do this sort of thing?

(...)
(untested)
function gEBCN(cN) {
var els = document.getElementsByTagName("*");
var result = [];
var l = els.length;

while(l--) {
if(els[l].className == cN) {
results.push(els[l]);
}
}
return result;
}

The main difference: the "native" gEBCN() will return a live collection,
the custom version a snapshot.

Good point about the difference between the native implementation
returning a (live) node list vs. just a snapshot.

Any solution must work with multiple values, though, e.g. class="foo
bar" and I don't see how the function above will do that.

function gEBCN(cN) {
if(document.getElementsByClassName)
return document.getElementsByClassName(cN);
var els = document.getElementsByTagName("*"),
l = els.length,
result = [];
while(l--)
if(els[l].className && els[l].className.indexOf(cN) >= 0)
results.push(els[l]);
return result;
}


I do not understand all other complications ... :-(
(as they seem to me very useless)

 

[Gregor Kofler]

Am 2010-08-12 11:38, SAM meinte:

It doesn't. Is was meant to be a simple example.

function gEBCN(cN) {
if(document.getElementsByClassName)
return document.getElementsByClassName(cN);
var els = document.getElementsByTagName("*"),
l = els.length,
result = [];
while(l--)
if(els[l].className && els[l].className.indexOf(cN) >= 0)
results.push(els[l]);
return result;
}


I do not understand all other complications ... :-(
(as they seem to me very useless)

Your solution has at least two problems:
* Using the native method will return a live collection (elements will
join or drop out automatically, when they get the appropriate class
assigned).
* Your indexOf() will find a class "red" even when elements have a class
"redAndBlue" - you will need a RegExp.

Gregor

 

[SAM]

Le 12/08/10 11:54, Gregor Kofler a écrit :

Am 2010-08-12 11:38, SAM meinte:

function gEBCN(cN) {
if(document.getElementsByClassName)
return document.getElementsByClassName(cN);
var els = document.getElementsByTagName("*"),
l = els.length,
result = [];
while(l--)
if(els[l].className && els[l].className.indexOf(cN) >= 0)
results.push(els[l]);
return result;
}


I do not understand all other complications ... :-(
(as they seem to me very useless)

Your solution has at least two problems:
* Using the native method will return a live collection

I do not see what is the problem with returning a collection
(why to speak of 'life' ?
is there a difference with any other DOM collection ?)

(elements will join or drop out automatically, when they get the
appropriate class assigned).

Found something via Google trying to explain what could cover this term
of 'life' ...
I would then say :
the problem is more the alternative return in a fixed array (of elmts)

* Your indexOf() will find a class "red"

what a strange idea ... a red class ...

even when elements have a class "redAndBlue"

and stronger again ! ;-)

- you will need a RegExp.

we will need useful rules and name of rules not to much unreadable

OK for the regexp (usually not with my poor css that never has a rule's
name built with other names)

Finally, if the goal is to get an array of elements at a time t,

function gEBCN(cN) {
var result = [], els, l, r = new RegExp('(^| )'+cN+'($| )');
if(document.getElementsByClassName)
els = document.getElementsByClassName(cN);
else if(document.getElementsByTagName)
els = document.getElementsByTagName("*");
l = els.length;
while(l--)
if(els[l].className && els[l].className.match(r) )
result.push(els[l]);
return result;
}

 

[Garrett Smith]

At the moment I use named elements, and group the elements by giving
them a common name, but this feels "wrong". For example: [...]

Has anyone got a "better" way to do this sort of thing?

I like to add a class to a common ancestor for this sort of thing and
let the browser apply the cascade. An example of that:
<http://jibbering.com/faq/notes/code-guidelines/descendant-sel.html>

You could do the same using attribute selector for the NAME attribute
however support for attribute selectors is not as broad as as support
for class selectors. The class selector works in more browsers.

The class attribute can apply to any element, as was mentioned already,
whereas the NAME attribute applies to different elements.

Also, with the attribute selectors are supported, there are
discrepancies between browsers applyt case sensitive matching to the
attribute value. All of that can be explained by the specification and
with examples to show which browsers do what but if you don't use
attribute selectors, it's irrelevant anyway.

 

[SAM]

Le 12/08/10 15:27, williamc a écrit :

I'm not the OP. I just jumped in and asked what people here use for
gEBCN, while noting that Gregor's example for the OP would need some
additional code to cover multiple values.

I very frequently use multiple classes, and in general the person doing
the scripting might not have control over the HTML/CSS. So, I most
definitely want a gEBCN function that works for "foo bar".

// one class :

function gEBCN(cN) {
var result = [], els, l, r = new RegExp('\\b'+cN+'\\b');
if(document.getElementsByClassName)
els = document.getElementsByClassName(cN);
else if(document.getElementsByTagName)
els = document.getElementsByTagName("*");
l = els.length;
while(l--)
if(els[l].className && els[l].className.match(r) )
result.push(els[l]);
return result;
}

// multi classes :

function gEBXCN() {
var n1 = n2 = arguments.length, g = [], tri = function(a,b){
var c = [];
for(var i in a) { for(var j in b) if(a==b[j]) c.push(a);}
return c;
};
if(n2==1) return gEBCN(arguments[0]);
while(n1--) g[n1] = gEBCN(arguments[n1]);
while(n2-- && n2>0) {
g[n2] = tri(g[n2], g[n2-1])
}
return g[1];
}

alert(gEBXCN('bar', 'foo', 'fruit').length);

 

[Garrett Smith]

Le 12/08/10 11:54, Gregor Kofler a écrit :

Am 2010-08-12 11:38, SAM meinte:
[...]
* Your indexOf() will find a class "red"

what a strange idea ... a red class ...

even when elements have a class "redAndBlue"

and stronger again ! ;-)

The example is contrived but when the problem situation that it
demonstrates happens, you'll appreciate it.

[...]

 

[SAM]

Le 13/08/10 18:09, Garrett Smith a écrit :

Le 12/08/10 11:54, Gregor Kofler a écrit :

Am 2010-08-12 11:38, SAM meinte:
[...]
* Your indexOf() will find a class "red"

what a strange idea ... a red class ...

even when elements have a class "redAndBlue"

and stronger again ! ;-)

The example is contrived

Yeap ! ;-)

but when the problem situation that it
demonstrates happens, you'll appreciate it.

Surely !
I must to think to archive that code somewhere where I will be able to
find it back in future.
(more difficult than coding)

 

[David Mark]

Am 2010-08-11 05:30, schrieb Denis McMahon:

On 10/08/10 21:57, Evertjan. wrote:
Denis McMahon wrote on 10 aug 2010 in comp.lang.javascript:
At the moment I use named elements, and group the elements by giving
them a common name, but this feels "wrong". For example:
function vis(name, state)
{
      var els = document.getElementsByName(name);
      for (var el in els) els[el].style.visible = state;

This rather works by coincidence, since el will become any property of
your els collection - and quite a few of these properties won't have a
style property. (And most DOM elements don't have a name property.)

A working approach:

var l = els.length;
while(l--) {
  els[l].style.visibility = state;
}

}
Has anyone got a "better" way to do this sort of thing?
class
Yes, nice answer, but how do you refer to a class to change it's style
rule?

You don't.

element.getElementsByClassName(cName) in recent enough browsers will
give you all elements with the according class. Rest of the solution
looks exactly like the one above.
If getElementsByClassName() is not available, a simple function will do
the job:

(untested)
function gEBCN(cN) {
  var els = document.getElementsByTagName("*");
  var result = [];
  var l = els.length;

  while(l--) {
    if(els[l].className == cN) {
      results.push(els[l]);
    }
  }
  return result;
}

The main difference: the "native" gEBCN() will return a live collection,
the custom version a snapshot.

If I have to trawl through
document.styleSheets[*].cssRules|rules[*].selectorText looking for any/
every rule that matches my class to set the style element, that's not
really "better".

Obviously not.

Gregor

I was going to post this question myself (i.e. what's the best getEBCN
function?)...

Good point about the difference between the native implementation
returning a (live) node list vs. just a snapshot.

Any solution must work with multiple values, though, e.g. class="foo
bar" and I don't see how the function above will do that.

I've seen approaches like:

if native support
    use native support
if xpath
   use xpath
else
   getEBTN(*)
   var re = new RegExp("(^|\\s)"+className+"(\\s|$)");
   loop and push matches onto an array

I think I've even seen some people include a QSA branch. Not sure if
that's a good idea.

Crockford  suggested this (calling his recursive walkTheDom function)....

function getElemsByClassName2(className) {
    if (document.getElementsByClassName) {
        return(elem.getElementsByClassName(className));
    } else {
        var results = [];
        walkTheDOM(document.body, function (node) {
            var a, c = node.className, i;
            if (c) {
                a = c.split(' ');
                for (i = 0; i < a.length; i += 1) {
                    if (a === className) {
                        results.push(node);
                        break;
                    }
                }
            }
        });
        return results;
    }

}

// this one is copied from the Sitepoint book...

Good reason to avoid such books.

function getElementsByClassNameXPath(className, context) {

Deceptive name.

    context = context || document;
    var els = [];
    if (typeof document.evaluate == "function") {

Bad host object method detection.

        var xpath = document.evaluate(".//*[ contains(concat(' ',
@class, ' '), ' " + className + " ')]", context, null,
XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

That conflicts with the logic in the alternate fork as it only
accounts for spaces.

        for (var i = 0; i < xpath.snapshotLength; i++ ) {

Inefficient. Evaluates the snapshotLength property on each iteration.

            els.push(xpath.snapshotItem(i));
        }
    } else {
        var nodelist = context.getElementsByTagName("*");
        var re = new RegExp('(^|\\s)' + className + '(\\s|$)');
        els = Array.filter(nodeList, function(node) {

That is flat-out ridiculous. It assumes that all browsers which do
not implement XPath (or at least the ones that fail their botched test
for that feature) support an Array.filter method (and that it is safe
to use on host objects). One can only assume that the author(s) (and
their technical editor) forgot to test this in IE. And the sad thing
is that they shouldn't have had to test it at all as the logic is so
obviously broken.

            return node.className.match(re);

Inefficient. Use the test method instead.

        });
    }
    return els;

}

I saw a very long "ultimate" version somewhere (Robert Nyman?).

Good bet it is ultimately worse.

 

[David Mark]

Le 11/08/10 12:49, williamc a écrit :

On 8/11/2010 5:54 AM, Gregor Kofler wrote:
Am 2010-08-11 05:30, schrieb Denis McMahon:
On 10/08/10 21:57, Evertjan. wrote:
Denis McMahon wrote on 10 aug 2010 in comp.lang.javascript:
At the moment I use named elements, and group the elements by giving
them a common name, but this feels "wrong". For example:
function vis(name, state)
{
       var els = document.getElementsByName(name);
       for (var el in els) els[el].style.visible = state;
}
This rather works by coincidence, since el will become any property of
your els collection (...)
A working approach:
var l = els.length;
while(l--) {
   els[l].style.visibility = state;
}
Has anyone got a "better" way to do this sort of thing? (...)
(untested)
function gEBCN(cN) {
   var els = document.getElementsByTagName("*");
   var result = [];
   var l = els.length;
   while(l--) {
     if(els[l].className == cN) {
       results.push(els[l]);
     }
   }
   return result;
}
The main difference: the "native" gEBCN() will return a live collection,
the custom version a snapshot.
Good point about the difference between the native implementation
returning a (live) node list vs. just a snapshot.
Any solution must work with multiple values, though, e.g. class="foo
bar" and I don't see how the function above will do that.

function gEBCN(cN) {
  if(document.getElementsByClassName)
  return document.getElementsByClassName(cN);
  var els = document.getElementsByTagName("*"),
      l = els.length,
      result = [];
  while(l--)
    if(els[l].className && els[l].className.indexOf(cN) >= 0)
      results.push(els[l]);
  return result;
}

I do not understand all other complications ... :-(
(as they seem to me very useless)

Then you probably won't like this one...

http://robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname...

I know I don't. Predictable, really.