Element 객체 : 식별자 API

식별자

* 문서내의 특정한 엘리먼트를 식별하기 위한 API

* HTML에서 엘리먼트 이름과 id, class를 식별자로 사용한다.

 - Element.tagName

* 해당 엘리먼트의 태그 이름을 알아낸다. 태그 이름은 변경이 불가능하다.

<ul>
    <li>html</li>
    <li>css</li>
    <li id="act" class="important current">JavaScript</li>
</ul>
<script>
  
 var tag = document.getElementById('act');    //var tag = document.getElementById('act').tagName;
 document.write(tag.tagName);                //document.write(tag);

</script>

     * 결과

• html
• css
• JavaScript

- Element.id

<ul>
    <li>html</li>
    <li>css</li>
    <li id="act">JavaScript</li>
</ul>
<script>
  
 var tag = document.getElementById('act');
 //id값 출력
  document.write(tag.id);	
 //id값 변경
  tag.id = 'super';
 //변경 id값 출력
  document.write('<br />'+tag.id);	
</script>

* 문서 내에서 id는 단 하나만 등장 할 수 있다. 

* 결과

• html
• css
• JavaScript

 - Element.className

<ul>
    <li>html</li>
    <li>css</li>
    <li id="act">JavaScript</li>
</ul>
<script>
var act = document.getElementById('act');
// class 값을 변경할 때는 프로퍼티의 이름으로 className을 사용한다.
act.className = "important current";
document.write(act.className);
// 클래스를 추가할 때는 아래와 같이 문자열의 더한다.
act.className += " readed"
</script>

* 클래스는 여러개의 엘리먼트를 그룹핑할 때 쓰인다.

* 결과

• html
• css
• JavaScript

 - Element.classList

<ul>
    <li>html</li>
    <li>css</li>
    <li id="lis" class="important current">JavaScript</li>
</ul>
<script>
function loop(){
    for(var i=0; i<lis.classList.length; i++){
        alert((i+"  "+ lis.classList[i]));
    }
}
// 클래스를 추가
</script>
// 현재 className 반환
<input type="button" value="DOMTokenList" onclick="alert(lis.classList);" />    

// 클래스 조회
<input type="button" value="조회" onclick="loop();" />    

// 클래스 이름에 'marked' 추가        
<input type="button" value="추가" onclick="lis.classList.add('marked');" />

// 클래스 이름에서 'important' 제거
<input type="button" value="제거" onclick="lis.classList.remove('important');" />

// 실행 시 마다 추가와 제거 반복 = 토글(ON/OFF)
<input type="button" value="토글" onclick="lis.classList.toggle('current');" />

* className보다 사용이 편리하다.

* 결과

• html
• css
• JavaScript