Element 객체 - 식별자 API

엘리먼트를 제어하기 위해서는 그 엘리먼트를 조회하기 위한 식별자가 필요하다. 

HTML에서 엘리먼트의 이름과 id 그리고 class는 식별자로 사용된다. 식별자 API는 이 식별자를 가져오고 변경하는 역할을 한다.

Element.tagName

해당 엘리먼트의 태그 이름을 알아낸다. 태그 이름을 변경하지는 못한다.

document.getElementById('active').tagName

Element.id

문서에서 id는 단 하나만 등장할 수 있는 식별자다. 아래 예제는 id의 값을 읽고 변경하는 방법을 보여준다. 

var active = document.getElementById('active');
console.log(active.id);
active.id = 'deactive';
console.log(active.id);

Element.className

클래스는 여러개의 엘리먼트를 그룹핑할 때 사용한다.

var active = document.getElementById('active');
// class 값을 변경할 때는 프로퍼티의 이름으로 className을 사용한다.
active.className = "important current";
console.log(active.className);
// 클래스를 추가할 때는 아래와 같이 문자열의 더한다.
active.className += " readed";

Element.classList

className에 비해서 훨씬 편리한 사용성을 제공한다.

var active = document.getElementById('active');
// 현재 엘리먼트 객체의 classname을 조회한다.
console.log(active.classList);
// 엘리먼트에 새로운 클래스를 추가한다.
active.classList.add('marked');
// 엘리먼트의 클래스를 제거한다.
active.classList.remove('important');
// 엘리먼트의 클래스를 토글하여 클래스가 없으면 추가하고 있으면 제거한다.
active.classList.toggle('current');