웹브라우저 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. labis98
    20210911 좋은 강의 감사합니다.
  3. forkThis
    getElementbyId는 document객체의 메서드입니다
    대화보기
    • 드림보이
      수강완료했습니다...
    • 박병진
      2020.12.04 완료
    • 현미쓰
      완료 ㅎㅎ 좋은 강의 항상 감사합니다^>^
    • anne
      완료
    • testrestbestwest
      감사합니다.
    • 정승옥
      완료
    • 김진욱
      완료
    • Useok
    • ㅎㅅㅁ
      200204 restart
    • guest
      2강 차례
    • 굼벵이
      완료
    • 모든일이일사천리
      완료 : 19-11-13 10PM
    • 2019-10-14 8:15pm 완료
    • 빵승
      질문있습니다!
      element객체를 리턴하기 위해서
      document.getelementbyid를 쓰셨는데
      getelement~~ 메소드는 element객체의 메소드라고 하셨는데
      document객체에서도 쓸수 있는건가요?
      그러면 document객체 element객체 각각에 메소드가 정의 되어있는건가요
      아니면 그들의 부모인 node객체의 메소드인가요?
    • 미완성
      20190109
    • JuicyFresh
      감사합니다.
    • 박인호
      12-29
      수강완료.
    • Byungsoo Kim
      감사합니다.
    • 수복
      감사합니다.
    • 아침해
      궁금해서 찾아봤습니다.
      jQuery를 이용한다면..
      var active=$('#active');로 제이쿼리 객체를 생성하고
      active.addClass("zz")
      active.removeClass("zz")
      active.toggleClass("zz")
      을 이용해서 추가, 제거, 토글이 가능하네요.
    • Sangmook Kim
      170801 완료
    • crable
      감사합니다
    • 오원구
      조금씩 이해가 되네요.
      고맙습니다.
    • Baek Cheol Hun
      감사합니다
    • 폭스킴
      tagName은 읽기전용, class는 예약어~
    • 유유
      감사합니다.
    • hyuna
      감사합니다
    • tachyon
      감사합니다
    • yihsang
      감사합니다.
      열심히 듣겠습니다.
    • JustStudy
      2016.07.08 금
      고맙습니다 3.
    • JustStudy
      2016.06.30
      흥미진진합니다.
      고맙습니다 2.
    • 리케
      강좌 감사합니다 ^^!! 잘보고있습니다!
    • 강상모
      너무 잘보고있습니다. 역시 기초가 중요하단걸 깨닳고 있습니다.
    • 온달장군
      강좌 잘보고 갑니다. 감사합니다.
    • 이주환
      2016. 04. 27
      잘보고갑니다~!
      classList는 꼭 체크!
    • JustStudy
      고맙습니다
    • 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에 대한 강의가 이제야 나오네요. 기다렸습니다..... ^^
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기