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

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

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

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

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

<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>

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