웹브라우저 JavaScript

식별자 API

엘리먼트를 제어하기 위해서는 그 엘리먼트를 조회하기 위한 식별자가 필요하다. 본 수업에서는 식별자 API들에 대해서 알아보자.

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

Element.tagName

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

<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

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

<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에 비해서 훨씬 편리한 사용성을 제공한다.

<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');" />

 

댓글

댓글 본문
작성자
비밀번호
  1. 유유
    감사합니다.
  2. 감사합니다
  3. tachyon
    감사합니다
  4. yihsang
    감사합니다.
    열심히 듣겠습니다.
  5. JustStudy
    2016.07.08 금
    고맙습니다 3.
  6. JustStudy
    2016.06.30
    흥미진진합니다.
    고맙습니다 2.
  7. 리케
    강좌 감사합니다 ^^!! 잘보고있습니다!
  8. 강상모
    너무 잘보고있습니다. 역시 기초가 중요하단걸 깨닳고 있습니다.
  9. 온달장군
    강좌 잘보고 갑니다. 감사합니다.
  10. 이주환
    2016. 04. 27
    잘보고갑니다~!
    classList는 꼭 체크!
  11. JustStudy
    고맙습니다
  12. GunLoc
    네 질문한 내용이 맞아요. esc 누르니까 잘나오네요. 답변 감사드려요 ^^
    대화보기
    • 토토랑
      개발자도구 여신 상태에서 esc 누르시면 아래로 콘솔창이 나와요. 그 콘솔창을 닫으시려면 다시 esc 누르시면 닫기고요. 이거 물어보신게 맞는지요? ^^;;
      대화보기
      • GunLoc
        강좌에서처럼 크롬 개발자 도구에서
        Elements, Console를 위 아래 탭으로 보고 싶은데 어떻게 변경하죠?
        제 탭은 Elements랑 Console이랑 같은 탭에 있어서 보기가 조금 불편해서요.
      • WayneKing
        밑에 댓글에 더 보태어
        더욱 커졌으면 하는 바랩입니다.!!!!
      • 생활코딩은 대한민국의 코딩 역사를 새롭게 쓰고 있는 중.....너무 거창한가?ㅋㅋ
        암튼 이런 지식 나눔이 외국은 잘 구축되어 있어서 영어권자들은 접근성이 비교적 쉬운 반면
        한국은 잘 안되어 있어서 프로그램 코딩에 접근하기 너무 어려웠는데...

        나랏말쌈이 즁국과 다라 백성들이 어려워해서 한글을 만들것처럼
        egoing님이 생활코딩을 여시어 한국의 웹 역사에 큰 획을 그은 것이라고...... 평가하고 싶네요.
        뭐 나름대로 언어장벽때문인지 몰라도 w3school보다 더 이해하기 쉬워요.
      • 코딩!
        감사합니다
        !
      • 아이린
        너무 잘보았습니다. ^-^b
      • 육점이
        항상 감사합니다!!

        궁금한점이 하나 생겨 질문을 올려봅니다~

        중간에 for문을 active.classList에 대하여 for in문을 사용하게 되면 active.classList가 가진 메소드(function item() { [native code] }
        VM613:3 function contains() { [native code] }
        VM613:3 function add() { [native code] }
        VM613:3 function remove() { [native code] }
        VM613:3 function toggle() { [native code] })들도 한꺼번에 나오게 되네요!!! 왜그런걸까요 ㅠㅠ
      • alexmoon
        제 생각에는

        예를 들어 css상에서 id가 active에 대한 것과 deactive에 대한 것 두가지를 만들어 놓고

        BODY상의 id가 active인 곳의 id를 deactive로 바뀌게 함으로써

        어떠한 버튼을 누르면

        적용되는 여러가지 속성을 바꾸는 용도로 쓸 수 있지 않을까 싶네요.
        대화보기
        • heeyabr
          근데 굳이 id 를 저렇게 변경해야 하나요??
          그냥 id값지우고 변경하면 안돼나요??
        • 팽맨이러닝
          id에 대한 강의가 이제야 나오네요. 기다렸습니다..... ^^
        • T-BONE Steak
          jQuery의 addClass, removeClass, toggle 메소드 의 원리가 이거 였군요.

          이해가 시원하게 되네요.
        • egoing
          수정 했습니다. 감사합니다.
          대화보기
          • Cho,kiwon
            Element.className 예제에 </script> 가 빠져있습니다.
          • 도로시
            저도 크롬에서 개발자 도구를 열고 따라해 보았는데
            active.classList를 하면 ["important", "current"] 처럼 바로 배열 형태로 보여주고
            DOMTokenList라는 내용은 안 나오네요

            add나 remove, toggle은 모두 잘 실행됩니다 ^^
          • zzeljoa
            수업 너무 잼있어요~ 어렵게만 느껴졌던 자바스크립트가 머리속에 쏙쏙 들어옵니다~^^
          • babosky7772
            저는 따라해도 이고잉님처럼 잘안나오네요 ㅠㅠ
          • somdari
            좋은 수업 감사합니다..^^;
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기