[jQuery기초] 요소조작_이벤트_data, removeData, attr, removeAttr, prop, removeProp

jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 
실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다.

 

data

일치하는 요소의 데이터 저장소의 값을 설정하거나 가져올 수 있다. 
빈 값으로 호출하게되면 데이터 저장소에 저장된 모든 key, value값을 가져온다. 
data 메서드를 통해 DOM에 데이터 값을 업데이트해도 DOM 속성에는 영향을 미치지 않는다. 
data-* 속성 값을 설정하려면 attr을 사용하면된다. 
removeData 메서드를 통해 데이터 저장소의 값을 제거할 수 있다.

// HTML 
<div id="box" data-type="tag"></div> 

// jQuery 
// tag 반환 
$('#box').data('type'); 

// color의 데이터 값은 red로 설정됨
$('#box').data('color', 'red'); 

 

removeData

data 속성으로 설정한 값을 제거할 수 있다. 
removeData제거 후 data 메서드를 사용할 경우 data-* 속성을 재 검색하기 때문에 removeAttr을 사용한다.

// HTML 
<div id="box" data-type="tag"></div> 

// jQuery 
// data-type이 제거되지 않음 
$('#box').removeData('type'); 
$('#box').data();

 

attr

입력한 값과 일치하는 속성 값을 가져오거나 추가할때 사용한다. 
attr(attribute)는 prop(property)와는 유사하나 HTML 입장에서의 속성이란 것을 유의해야한다.  
Javasript 속성을 검색하려고 한다면 prop을 사용해야한다.

// Html 
<input id="agree" type="checkbox" checked="checked"> 

//jQuery 
$('#agree').attr('checked'); // checked 반환

 

removeAttr

attr 메서드로 설정한 값이나 HTML에서 추가한 속성 값을 제거할 수 있다.

// HTML 
<div id="box" data-type="tag"></div> 

// jQuery 
// data-type 제거
$('#box').removeAttr('data-type'); 

 

prop

입력한 값과 일치하는 속성 값을 가져오거나 추가할때 사용한다. 
prop(property)는 attr(attribute)와는 유사하나 Javascript 입장에서의 속성이란 것을 유의해야한다.  
HTML 속성을 검색하려고 한다면 attr을 사용해야한다.

// Html 
<input id="agree" type="checkbox"> 

// jQuery 
// false 반환
$('#agree').prop('checked'); 

 

removeProp

prop 메서드로 설정한 값이나 Javascript  속성 값을 제거할 수 있다.

// HTML 
<div id="box"></div> 

// jQuery 
// prop 추가 
$('#box').prop('code', 1234); 

// prop 제거
$('#box').removeProp('code'); 

 

attr VS prop 

attr은 HTML 입장의 속성, prop은 Javascript 입장의 속성이므로 반환 값이나 접근법이 다를 수 있다.  
각자의 속성에 맞게 메소드를 사용한다.  

// Html  
<input id="agree" type="checkbox" checked="checked">  

// jQuery  
// checked 반환  
$('#agree').attr('checked'); 

// true 반환 
$('#agree').prop('checked'); 

* IE 하위브라우저에서 prop을 통해 이미 HTML에 작성한 속성 값을 변경하려고할경우 에러가 난다.