使用 data-* 屬性來尋找元素

 使用 data-* 屬性來尋找元素，最推薦的方法是使用 document.querySelector() 或 document.querySelectorAll() 搭配 CSS 的 屬性選擇器 (attribute selector)。

最佳方法：document.querySelector()

document.querySelector() 會回傳第一個匹配 CSS 選擇器的元素。如果你的 data-pagename 是唯一的，這是最直接的方法。

CSS 屬性選擇器的語法是 [屬性名稱="屬性值"]。

// 1. 定義你要尋找的 pagename

const pageName = 'daily-page';

// 2. 使用 querySelector 搭配屬性選擇器來尋找元素
// 選擇器 [data-pagename="daily-page"] 的意思是：
// "找到一個元素，它有一個名為 data-pagename 的屬性，且該屬性的值等於 'daily-page'"
const targetElement = document.querySelector(`[data-pagename="${pageName}"]`);

// 3. 檢查是否找到元素並進行操作
if (targetElement) {
    console.log("找到了！", targetElement);
    // 你可以對這個元素做任何事，例如：
    targetElement.style.backgroundColor = 'red'; // 將背景變為紅色
    targetElement.click(); // 模擬點擊這個按鈕
} else {
    console.log(`找不到 data-pagename 為 "${pageName}" 的元素。`);
}
  

程式碼解釋：

• [data-pagename="daily-page"]: 這就是 CSS 屬性選擇器。方括號 [] 用於指定屬性。

• `` (模板字面量): 我使用了模板字面量（反引號）來組合字串 [data-pagename="${pageName}"]。這樣可以方便地將 pageName 變數嵌入到選擇器字串中。你也可以用傳統的字串相加：'[data-pagename="' + pageName + '"]'。

---

如果可能有多個元素符合條件：document.querySelectorAll()

如果你的頁面中可能有多個元素的 data-pagename 相同，你可以使用 document.querySelectorAll()。它會回傳一個包含所有匹配元素的 NodeList (一個類似陣列的集合)。

const pageName = 'tablinks'; // 假設我們用 class name 來找，因為你的例子中 class name 重複了

// 尋找所有 class 為 'tablinks' 的元素
const allTablinks = document.querySelectorAll('.tablinks');

console.log(allTablinks); // 會回傳一個 NodeList，包含三個 <button> 元素

// 你可以使用 forEach 來遍歷這個 NodeList
allTablinks.forEach(button => {
    console.log("按鈕的 pagename 是:", button.dataset.pagename); // 讀取 data 屬性

    // 可以在這裡加上判斷
    if (button.dataset.pagename === 'summary-page') {
        button.style.color = 'blue'; // 將 "清單" 按鈕的文字變為藍色
    }
});
  

讀取 data-* 屬性的值

找到元素後，如果你想讀取它的 data-pagename 值，可以使用 .dataset 屬性。

.dataset 會將 data- 後面的部分（以駝峰式命名法）作為屬性名。

• data-pagename -> element.dataset.pagename

• data-user-id -> element.dataset.userId

const button = document.querySelector('[data-pagename="countdown-page"]');

if (button) {
    // 讀取 data-pagename 的值
    const pagenameValue = button.dataset.pagename; 
    console.log(pagenameValue); // 輸出 "countdown-page"
}
  

總結

你的需求	推薦方法	範例
找到第一個符合條件的元素	document.querySelector()	document.querySelector('[data-pagename="daily-page"]')
找到所有符合條件的元素	document.querySelectorAll()	document.querySelectorAll('[data-pagename="some-value"]')
找到元素後，讀取其 data 屬性	element.dataset.屬性名	const name = element.dataset.pagename;