Is there a de facto standard to identify HTML elements for a JavaScript library to attach to?

Question

I'm creating a JavaScript library. This library will attach itself to one or more div's in an HTML doc. I'd like to attach automatically to make it easy for users to integrate the library. Is there a de facto standard or best practice for how HTML elements should identify themselves to a library this way? Right now, I look for all elements with an ID that begins with a certain prefix, e.g. id="fooLibDiv1" or "fooLibMyDiv" and so on. This feels fragile. Would it be better to look for a non-standard attribute like 'attachFooLib="yes"' ? Or look for a specific CSS class? Etc.

(FWIW, I don't want to require jQuery of my users. Also: not looking for code here, just what the right design approach should be.)

score 1 · Accepted Answer · answered Feb 28 '11 at 19:45

1

Use classes. These are not "specific CSS classes" as you say, the "class" just says that the particular element belongs to a group of similar elements. And these similar elements are treated similarly - whether it's the design as in case of CSS or behavior as in your case.

answered Feb 28 '11 at 19:45

naivists

32,681
5
61
85

By 'specific class' I meant one that I spec for my library. So, you suggest that having a user add 'class="fooLib"' to their elements is the best way? – DaveBurns Feb 28 '11 at 19:52
I believe it is better than requiring specific formatting of IDs. Typically I tend to set the IDs of my elements according to the "business function" the element is responsible for. Hence I wouldn't like to change IDs just to use a specific library. But it's OK with classes, since each element can have multiple classes. – naivists Feb 28 '11 at 19:56
Thanks for the info. What if you want to specify arguments to your library but users still want HTML that validates? Adding additional CSS classes for boolean arguments is easy (e.g. fooLibUseBlah) but what about arguments that aren't booleans? Such as, I need to know if an option should be a, b, c, or d? I haven't thought of a better way than an HTML tag attribute like option="a". I like the CSS class approach though. Is there a way to shoehorn this into that model? – DaveBurns Mar 06 '11 at 20:01

score 1 · Answer 2 · answered Feb 28 '11 at 19:51

I would not use id's for that purpose. Your users might want to use id's on the elements for another reason. Also, using extra attributes would prevent validation, and again, some users might want that.

I would use classes. I think namespacing them for your library would be nice, so for instance you could use classnames like fooLibButton or fooLibList or something. Since an element can have multiple classes this won't cause the problems an id will cause.

If you don't use jquery, you can still easily get those elements:

/*
 * addLoadEvent based upon this blog article:
 *
 * http://simon.incutio.com/archive/2004/05/26/addLoadEvent
 */
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {oldonload();func();}
    }
}

/*
 * As proposed by Bernard Marx on:
 * http://www.webmasterworld.com/forum91/1729.htm
 */
function getElementsByCondition(condition,container) {
    container = container||document
    var all = container.all||container.getElementsByTagName('*')
    var arr = []
    for(var k=0;k<all.length;k++){
        var elm = all[k]
        if(condition(elm,k)){
            arr[arr.length] = elm
        }
    }
    return arr
}
function checkWetherContainsClass(classname,element){
    var classes =
    element.className.split(" ");
    var found = false;
    var k=0;
    while(k<classes.length&&classes!=classname){k++;}
    return !(k == classes.length);
}

function getElementsByClass(classname,container){
    return getElementsByCondition(function(x,y){return checkWetherContainsClass(classname,x);},container);
}

But to answer your question: afaik, no, there is no defacto standard.

score 1 · Answer 3 · answered Feb 28 '11 at 21:12

CSS selectors. This method is used by nearly all JS frameworks (jQuery, prototype...). The CSS selector syntax is familiar to web devs and easy to use.

http://simonwillison.net/2003/Mar/25/getElementsBySelector/

Make an init function that takes a CSS selector and attaches your library to the resulting list of elements.

Is there a de facto standard to identify HTML elements for a JavaScript library to attach to?

3 Answers3