getElementsByAttribute

[liorean]

Could be rewritten to work in ie5w, ie5m, of course, but I like it like it is:

// document.getElementsByAttribute([string attributeName],[string attributeValue],[boolean isCommaHyphenOrSpaceSeparatedList:false])
document.getElementsByAttribute=function(attrN,attrV,multi){
    attrV=attrV.replace(/\|/g,'\\|').replace(/\[/g,'\\[').replace(/\(/g,'\\(').replace(/\+/g,'\\+').replace(/\./g,'\\.').replace(/\*/g,'\\*').replace(/\?/g,'\\?').replace(/\//g,'\\/');
    var
        multi=typeof multi!='undefined'?
            multi:
            false,
        cIterate=document.getElementsByTagName('*'),
        aResponse=[],
        attr,
        re=new RegExp(multi?'\\b'+attrV+'\\b':'^'+attrV+'$'),
        i=0,
        elm;
    while((elm=cIterate.item(i++))){
        attr=elm.getAttributeNode(attrN);
        if(attr &&
            attr.specified &&
            re.test(attr.value)
        )
            aResponse.push(elm);
    }
    return aResponse;
}

[liorean]

OK, an ie5 compatible version. (untested)

// document.getElementsByAttribute([string attributeName],[string attributeValue],[boolean isCommaSeparatedList:false])
document.getElementsByAttribute=function(attrN,attrV,multi){
    attrV=attrV.replace(/\|/g,'\\|').replace(/\[/g,'\\[').replace(/\(/g,'\\(').replace(/\+/g,'\\+').replace(/\./g,'\\.').replace(/\*/g,'\\*').replace(/\?/g,'\\?').replace(/\//g,'\\/');
    var
        multi=typeof multi!='undefined'?
            multi:
            false,
        cIterate=typeof document.all!='undefined'?
            document.all:
            document.getElementsByTagName('*'),
        aResponse=[],
        re=new RegExp(multi?
            '\\b'+attrV+'\\b':
            '^'+attrV+'$'),
        i=0,
        elm;
    while((elm=cIterate.item(i++))){
        if(re.test(elm.getAttribute(attrN)||''))
            aResponse[aResponse.length]=elm;
    }
    return aResponse;
}

[mw22]

I've tested the script a bit, but it does not work out of the box with me (my fault?).

I had to put an if statement around this:
if (attr){
[code]
attr=elm.getAttributeNode(attrN);
if(re.test(attr.value))
aResponse[aResponse.length]=elm;
[code]
};

        aResponse=[];
        length,

I had to remove length, and changed the aResponse=[]; in aResponse=[],
and then it's working fine in Mozilla and IE6.

IE5 does not know getAttributeNode ( http://www.xs4all.nl/~ppk/js/?version5.html ), so maybe it is better to rewrite the script with getAttribute?

It looks like one can use regexp's for attribute values? That's cool!

I don't know exactly the function of multi. Is it used when you want only the attribute values when it is part of more than one value (e.g. attr="value1 value2")?

I think it's a great script.
The problems I have with it, are probably because I don't understand every aspect of it.

[liorean]

There were points to using getAttributeNode over getAttribute, but I can't remember exactly what at the moment. (I wrote this in April, so I can't exactly recall the basis of that choice.)

The multi variable was originally intended for space separated lists such as the class attribute, but I found it could be used for comma separated lists and hyphen separated lists as well. Thus if false, this function matches the css [attrName=attrValue] syntax, while if true, it matches all of the the css syntaces [attrName~=attrValue], [attrName|=attrValue], [attrName*=attrValue].

Hmm, I'll rewrite the ie5 version. Does the advanced version work as it should? (can't remember how much testing I did on this before I posted it)

[:Edit:] Both are rewritten a bit, since it seems I had a not-quite-working source as starting point. Do they work?

[mw22]

The first version only works in IE6. In MozFirebird I get the error message: attr has no properties.
Version for IE5 now works fine in both IE6 and Mozilla.
In IE5 I will test it tomorrow.
As far as I can tell you can delete 'length,' in the list of variables.
I'm going to bed now.

[liorean]

Yep, length is an artefact from earlier versions. It's gone now. I've tried to fix the attr.value problem, don't know if I succeeded. (Too lazy to make a test page...)

[mw22]

The second one works fine in IE5 and Mozilla.
The fist one is not working.
attr=elm.getAttributeNode(attrN); is returning null if there is no attribute specified. So attr.specified won't work.
Making it this way: if(attr && re.test(attr.value))
and it works.

[liorean]

In fact, I'll have to check for all three of them, just to avoid the possible case of a value of null, which would then match a possible attribute sought for, with the name of null.

[mw22]

Originally posted by liorean
In fact, I'll have to check for all three of them, just to avoid the possible case of a value of null, which would then match a possible attribute sought for, with the name of null.

You are really paranoid
I'll do some more advanced testing tomorrow.

[liorean]

Me paranoid? <mumble>... he must be one of them... must be cautious...</mumble> I guess I'm a bit to set at what-I-consider-the-right-approach sometimes (including taking all possible cases in consideration), but paranoid?

This discussion got me to remember something. This script and the testing of it is what prompted me to experiment and find this nice obscure Mozilla bug. Something hidden that deep in the implementation of something, you have to be paranoid to find...

I prefer the word thorough to paranoid, though...

[mw22]

Thorough!!! Yes, that was the word that I meant. Blame it on my bad English

I've tested it a bit further.
It seems to work fine now in IE and Moz.

[attrName~=attrValue] and [attrName|=attrValue] do work now, as I can understand.

But [attrName*=attrValue] does not work. Should it be supposed to work with how the script is done now?
re=new RegExp(multi?'\\b'+attrV+'\[\^\\b\]\*\\b':'^'+attrV+'$')
is making it a bit better, but
re=new RegExp(multi?'\\b\.*?'+attrV+'\[\^\\b\]\*\\b':'^'+attrV+'$')
(getting a headache of these escaped regexps)
would make it perfect, although this is not working in IE5.

With many thanks to your regexp tutorial on evolt

[liorean]

Hmm, let me have a look at this... according to my testing (of just the regexes) it works in Moz, but I might be wrong.

[Alex Vincent]

What, no namespaces?

I wrote a little tutorial for George on DOM 2 TreeWalker, featuring a getElementsbyAttrMatch() method. It's a bit more advanced, and I'm waiting on clearance from George, but if you want a peek, let me know.

Oh, that's right, IE doesn't really support XML namespaces... darn...

[liorean]

Heh, I thought of using either NodeIterator or TreeWalker, but gave them up in favour of iew support.

I believe Chris Nott has a version of this using just those on his site, however.

[mw22]

I'm interested in the tutorial, although I can wait for George (!?)