[자바스크립트] Element 객체와 식별자 API

[자바스크립트] Element 객체

참조 :: 생활코딩

Element 객체는 엘리먼트를 추상화한 객체다. HTMLElement 객체와의 관계를 이해하기 위해서는 DOM의 취지에 대한 이해가 선행되야 한다. DOM은 HTML만을 제어하기 위한 모델이 아니다. HTML이나 XML, SVG, XUL과 같이 마크업 형태의 언어를 제어하기 위한 규격이기 때문에 Element는 마크업 언어의 일반적인 규격에 대한 속성을 정의하고 있고, 각각의 구체적인 언어(HTML,XML,SVG)를 위한 기능은 HTMLElement, SVGElement, XULElement와 같은 객체를 통해서 추가해서 사용하고 있다.

1) 식별자 API

- 엘리먼트를 제어하기 위해서는 그 엘리먼트를 조회하기 위한 식별자 API

- Element.tagname : 해당 엘리먼트의 태그 이름을 알아낸다.

- Element.id : 문서에서 id는 단 하나만 등장할 수 있는 식별자.

- Element.className : 클래스는 여러개의 엘리먼트를 그룹핑할 때 사용

  

- Element.classList : className에 비해서 훨씬 편리한 사용성을 제공

여러개의 DOM을 제어해야할 경우/ 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');" />

 

* toggle 같은 경우에는 on일시 off, off일시 on.