본문 바로가기

Tech/JavaScript

[jQuery] attr(), prop() 비교 및 차이

 

jQuery attr() 메서드와 prop() 메서드의 차이점

attr()과 prop() 차이를 말하기 전 우선 특성(attribute)속성(property) 의 차이를 알아보자

1. 특성(attribute)

1). attribute는 html문서에서 elements 에 추가적인 정보를 입력할 때 사용되는 요소

ex) <div class="target"></div>

위의 예제에서 div태그의 정보를 아래와 같이 정의할 수 있다

  • div: element(요소)
  • class: attribute(속성)
  • target: class attribut(속성)의 value(값)

2. 속성(property)

1). property는 html DOM에서 attribute(속성)을 가리키는 표현
2). 위의 예제를 DOM으로 표현하면 아래와 같이 표현할 수 있음

DIV node 
 |- nodeName = "DIV" 
 |- className = "target" 
 |- ... 
 |- ...
  • DOM 에서는 className이 property(속성)으로 표현된다
  • 즉, html에서 class는 attribute / DOM에서 property를 의미

3. 그렇다면 attr() 과 prop()의 차이점은?

  • attr() 함수는 html의 속성(attribute)값 을 취급
  • prop() 함수는 DOM의 property(속성)값 을 취급
ex) <input value="hello world" />

위의 예제에서 attr()함수와 prop() 함수를 통해 input태그의 값을 가져오게된다면 다음과 같음

  • $(‘input’).attr(‘value’): hello world
  • $(‘input’).prop(‘value’): hello world

하지만 input태그의 value값을 그대로 두고 입력창에 “goodbye world” 텍스트 값을 입력하고 attr() 함수와 prop() 함수를 통해 값을 다시 가져오게 된다면 property(속성)의 값은 바뀐 value값을 가져오게 된다

  • $(‘input’).attr(‘value’): hello world
  • $(‘input’).prop(‘value’): goodbye world

즉, attribute는 정적(변하지 않는) 값을 의미하고 property(속성)은 동적(변하는) 값을 의미한다

 

'Tech > JavaScript' 카테고리의 다른 글

[jQuery] attr(), prop() 비교 및 차이  (0) 2019.05.05
[jQuery] 키보드 이벤트(Keydown, Keypress, Keyup)  (0) 2019.03.10