javascript Element 객체 - 식별자 API

 

 

 

식별자 API

 

 

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

 

 

 

 

 

 

Element.tagName

 

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

 

<ul>
    <li>html</li>
    <li>css</li>
    <li id="jin seok" class="kim">JavaScript</li>
</ul>
<script>
console.log(document.getElementById('jin seok').tagName)
</script>

 

 

 

 

Element.id

 

문서에서 id는 단 하나만 등장할 수 있는 식별자다. 그 id의 값을 읽고 변경하게 한다.

 

<ul>
    <li>html</li>
    <li>css</li>
    <li id="jin seok">JavaScript</li>
</ul>
<script>
var active = document.getElementById('jin seok');
console.log(active.id);
active.id = 'jin seok kim';
console.log(active.id);
</script>

 

 

 

 

 

Element.className

 

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

 

 

<ul>
    <li>html</li>
    <li>css</li>
    <li id="HI">JavaScript</li>
</ul>
<script>
var active = document.getElementById('HI');
active.className = "jin seok";
console.log(active.className);
active.className += " kim"
</script>

순서대로 지정한 HI id 값을 가지고 있는<li>의 class 이름이 먼저 나타나고 class의 이름이 수정되어 있는 것 또한 알 수 있다.

 

 

 

 

 

 

Element.classList

 

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

 

<ul>
    <li>html</li>
    <li>css</li>
    <li id="jinseok" class="Developer kim">JavaScript</li>
</ul>
<script>
function loop(){
    for(var i=0; i<jinseok.classList.length; i++){
        console.log(i, jinseok.classList[i]);
    }
}
</script>
<input type="button" value="DOMTokenList" onclick="console.log(jinseok.classList);" />
<input type="button" value="조회" onclick="loop();" />
<input type="button" value="추가" onclick="jinseok.classList.add('marked');" />
<input type="button" value="제거" onclick="jinseok.classList.remove('Developer');" />
<input type="button" value="토글" onclick="jinseok.classList.toggle('kim');" />

DOMTokenList와 조회(loop();) 버튼을 누른 결과

 

추가(.add)와 제거(.remove) 버튼을 누른 결과 class의 이름이 명령대로 변화한다. (토클(.toggle)은 버튼을 누를 때마다 제거와 추가를 반복한다.)