Dataset 과 속성 선택자

KHW·2021년 7월 29일

자바스크립트

Javascript 지식쌓기

목록 보기

65/95

1. 속성선택자

속성 선택자를 사용하면 특정 속성이나 특정 속성값을 가지고 있는 HTML 요소를 선택할 수 있습니다.

사용방법

[속성이름] 선택자

[속성이름="속성값"] 선택자

속성선택자 예시

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Attribute</title>
	<style>
		[title] {
			background: black;
			color: yellow;
		}
      
      [title="first p"]{
        	background: red;
      }
	</style>
</head>

<body>

	<h1>[속성] 선택자를 이용한 선택</h1>
	<h2 title="first h2">이 제목은 title 속성을 가지고 있습니다!</h2>
	<h3>이 제목은 title 속성을 가지고 있지 않습니다!</h3>
	<p title="first p">이 단락은 title 속성을 가지고 있습니다!</p>
	<p title="second p">이 단락은 title 속성을 가지고 있습니다!</p>

</body>

</html>

[title]로 인해 2,4,5번째만 적용되고

[title="first p"]로 인해 4번째가 추가 적용된다.

2. dataset

data-* 속성은 표준이 아닌 속성이나 추가적인 DOM 속성, Node.setUserData()과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있도록 해줍니다.

css에서 사용

<style>
[data-id]{
    width:100px;
    height:100px;
    background-color:red;
}
[data-member-id]{
    width:100px;
    height:100px;
    background-color:blue;
}
</style>
<div data-id="hika"></div>
<div data-member-id="k123"></div>
</body>

각각의 정사각형 파란 빨간색이 완성된다.

js에서 사용

1) getAttribute

<!DOCTYPE html>
<meta charset="utf-8">
<title>헤더 요소</title>

<div data-id="hika" d="kk"></div>
</body>
<script>
const a = document.querySelectorAll('div');
console.log(a[0].getAttribute('data-id'));	//hika
</script>

2) dataset.대상

<!DOCTYPE html>
<meta charset="utf-8">
<title>헤더 요소</title>

<div data-id="hika"></div>
<div data-id-name="hika"></div>
</body>
<script>
const a = document.querySelectorAll('div');
console.log(a[0].dataset.id);		//hika
console.log(a[1].dataset.idName);		//hika
</script>

사용할때 Dom.dataset.지정내용 형태로 작성하되 연속된 -의 경우 그 후는 idName처럼 대문자로 연결 짓는다.

3) 해당 태그 찾는 querySelector

<!DOCTYPE html>
<meta charset="utf-8">
<title>헤더 요소</title>

<div data-id="hika"></div>
<div data-id-name="hika"></div>
</body>
<script>
console.log(document.querySelector('[data-id]'))	//<div data-id="hika"></div>
console.log(document.querySelector('[data-id-name]'))	//<div data-id-name="hika"></div>
</script>

querySelector를 이용해 대상을 찾고 싶다면 속성 선택자 처럼
[대상속성]으로 처리해줘야한다.

정리

data-대상1-대상2와 같은 기술로 HTML5에 생겨서 js로 해당 값을 참고하고싶을 때 Dom.dataset.대상1대상2 형태로 참고도 가능하다.
이를 속성선택자를 통해 js에서는 querySelector('[data-대상1-대상2]')를 통해 확인 할 수 도 있고
css에서는
[data-대상1-대상2]{ ... } 형태로 태그의 처리도 가능하다.