이전 글 까지만해도 표준 속성을 사용하여 HTML 태그의 속성을 다루었다.
하지만 자바스크립트로 태그를 다루다보면 아래와 같이 표준이 아닌 속성을 사용할 때가 있다.
<body UnkillableDemonKing="faker">
<script>
alert(document.body.getAttribute('UnkillableDemonKing')); // 비표준 속성 접근방식
</script>
</body>
이러한 비표준 속성을 어떤 식으로 다룰 수 있는지 확인해보자.
▼ HTML, CSS, JavaScript 문서
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>Progream : <b field="title"></b></p>
<p>Name : <b field="name"></b></p>
<p>status : <b field="status"></b></p>
<div>
상태 변경:
<button class="btn" status="방해금지">방해금지</button>
<button class="btn" status="게임중">게임중</button>
<button class="btn" status="접속중">접속중</button>
</div>
<script src="index.js"></script>
</body>
</html>
[status] {
padding: 5px 10px;
}
[status="방해금지"] {
background-color: #FF6767;
color: #FFFFFF;
}
[status="게임중"] {
background-color: #5f62ff;
color: #FFFFFF;
}
[status="접속중"] {
background-color: #07c456;
color: #FFFFFF;
}
※CSS에서 대괄호를 이용한 css 선택자는
[속성이름]처럼 대괄호를 이용하면 대괄호 안에있는 속성이름을 가진 태그들을 선택할 수있고
[속성이름="값"] 처럼 작성하면 구체적으로 속성이름에 해당 값을 가진 태그들을 선택할 수 있다.
비표준 속성 활용하기
▼ 선택자로 활용
간단한 방법으로 아래와 같이 querySelector로 태그를 선택할 때
css 선택자를 활용해서 태그를 선택하는데에 활용할 수 있다.
const fields = document.querySelectorAll('[field]');
console.log(fields);
▼ 값을 표시할 태그를 구분할 때 활용
비표준 속성은 객체 형태의 데이터가 있을 때,
각 프로퍼티 값들이 들어갈 태그를 구분하는데 활용할 수 있다.
// 선택자로 활용
const fields = document.querySelectorAll("[field]");
console.log(fields);
//값을 표시할 태그를 구분할 때 활용
const task = {
title: "디스코드",
name: "섭이",
status: "",
};
for (let tag of fields) {
// for..of 반복문을 활용하여 fields의 요소를 할당
const field = tag.getAttribute("field");
tag.textContent = task[field];
}
▼ 스타일이나 데이터 변경에 활용
getAttrubute 메소드를 활용하여 속성값을 가져오고setAttribute 메소드를 활용하여 속성값을 설정해주는 원리로이벤트를 통해 실시간으로 스타일을 변경하거나 데이터를 변경하는데 활용할 수 있다.▷즉 class를 다루는 것보다 setAttrubyte로 비표준 속성을 변경하는게 스타일을 다루는 것도 또 하나의 방법이다.
//비표준 속성 활용하기
// 선택자로 활용
const fields = document.querySelectorAll("[field]");
console.log(fields);
//값을 표시할 태그를 구분할 때 활용
const task = {
title: "디스코드",
name: "섭이",
status: "",
};
for (let tag of fields) {
//for..of 반복문을 활용하여 fields의 요소를 할당
const field = tag.getAttribute("field");
tag.textContent = task[field];
}
//스타일이나 데이터 변경에 활용
const btns = document.querySelectorAll(".btn");
for (let btn of btns) {
const status = btn.getAttribute("status");
btn.onclick = function () {
fields[2].textContent = status;
fields[2].setAttribute("status", status);
};
}
위와 같은 방식으로 하다보면 한가지 디메리트가 존재하는데,
비표준 속성을 사용하여 코드를 작성했다면 시간이 지나서
나중에 그 속성이 표준으로 적용되면 고치려면 고칠 수 있겠지만 양이 많다면 감당할 수 없게된다.
막말로 본문 맨 위에 비표준 속성 접근 방식을 예시로 들었을 때
'UnkillableDemonKing'이라는 비표준 속성이 거짓말같이 표준 속성으로 바뀔 수 있다는것이다. (대-상-혁)
그러한 일에 대비하기 위해 비표준 속성을 사용하기 위해 약속된 속성 방식이 있으며
즉 dataset 프로퍼티 속성을 사용한다.
detaset - (data-*)
'data-' 로 시작하는 속성은 모두 dataset이라는 프로퍼티에 저장되며
위 코드에 적용해본다면 'data-status'라는 속성에
'element.dataset.status'라는 프로퍼티에 접근하여 그 값을 가져올 수 있다
한번 적용해보자
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<!--
<p>Progream : <b field="title"></b></p>
<p>Name : <b field="name"></b></p>
<p>status : <b field="status"></b></p>
-->
<p>Progream : <b data-field="title"></b></p>
<p>Name : <b data-field="name"></b></p>
<p>status : <b data-field="status"></b></p>
<div>
상태 변경:
<!--
<button class="btn" status="방해금지">방해금지</button>
<button class="btn" status="게임중">게임중</button>
<button class="btn" status="접속중">접속중</button>
-->
<button class="btn" data-status="방해금지">방해금지</button>
<button class="btn" data-status="게임중">게임중</button>
<button class="btn" data-status="접속중">접속중</button>
</div>
<script src="index.js"></script>
</body>
</html>
CSS
/* dataset 저장 */
[data-status] {
padding: 5px 10px;
}
[data-status="방해금지"] {
background-color: #ff6767;
color: #ffffff;
}
[data-status="게임중"] {
background-color: #5f62ff;
color: #ffffff;
}
[data-status="접속중"] {
background-color: #07c456;
color: #ffffff;
}
JavaScript
//비표준 속성 활용하기
// 선택자로 활용
const fields = document.querySelectorAll("[data-field]");
console.log(fields);
//값을 표시할 태그를 구분할 때 활용
const task = {
title: "디스코드",
name: "섭이",
status: "",
};
for (let tag of fields) {
//for..of 반복문을 활용하여 fields의 요소를 할당
//const field = tag.getAttribute("field");
const field = tag.dataset.field; //dataset 저장
tag.textContent = task[field];
}
//스타일이나 데이터 변경에 활용
const btns = document.querySelectorAll(".btn");
for (let btn of btns) {
//const status = btn.getAttribute("status");
const status = btn.dataset.status; //dataset 저장
btn.onclick = function () {
fields[2].textContent = status;
//fields[2].setAttribute("status", status);
fields[2].dataset.status = status; //dataset 저장
};
}
이렇게 비표준 속성을 활용하여 안전한 코드를 작성하였다.
▶GitHub
JavaScript_soloPlay/interactive_JS/12.비표준속성 at main · SeopE9611/JavaScript_soloPlay
Contribute to SeopE9611/JavaScript_soloPlay development by creating an account on GitHub.
github.com
'JS' 카테고리의 다른 글
| (14) Interactive JavaScript (Event) - 이벤트 객체 (0) | 2024.11.06 |
|---|---|
| (13) Interactive JavaScript (Event) - 이벤트 핸들러 등록하기 (0) | 2024.11.06 |
| (11) Interactive JavaScript - Style (0) | 2024.10.16 |
| (10) Interactive JavaScript - HTML 속성 다루기 (0) | 2024.10.15 |
| (9) Interactive JavaScript - 요소 노드 삭제 및 이동 (0) | 2024.10.14 |