웹브라우저 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. 코리니
    20230103
  2. 헤밍웨이
    220825 1회차 완료!
  3. 임앤강
    2022-02-09 수강하였습니다 ~
  4. 드림보이
    2021.12.22. 속성 API 파트 수강완료
  5. pmxsg
    2021.12.21. 수강
  6. 노성훈
    감사합니다1!
  7. labis98
    20210911 좋은 강의 감사합니다.
  8. 현미쓰
    프로퍼티 방식, 속성 방식 차이 기억하기.
    프로퍼티로 접근할 때 그 이름이 속성 이름과 다른 경우가 있으므로 유의해야 함.
    가져오는 값 또한 경우에 따라 달라질 수 있다.
    ex) href를 프로퍼티 방식으로 가져왔을 때는 속성값이 전체 경로 url
    속성 방식으로 가져왔을 때는 속성값에 적힌 경로만 가져옴
  9. anne
    완료
  10. html 속성을 변경하려면 우선 찾는 태그를 객체가 참조한다

    1. attribute를 직접 수정한다
    2. 객체의 프로퍼티를 수정한다
    3. removeAttribute()를 통해 속성을 제거할 수 있다
    4. hasAttribute()를 통해 입력 속성키 값이 있는지 검사할 수 있다
  11. 정승옥
    완료
  12. 한강
    getAttribute, setAttribute, removeAttribute, hasAttribute
    attribute, property 접근법 차이 잘 배웠습니다~!!!
    200701
  13. Useok
  14. ㅎㅅㅁ
    200208 화이팅
  15. 굼벵이
    완료
  16. 모든일이일사천리
    Done : 19-11-14 8PM
  17. 2019-10-14 8:32pm 완료
  18. 미완성
    20190109
  19. JuicyFresh
    감사합니다.
  20. 피아
    지금 공부하시는분들 중에 같은 의문을 가지는 분들을 위해 남깁니다.
    자바스트립트로 수정하는 기능이 있는 이유는 상황에 따라 유동적으로 값들이 변경되어야하는 경우가 있기 때문입니다. 대표적으로 블로그겠네요. 블로그는 사용자에 따라서 이미지 위치, 메뉴 설정 등 다양하게 커스터마이징해서 사용합니다. 카페도 그렇고요. 그리고 게시판도 자바스크립트로 생성해서 쓰기도 하며 테이블도 직접 만드는경우도 거의없습니다.
    대화보기
    • 박인호
      12-29
      수강완료.
    • 수복
      감사합니다.
    • 예제에서는 간단한 문서로 했지만 실무에서 태그가 수백개가 넘을텐데요
      document 내에 있는 모든 class="target" 인 태그에 색상을 주려면Ctrl+f 로 클래스가 target인 태그를 계속 찾아서 style = "color:red" 를 복&붙 해야겠죠....?

      하지만 var target = document.getElementById('target')
      target.css('color','red') 두줄로 위와 같은 작업을 수행할수 있어서 아닐까요?
      우리는 귀찮은것을 싫어하니까요 ㅎㅎ짧은 제생각이였습니당..
      대화보기
      • Sangmook Kim
        170801 완료
      • ㅋㅋㅋ
        감사합니다~~~~
      • crable
        감사합니다
      • codeX
        감사합니다.
      • 초보개발자
        좋은설명 감사합니다^^
      • 폭스킴
        외국인이라면 attribute와 property가 다른 느낌으로 다가올텐데,
        번역해서 듣는 우리 입장에는 다른걸 같게 느끼게 되는 문제가 있네요.
        마지막 예제로 보면,
        property는 실제적인 성질의 것이라는 느낌이고,
        attribute는 코드가 표현하거나 전달하는 어떤 값의 개념으로 느껴집니다.
        느낌적인 느낌이라;; 믿거나 말거나지만;;
      • 유유
        감사합니다.
      • hyuna
        감사합니다.
      • tachyon
        감사합니다
      • olgierd
        속성은 String 타입, 프로퍼티는 다양한 타입이 될 수 있습니다.
      • 저도초보입니다
        그리고 저도 질문이 있는데

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

        속성방식과 프로퍼티 방식중에 어떤것을 쓰는것이 더 나은것이고 추천되는방식인지...
      • 저도초보입니다..
        디딩 사람구실님 그건 큰따옴표와 작은따옴표는 활용면에서는 차이가 없습니다.
        같은 내용을 뜻하지만 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 공부할 때 정말 밥먹듯이 듣던 단어인데 막상 다를 용어랑 혼합되니깐 태그라는 단어도 새로운 단어처럼 들리더라고요. ㅜ.ㅠ

            객체, 오브젝트, 프로퍼티, 속성... 자주 접하다 보면 정리가 되겠죠?..ㅎ
            그래도 이젠 함수, 변수, 벨류값 등은 이해가 좀 되는군요.
          • 코딩!
            감사합니다!
          • 초바비
            강의 목소리가 변하신거 같네요
            다른 분이신가.
            정말 깔끔한 강의입니다.
          • 호두과자
            감사합니다.^^
          • 땡큐마스터
            감사합니다. 공부 많이 됩니다.
          • 육점이
            항상 감사합니다~!!!!! 좋은 하루 되세요!!
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기