data 메서드

data 메서드는 모든 유형의 데이터를 DOM 요소에 메모리 누수를 방지하는 안전한 방법으로 연결할 수 있게 합니다. 하나의 요소에 대해 여러 개의 서로 다른 값을 설정하고 나중에 가져올 수 있습니다. data 메서드를 사용하여 데이터를 업데이트해도 DOM의 속성에는 영향을 미치지 않습니다.

구문

다음은 특정 요소에 값을 설정하고, 나중에 찾을 수 있는 키를 지정하는 방법입니다:

.data(key, value);

데이터를 업데이트하기 위한 키-값 쌍을 포함하는 객체를 전달할 수도 있습니다:

.data(object);

키만 전달하여 jQuery 컬렉션의 첫 번째 요소와 연결된 데이터를 가져올 수 있습니다:

.data(key);

매개변수를 전달하지 않으면 이전에 DOM 요소와 연결된 데이터를 읽을 수 있습니다. 이 메서드는 각 값을 속성으로 포함하는 JavaScript 객체를 반환합니다:

.data();

예제

data를 사용하여 p 태그에 데이터를 설정해 보겠습니다. 첫 번째 매개변수로 'test'를, 두 번째 매개변수 값으로 21를 전달합니다. 그런 다음 키 'test'로 저장된 데이터를 읽어옵니다:

<p>텍스트</p>

$('p').data('test', 21); // 데이터 쓰기

console.log($('p').data('test')); // 숫자 21 출력
console.log($('p').data()); // 객체 {test: 21} 출력

함께 보기

요소에서 데이터를 제거하는 removeData 메서드
요소에 데이터가 있는지 확인하는 hasData 메서드
요소의 모든 속성을 가져오거나 변경할 수 있는 attr 메서드
태그에 사용자 정의 속성을 추가할 수 있는 JavaScript 속성 dataset