JavaScript 아이디(id), 태그(tag), 클래스(class) 찾기

 

아이디(ID) 찾기 - getElementByid()

ID를 찾아서 반환

var elem = document.getElementById('idName');

 

 

클래스(Class) 찾기 - getElementsClassName()

실시간으로 업데이트되는 해당 클래스 명을 가진 모든 요소 목록의 HTML Collection이 반환된다.

클래스는 여러개이기 때문에 HTML Collection 객체로 배열같은 형태로 가져온다.

따라서 사용할때는 배열처럼 인덱스 값을 붙여줘야 한다.

 

단일클래스 찾기

document.getElementsByClassName('className');

 

여러개 클래스를 가진 요소 찾기

document.getElementsByClassName('className select');

 

main이라는 ID를 가진 요소의 하위 요소 중 test 클래스를 가진 모든 요소

document.getElementById('main').getElementsByClassName('test')

 

 

 

태그(Tag) 찾기 - getElementsByTagName()

태그 역시 여러개 일 수 있기때문에 html Collection 객체로 가져온다.

따라서 사용할때는 클래스와 마찬가지로 인덱스 값을 붙여줘야 한다.

let elements = document.getElementsByTagName('p');;

 

 

사용예제

window.onload = function() {
    // 먼저 #test를 찾는다.
    var list = document.getElementById("list");
    // #test의 태그 중 span태그를 찾는다.
    var liList = list.getElementsByTagName("li");
    // li태그를 하나씩 접근해 글자색을 변경한다.
    var liBlue = list.getElementsByClassName("blue");
    //
    for (var i = 0; i < liList.length; i++) {
        var li = liList[i];
        if(li.classList.contains("blue")) {
            li.style.color = "#00f";
            continue;
        }
        li.style.color = "#f00";
    }
}