[js] getElementsByClassName

jQuery 같은 프레임웍을 쓰지 않는다면 class name 으로 dom 셀렉팅을 할 수 없습니다.

지난번 javascript 스터디를 통해서 function 타입으로 제작하는 방법을 설명했었는데 조금 더 발전시켜 document 객체에 prototype으로 선언해 getElementById 와 같은 매서드의 형식으로 사용할 수 있도록 제작해봤습니다.

안타깝게도 Document 객체에 prototype 으로 선언하는 것이 IE 시리즈에선 허용되지 않아 아래와 같은 방식으로 우회했습니다.

테스트는 여기서 http://jsfiddle.net/rootbox/gtEkb/

document.getElementsByClassName = function(name) {
    var obj = result = [];
    var n = name.split(".");
    var tag_name = null, class_name = null;

    if(n.length == 2) {
        tag_name = n[0];
        class_name = n[1];
    } else {
        tag_name = "*";
        class_name = n[0];
    }

    obj = document.getElementsByTagName(tag_name);
    for(var i in obj) {
        if(obj[i].className != class_name) continue;
        result.push(obj[i]);
    }

    return result;
};

Element.prototype.getElementsByClassName = function(name) {
    var obj = result = [];
    var n = name.split(".");
    var tag_name = null, class_name = null;

    if(n.length == 2) {
        tag_name = n[0];
        class_name = n[1];
    } else {
        tag_name = "*";
        class_name = n[0];
    }

    obj = this.getElementsByTagName(tag_name);
    for(var i in obj) {
        if(obj[i].className != class_name) continue;
        result.push(obj[i]);
    }

    return result;
};

console.log(document.getElementsByClassName("p.a"));
console.log(document.getElementsByClassName("span.a"));
console.log(document.getElementsByClassName("a"));
console.log(document.getElementById("a").getElementsByClassName("span.a"));