<div data-js是HTML中的一個特殊屬性，用于為HTML元素附加自定義的JavaScript數據。這個屬性可以用來存儲JavaScript數據，以便在后續的腳本中進行訪問和操作。div元素是HTML中的一個塊級元素，用于創建一個分隔區塊，而data-js屬性可以在這個區塊中存儲相關的JavaScript數據，以實現更加靈活和可維護的代碼。
在下面的幾個代碼案例中，我將詳細解釋和演示如何使用<div data-js屬性來存儲和操作JavaScript數據。
案例一：存儲和訪問數據 我們可以使用<div data-js屬性來存儲相關的數據，并在后續的JavaScript代碼中訪問和操作這些數據。下面是一個簡單的示例，我們創建一個div元素，并使用data-js屬性存儲一個名為"username"的數據：

<div data-js="user">
<h1>Welcome to my website</h1>
</div>

在JavaScript代碼中，我們可以使用dataset屬性來獲取并操作這個data-js屬性中的數據：

var userDiv = document.querySelector('[data-js="user"]');
var username = userDiv.dataset.js;
console.log(username); // 輸出：user

上述代碼中，我們通過querySelector方法選中具有data-js="user"屬性的div元素，然后使用dataset.js屬性獲取其中存儲的數據，最后將數據輸出到控制臺。
案例二：動態修改數據 除了讀取數據，我們還可以使用<div data-js屬性來動態修改這些數據，實現更加靈活的代碼。下面是一個例子，我們通過點擊按鈕來動態修改div元素中存儲的數據：

<div data-js="counter">0</div>
<button onclick="increaseCounter()">Increase Counter</button>
<br>
<script>
function increaseCounter() {
var counterDiv = document.querySelector('[data-js="counter"]');
var counter = parseInt(counterDiv.innerHTML);
counter++;
counterDiv.innerHTML = counter;
}
</script>

上述代碼中，我們創建了一個存儲計數器的div元素，并使用data-js屬性存儲相關的數據，初始值為0。當點擊按鈕時，事件處理函數increaseCounter()會被調用，獲取div元素中存儲的計數器數據，將其增加1，并將結果更新到div元素中。
這些案例都展示了如何使用<div data-js屬性來存儲和操作JavaScript數據。通過合理使用這個屬性，我們可以讓代碼更加清晰、可維護，并且實現更好的靈活性和可擴展性。
參考鏈接： - https://www.sitepoint.com/a-basic-html5-template/ - https://css-tricks.com/a-complete-guide-to-data-attributes/