자바스크립트에서의 사용자 정의 속성

HTML에서는 태그에 자신만의 사용자 정의 속성을 추가하는 것이 허용됩니다. 이러한 속성은 data-로 시작해야 하며, 그 뒤에는 여러분이 편리한 어떤 속성 이름이든 올 수 있습니다.

사용자 정의 속성은 매우 다양한 방식으로 사용될 수 있습니다. 이러한 방법들 중 많은 부분을 우리는 앞으로 자습서에서 배울 것이며, 더 많은 것들은 여러분이 추가로 직접 발명해 낼 수 있을 것입니다.

이러한 속성에 접근하는 방식은 표준적인 방식이 아닙니다. 이전에 하던 것처럼 요소의 동일한 이름을 가진 속성에 단순히 접근할 수는 없으며, 특별한 속성 dataset을 사용해야 합니다, 그 뒤에 점을 찍고 data-를 뺀 속성 이름을 씁니다. 예를 들어, 우리의 속성이 data-test라면, 이에 접근하기 위해 우리는 elem.dataset.test라고 쓸 것입니다, 여기서 elem는 우리 요소를 가진 변수입니다.

예제를 통해 살펴봅시다. 우리에게 다음과 같은 요소가 주어졌다고 가정해 봅시다:

<div id="elem" data-num="1000"></div>

그의 속성 data-num의 값을 화면에 출력해 봅시다:

let elem = document.querySelector('#elem');
console.log(elem.dataset.num); // 1000을 출력함

이제 이 속성에 다른 값을 할당해 봅시다:

let elem = document.querySelector('#elem');
elem.dataset.num = 123;

다음 코드가 주어졌습니다:

<div id="elem" data-text="str">text</div>

div를 클릭했을 때 그의 텍스트 끝에 그의 속성 data-text의 내용이 추가되도록 하세요.

속성 data-num에 자신의 순서 번호를 포함하고 있는 div들이 주어졌습니다:

<div data-num="1">text</div>
<div data-num="2">text</div>
<div data-num="3">text</div>
<div data-num="4">text</div>
<div data-num="5">text</div>

어떤 div를 클릭하든 그 끝에 그의 순서 번호가 기록되도록 하세요.

버튼이 주어졌습니다. 이 버튼이 클릭 횟수를 세어서 어떤 사용자 정의 속성에 기록하도록 하세요. 다른 버튼을 클릭했을 때 화면에 첫 번째 버튼이 클릭된 횟수가 출력되도록 하세요.

input이 주어졌습니다:

<input id="elem" data-length="5">

이 input에서 속성 data-length에는 input에 입력해야 하는 문자의 수가 들어 있습니다. 포커스를 잃었을 때, 입력된 문자의 수가 지정된 것과 일치하지 않으면 이에 대한 메시지가 출력되도록 하세요.

input이 주어졌습니다:

<input id="elem" data-min="5" data-max="10">

이 input에서 속성 data-min과 data-max에는 범위가 들어 있습니다. 포커스를 잃었을 때, 입력된 문자의 수가 이 범위에 들어가지 않으면 이에 대한 메시지가 출력되도록 하세요.