過完聖誕節，接著準備過年。預祝各位讀者：新年快樂！
HTML 元素可以透過 dataset 傳遞資料給 JavaScript 處理，這些屬性會以 data-<keyname>="<value>" 宣告。這篇文章針對 dataset 部分，來做個小小實驗。
取值
宣告一個 <p> 元素作為範例，宣告了幾個 dataset 屬性，接著使用 JavaScript 取得元素：
<p id="data"
data-demo="測試"
data-today="今天"
data-good-day="好天氣"
data-newYear="2024">這是一個 p 元素</p>
<script>
const pElement = document.getElementById('data')
console.log(pElement.dataset)
</script>得到以下結果：
DOMStringMap {demo: '測試', today: '今天', goodDay: '好天氣', newyear: '2024'}Dataset 屬性會把 data- 後面的字串做為 keyname 。以結果來看， keyname 建議使用烤肉串（Kebab case）方式命名，轉換到 JavaScript 後才會是正確的小駝峰（lower camel case）。
賦值
如果先宣告元素，再透過 JavaScript 賦予 dataset 屬性，首先是基本賦值：
<p id="data" data-year="年分" data-today="今天">這是一個 p 元素</p>
<script>
// 取得元素
const pElement = document.getElementById('data')
// 更新值
pElement.dataset.year = '2023'
pElement.dataset['today'] = '20231227'
// 賦予 dataset 屬性與值
pElement.dataset.demo = 'value'
pElement.dataset['test'] = 'value'
console.log(pElement)
</script>從結果得知，賦值與更新沒有問題：
<p id="data" data-year="2023" data-today="20231227" data-demo="value" data-test="value">這是一個 p 元素</p>命名方式
那麼，命名方式呢？
<p id="data">這是一個 p 元素</p>
<script>
// 取得元素
const pElement = document.getElementById('data')
// // 小駝峰與烤肉串
pElement.dataset.lowerCamelCase = '小駝峰'
pElement.dataset.UpperCamelCase = '大駝峰'
// pElement.dataset['with space'] = '空格' // 錯誤
// pElement.dataset['kebab-case'] = '烤肉串' // 錯誤
console.log(pElement)
</script>其中，駝峰式命名可以被正確轉換：
<p id="data" data-lower-camel-case="小駝峰" data--upper-camel-case="大駝峰">這是一個 p 元素</p>那麼，蛇型呢？
<p id="data">這是一個 p 元素</p>
<script>
// 取得元素
const pElement = document.getElementById('data')
// // 小駝峰與烤肉串
pElement.dataset.snake_case_1 = '蛇形'
pElement.dataset['snake_case_2'] = '蛇形'
console.log(pElement)
</script>一樣沒有問題！
<p id="data" data-snake_case_1="蛇形" data-snake_case_2="蛇形">這是一個 p 元素</p>結論
HTML 可以透過 dataset 屬性傳遞自訂資料給 JavaScript 進行處理，使用烤肉串命名法會轉換成小駝峰到 JavaScript 中。
若從 JavaScript 產生 dataset 屬性，符合 JavaScript 變數命名方式便可正確賦予。
給予回饋