웹브라우저 JavaScript

속성 API

속성은 HTML에서 태그명만으로는 부족한 부가적인 정보라고 할 수 있다. 이 속성을 어떻게 제어하는가 알아보자. 

속성을 제어하는 API는 아래와 같다. 각각의 기능은 이름을 통해서 충분히 유추할 수 있을 것이다.

  • Element.getAttribute(name)
  • Element.setAttribute(name, value)
  • Element.hasAttribute(name);
  • Element.removeAttribute(name);
<a id="target" href="http://opentutorials.org">opentutorials</a>
<script>
var t = document.getElementById('target');
console.log(t.getAttribute('href')); //http://opentutorials.org
t.setAttribute('title', 'opentutorials.org'); // title 속성의 값을 설정한다.
console.log(t.hasAttribute('title')); // true, title 속성의 존재여부를 확인한다.
t.removeAttribute('title'); // title 속성을 제거한다.
console.log(t.hasAttribute('title')); // false, title 속성의 존재여부를 확인한다.
</script>

속성과 프로퍼티

모든 엘리먼트의 (HTML)속성은 (JavaScript 객체의) 속성과 프로퍼티로 제어가 가능하다. 예제를 보자.

<p id="target">
    Hello world
</p>
<script>
	var target = document.getElementById('target');
	// attribute 방식
	target.setAttribute('class', 'important');
	// property 방식
	target.className = 'important';
</script>

setAttribute('class', 'important')와 className = 'important'는 같은 결과를 만든다. 하지만 전자는 attribute 방식(속성이라고 부르겠다)이고 후자는 property 방식이다. property 방식은 좀 더 간편하고 속도도 빠르지만 실제 html 속성의 이름과 다른 이름을 갖는 경우가 있다. 그것은 자바스크립트의 이름 규칙 때문이다.

class className
readonly readOnly
rowspan rowSpan
colspan colSpan
usemap userMap
frameborder frameBorder
for htmlFor
maxlength maxLength

심지어 속성과 프로퍼티는 값이 다를수도 있다. 아래 코드를 실행한 결과는 속성과 프로퍼티의 값이 꼭 같은 것은 아니라는 것을 보여준다.

<a id="target" href="./demo1.html">ot</a>
<script>
//현재 웹페이지가 http://localhost/webjs/Element/attribute_api/demo3.html 일 때 
var target = document.getElementById('target');
// http://localhost/webjs/Element/attribute_api/demo1.html 
console.log('target.href', target.href);
// ./demo1.html 
console.log('target.getAttribute("href")', target.getAttribute("href"));
</script>

댓글

댓글 본문
작성자
비밀번호
  1. 유유
    감사합니다.
  2. 감사합니다.
  3. tachyon
    감사합니다
  4. olgierd
    속성은 String 타입, 프로퍼티는 다양한 타입이 될 수 있습니다.
  5. 저도초보입니다
    그리고 저도 질문이 있는데

    그래서 결론이 무엇인지 궁금합니다.

    속성방식과 프로퍼티 방식중에 어떤것을 쓰는것이 더 나은것이고 추천되는방식인지...
  6. 저도초보입니다..
    디딩 사람구실님 그건 큰따옴표와 작은따옴표는 활용면에서는 차이가 없습니다.
    같은 내용을 뜻하지만 2/2강좌에서 'target.getAttribute("href")' 이 구문을 보시면
    제일 외곽에 작은따옴표 (' ')로 감싸져있는 코드기때문에 내부에서는 큰따옴표(" ")쓴거죠
    "target.getAttribute('href')" 이렇게 써도 같은 내용이라는거죠

    즉 단일로 사용할때는 " "를 쓰던 ' '쓰던 상관없지만 큰따옴표(" ") 안에
    다시 큰따옴표(" ")를 쓰면 안됩니다.
    "target.getAttribute("href")" 이거나 'target.getAttribute('href')'
    이건 사용할수 없다는것이죠
    대화보기
    • yihsang
      속성, 프로퍼티...
      개념의 정확한 정의 감사합니다.
    • JustStudy
      2016.07.08 금
      고맙습니다 3.
    • JustStudy
      2016.06.30
      고맙습니다 2.
    • 사람구실
      안녕하세요. 기본적인 문법 질문입니다....

      해당 강좌 1/2에서는
      console.log(t.getAttribute('href'));

      해당 강좌 2/2 뒷부분에서는
      console.log('target.getAttribute("href")', target.getAttribute("href"));

      으로 되어있는데요,

      객체.getAttribute( ' ' ); 과 객체.getAttribute(" "); 의 활용차이가 궁금합니다.

      즉 어떤 때에는 getAttribute 메서드 내부 인자를 ' '로 감싸는 건지, 또 어떤 때 " "로 감싸는 건지 매우 헷갈립니다..

      늘 좋은 강의 감사드립니다.
    • 이주환
      2016. 04. 27
      잘보고갑니다~!
    • JustStudy
      고맙습니다
    • WayneKing
      집중!!!
    • 2015-11-12
      2배속으로 열공중....
    • 쥬슈야
      저는 아직 그런 느낌을 받아보진 못했습니다만, 제 귀가 막귀인건지..;; 목소리 변화가 느껴지시나보군요. egoing님이 수년간 동영상강좌를 만들어오고 계셔서 목소리가 조금씩 변해야 정상(?)일 것 같기도 합니다.

      제 개인 경험으론 어떤 강좌였는지 모르겠지만 그 강좌 하나만 딱 목소리가 달랐던 강좌가 있었는데요. 그 목소리가 평소 이고잉님 목소리보다 더 젊은 느낌이었다는 점이 함정이죠. ㅎ
      대화보기
      • 쥬슈야
        속성과 프로퍼티를 같은 것으로 알고 있었는데;; 다른 형식이군요.
        막상 웹브라우저 자바스크립트 수업을 듣는 와중에 태그라는 단어도 종종 등장하곤 하는데요. html 공부할 때 정말 밥먹듯이 듣던 단어인데 막상 다를 용어랑 혼합되니깐 태그라는 단어도 새로운 단어처럼 들리더라고요. ㅜ.ㅠ

        객체, 오브젝트, 프로퍼티, 속성... 자주 접하다 보면 정리가 되겠죠?..ㅎ
        그래도 이젠 함수, 변수, 벨류값 등은 이해가 좀 되는군요.
      • 코딩!
        감사합니다!
      • 초바비
        강의 목소리가 변하신거 같네요
        다른 분이신가.
        정말 깔끔한 강의입니다.
      • 호두과자
        감사합니다.^^
      • 땡큐마스터
        감사합니다. 공부 많이 됩니다.
      • 육점이
        항상 감사합니다~!!!!! 좋은 하루 되세요!!
      • 뻐꾸기2
        좋은 질문?
        setAttribute를 한 것을 Attribute방식이라고 생각하고...

        그렇게 하지 않은 것을
        Property라고 하면 될 것 같습니다.

        이런게 있군요...
        나중에 알도록하고 뒤로 넘어갑니다.
      • 팽맨이러닝
        1) 속도가 더 빠르다면 Property 방식을 써야 할 듯 하군요.
        2) 한국어로 설명이 되면 더 혼동스러운 것 같습니다. 사전엔 비슷한 뜻으로 나와서.
        Attribute은 동사의 느낌이고, Property는 명사의 느낌이 강한 것 같네요.
      • 규빈이아빠
        명강의 입니다^^
      • 코코딩
        ㅎㅎ 생각보다 빨리 답글을 달아주셔서 놀랐습니다.

        성격이 그래서 그런지는 몰라도..
        골돌히 생각했던것을
        이해를 잘 하지 못하면..

        다음것으로 진행할때마다 신경쓰여서..
        이해하지 못하는 경향이 있는데.

        사실 이러면 숲 전채를 보는데에 방해가
        되고 진도 빼는데에 방해만 된다는것을
        알기는 하지만..

        요 문제는 유난히도.. 햇깔려서
        답답한 마음에 적어봤습니다. 옇튼

        egoing님의 방침을 따르겠습니다.
        언재나 강의 정말 고맙고 감사하게 보고 있습니다.
        매번 신세집니다. 고맙습니다.
        대화보기
        • egoing
          음 당분간 구분하지 않으셔도 됩니다! 더 중요한게 많습니다.
          대화보기
          • 코코딩
            참.. 햇깔립니다...

            네이버에서 속성이란
            1.사물의 특징이나 성질
            2.사물의 현상적 성질이라고 하면서

            속성의 영어 뜻을 보면
            attribute와 property, 2개 다 같은의미로 쓰여지는게 신경쓰여서
            상세하게 둘다 검색해보니..

            attibute는
            속성 : 특질
            이라는 말로는 쓰여지면서

            property는
            1. 재산, 소유물 2. 부동산 3. 건물, 건물 구내
            라고 쓰여지는데...
            솔직히 너무 햇깔리고 용어 정립도 안되는게..

            사실 property=속성 이렇게만 생각했었는데..

            attribute...를 만나고나니... property의 attribute...라고 하면..
            속성의.. 속성??? 이라고. 생각하게 되는데...
            이게.. 참 햇깔리면서.. 용어 정립이 안되는군요...

            이 둘을 안햇깔리게 생각하는 법은 없을까요..?
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기