querySelector

querySelector는 html5부터 지원한다.

http://blog.saltfactory.net/201

//ID로 선택
var did = document.querySelector("#dId");
console.log("ID값으로 선택 : "+ did)

//Class으로 선택
var dclass = document.querySelector(".dClass");
console.log("classname으로 선택 : "+ dclass)

//attributor로 선택
var dname = document.querySelector("div[name='dName']");
console.log("attributor로 선택 : "+ dname)

//태그네임으로 선택
var dElement = document.querySelector("div");
console.log("태그 엘레멘트로 선택 : "+ dElement)


//다중 클래스명으로 선택
var multiClass1 = document.querySelector("div.class1, div.class2");
console.log("다중 클래스명으로 선택 : "+ multiClass1.innerHTML)

var multiClass2 = document.querySelector("div.class2, div.class3");
console.log("다중 클래스명으로 선택 : "+ multiClass2.innerHTML)

var multiClass3 = document.querySelector("div.class1.class3");
console.log("다중 클래스명으로 선택 : "+ multiClass3.innerHTML)

//selector사용
var selDiv = document.querySelector("ul>li:nth-child(2)");
console.log("selector사용 : "+ selDiv.innerHTML)

//form 선택
var selInput = document.querySelector("input[type='radio']:checked");
console.log("form 선택 : "+ selInput.value)

출처:http://romeoh.egloos.com/5053857

만약 쌩(?)스크립트를 사용하여 클래스명으로 셀렉트 할경우는

function getElementsByClass(searchClass,node,tag) {
    var classElements = new Array();
    if ( node == null )
        node = document;
    if ( tag == null )
        tag = '*';
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    for (i = 0, j = 0; i < elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
            classElements[j] = els[i];
            j++;
        }
    }
    return classElements;
}

http://nowhunt.tistory.com/27