# dataset

```html
<li class="tab-button" data-id="0">Products</li>
```

dataset은 화면에서 보이지 않게 데이터를 숨겨 둘 수 있는 방법으로 HTML5에서 새로 확장된 속성

```javascript
document.querySelector('.tab-button').dataset.id;
// 출력 결과 '0' 
```

{% code title="js011.html" %}

```html
<li class="tab-button" data-id="0">Products</li>
<li class="tab-button orange" data-id="1">Information</li>
<li class="tab-button" data-id="2">Shipping</li>
```

{% endcode %}

{% code title="app.js" %}

```javascript
$('.list').click(function(e){
  tabOpen(e.target.dataset.id);
})
```

{% endcode %}

이렇게 하면 기존의 코드보다 많이 줄여서 작성할 수 있다.

기존의 방법대로 해도 괜찮지만 내가 짠 소스코드를 어떻게 하면 더 줄이고&#x20;

가독성을 좋게 할 수 있나 고민하는게 실력향상에 많은 도움이 된다.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://leeans-dev-book.gitbook.io/docs/lecture/javascript/dataset.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
