JQuery 의 속성 관리 .data() 와 .attr()

난감하게도 여지껏 같은 데이터의 관리인줄 알았네요.

가령

의 element가 있을 경우,

console.log($('#DIV_testId').data('type-id')); console.log($('#DIV_testId').attr('data-type-id'));

의 값은 모두 '0010101'이 출력됩니다. 그래서 .data()와 .attr()은 동일하다 생각하고 다음과 같이 속성을 동적으로 추가합니다. $('#DIV_testId').attr('data-type-name', '추가');

결과를 보면,

로 이상없이 추가되어 출력됩니다. 이렇게 attr(..)로 추가된 속성을 콘솔로 찍어보면 잘나옵니다.

console.log($('#DIV_testId').attr('data-type-name')); >> '추가'

그러나 이것을 data로 보면 결과는 나오지 않네요.

console.log($('#DIV_testId').data('type-name')); >> ''

결과적으로 동적으로 속성을 추가할 경우 .data(..) 와 .attr(..)는 다르다. 하나로만 관리하자라는 결론. 근데 왜지????

2개의 의견 from SLiPP

data 는 파라메터로 오브젝트를 받을 수 있습니다. 즉 엘리먼트의 속성으로 추가 되는게 아니라 해당 엘리먼트 객체(실제는 JQuery 객체의...)의 속성 으로 들어가게 되죠...

반면 attr 은 엘리먼트의 속성으로 추가 됩니다.

$('body').data('xxxx',{test:'123213'}) $('body').data('yyyy',000000) 하시고 $('body').data() 해보시면 느낌이 오실듯

추가로 아래도...

$('body').data({test:234234,aaa:{ds:23423}}) $('body').attr({test:234234,aaa:{ds:23423}})

.data()로 불러온 값과 .attr()로 불러온 값은 서로 타입이 다를수도 있음다 + _ +: (string||number) 저는 html 엘리먼트의 어트리뷰트를 읽어올때는 attr()로 통일하고 필요한 부분에선 명시적으로 타입캐스팅 하는것을 추천합니다.

SNS공유