본문 바로가기
03. 웹 표준 기술/JavaScript

[자바스크립트] 14. Data 속성 (Data Attribute)

by moca7 2024. 8. 20.

 

 

ㅁ data 속성

- HTML 구성 요소의 데이터를 저장하기 위한 속성으로 data-* 작성할 수 있다. (속성명은 마음대로 부여)

- 모든 data-* 속성은 알게 모르게 DOM의 dataset이라는 속성(property)에 저장됨.

 

 

           HTML Attribute                   DOM Property
       1) data-aaa=""                  dataset.aaa
       2) data-aaa-bbb=""          dataset.aaaBbb  (dash 구분자는 자동으로 camel-cased 처리됨)
       3) data-aaaBbb=""           dataset.aaabbb  (대문자는 소문자로 처리됨)

 

 

- (요소에 작성할 때) dash 기준으로 여러 단어 표기 가능. 낙타 표기법으로도 쓸 수는 있다.

- html 내에 직접적으로 작성하면 attribute. 이게 실제 DOM 객체의 property에도 저장이 된다.

그때는 dataset이라는 property 내에 또 속성으로 저장된다.

- property는 두 단어 이상의 경우 낙타 표기법으로 표현한다.

- Attribute의 dash 구분자는 Property에서 camel case화 된다.

- HTML 내에 낙타 표기법 형태로 대소문자를 섞어서 작성한 경우, property에는 무조건 소문자로 처리돼서 저장된다.

 

- 생각보다 data 속성 굉장히 유용하다.

나중에 DB로부터 조회된 데이터를 특정 요소(화면)에 노출 시키고 싶지는 않은 경우

어딘가에 숨겨두고자할 때 사용할 수 있다.

html 요소 내에 데이터를 숨겨뒀다가 나중에 필요하면 값을 가져와서 스크립트 측에서 활용할 수 있다.

 

 

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="div1">TOM</div>
    <div id="div2">JESSICA</div>


    <script>
    </script>
   
</body>
</html>
 

 

- body 태그 안에 div 요소가 2개 있다.

- div 요소에 TOM이라는 사람에 대한 정보를 기록해 두고 싶다. 이때 HTML 속성으로 기록할 수 있다.

즉 요소에 특정 데이터를 저장시키기 위한 속성으로 "data-속성명"을 작성할 수 있다.

 

 

 

 

ㅁ id가 div1인 요소의 데이터 속성값 가져오기

 

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="div1" data-name="tom" data-age="30" data-home-address="newyork">TOM</div>
    <div id="div2">JESSICA</div>


    <script>

        //  id가 div1인 요소의 데이터 속성값을 가져와본다.
       
        const div1 = document.getElementById('div1');
        console.log('data-name : ', div1.dataset.name);
        console.log('data-age : ', div1.dataset.age);
        console.log('data-home-address : ', div1.dataset.homeAddress);  // 두 단어 이상이면 낙타 표기법으로
 

    </script>

   
</body>
</html>
 

 

 

 

 

ㅁ id가 div2인 요소에 동적으로 데이터 속성 부여하기

 

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="div1" data-name="tom" data-age="30" data-home-address="newyork">TOM</div>
    <div id="div2">JESSICA</div>


    <script>

        //  id가 div1인 요소의 데이터 속성값을 가져와본다.

        const div1 = document.getElementById('div1');
        console.log('data-name : ', div1.dataset.name);
        console.log('data-age : ', div1.dataset.age);
        console.log('data-home-address : ', div1.dataset.homeAddress);  // 두 단어 이상이면 낙타 표기법으로

       

        //  id가 div2인 요소에 동적으로 데이터 속성 부여하기
        const div2 = document.getElementById('div2');
        div2.dataset.mobile = '010-1111-1111';
        div2.dataset.dayOfBirth = '1990-01-01';

    </script>

   
</body>
</html>
 

 

브라우저와 콘솔창은 똑같다.

 

 

 

- 기존에 없는 데이터 속성을 내가 스크립트 코드로 추가하고 싶다면

그때도 똑같이 프로퍼티에 접근해서 값을 대입하면 된다.

- 있으면 변경되고 없으면 추가된다.

 

 

 

ㅁ html 태그 내에 대소문자를 섞어서 데이터 속성을 작성한 경우

 

 
    <div id="div1" data-name="tom" data-aGe="30" data-home-address="newyork">TOM</div>
 

 

 

 

 

- html 태그 내에 attribute를 대소문자를 섞어서 데이터 속성을 부여해도 

실제로는 소문자로 반영되어 있다. 

그래서 가져올 때도 소문자로 가져와야 한다. 

- dash 구분자를 쓰면 실제로는 camel case화 된다.

 

 

'03. 웹 표준 기술 > JavaScript' 카테고리의 다른 글

13. BOM  (0) 2024.08.19
12. 정규 표현식  (0) 2024.08.19
[자바스크립트] 복습2  (0) 2024.08.16
[자바스크립트] 실습문제4 - 함수, 객체 실습문제  (0) 2024.08.14
[자바스크립트] 11. event + 정규표현식 맛보기  (0) 2024.08.14

관련글

티스토리툴바