[ Element ] 식별자 API

 

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다.

스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.

( 출처 :  https://opentutorials.org/course/743inf.run/pBzy)

---

 식별자 API 

element를 제어하기 위해서는, 그 element를 조회하기 위한 식별자가 필요하다. 

 

HTML에서 element의 이름과 id 그리고 class는 식별자로 사용된다.

식별자 API는 이 식별자를 가져오고 변경하는 역할을 한다.

---

 Element.tagName 

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

<ul>
    <li>html</li>
    <li>css</li>
    <li id="active" class="important current">JavaScript</li>
</ul>
<script>
	console.log(document.getElementById('active').tagName)
</script>

---

 Element.id 

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

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

---

 Element.className 

클래스는 여러개의 element를 그룹핑할 때 사용한다.

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

---

 Element.classList 

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

 

classList라는 property에 저장되어 있는 객체는 DOMTokenList라는 객체이다.DOMTokenList는 하나의 태그에 여러개 클래스의 이름이 있을 때, 유사 배열인 DOMTokenList에 저장되는 것을 말한다.

<ul>
    <li>html</li>
    <li>css</li>
    <li id="active" class="important current">JavaScript</li>
</ul>
<script>
    function loop(){
        for(var i=0; i<active.classList.length; i++){
            console.log(i, active.classList[i]);
        }
    }
// 클래스를 추가
</script>
<input type="button" value="DOMTokenList" onclick="console.log(active.classList);" />
<input type="button" value="조회" onclick="loop();" />
<input type="button" value="추가" onclick="active.classList.add('marked');" />
<input type="button" value="제거" onclick="active.classList.remove('important');" />
<input type="button" value="토글" onclick="active.classList.toggle('current');" />
<!--실행할 대마다 값을 넣다 지웠다 하고 싶을 때 사용하는 것이 토글이다.즉, 없으면 생성해주고 있으면 제거해준다.-->