[jQuery] .data() vs .attr()

jQuery 공식 홈페이지에서 정의하는 .data() 와 .attr() 스펙

• .data() : https://api.jquery.com/jQuery.data/#jQuery-data-element-key-value
• .attr() : https://api.jquery.com/attr/#attr-attributeName

 

공식 홈페이지에서 정의한 내용에 덧붙여 실무하면서 알게 된 사실을 적어보고자 한다 :)

	.data()	.attr()
리턴 객체 데이터 타입	Object	String
DOM 변경 여부	X	O
서로 다른 데이터 접근	X	X

1. 리턴 객체 데이터 타입

• .data() : Object
  • 금액 계산을 하려면 typepf 로 현재 데이터 타입을 판단하고 parseInt 를 해야 한다.
• .attr() : String
  • 금액 계산을 하려면 parseInt 를 하면 된다. 

 

2. DOM 변경 여부

• .data()
  • $obj.data("test", 123)
  • 해당 엘리먼트에 data-test 값을 123 으로 변경을 해줘도 DOM 에 표시되는 영역에선 바뀌지 않는다. (=정보은닉)
• .attr()
  • $obj.attr("data-test", 123)
  • 해당 엘리먼트에 data-test 값을 123 으로 변경하면 DOM 에 표시되는 영역에서도 함께 변경된다. (=디버깅 수월)

 

3. 서로 다른 데이터 접근

• .data() 로 값을 변경하는건 .attr() 로 가져올 수 없고
• .attr() 로 값을 변경하는건 또한 .data() 로 가져올 수 없다.
• 즉, 한 엘리먼트의 값을 컨트롤 할 때에는 .data() 또는 .attr() 하나만 사용하여 접근하도록 하자 :)