javascript 提供了讀取網頁元素文本和屬性的方法，包括：讀取文本：innertext、textcontent、value獲取屬性：getattribute、dataset、style
JavaScript 讀取網頁元素中的文本和屬性
簡介
JavaScript 提供了多種方法來讀取和操作網頁元素中的文本和屬性。本文將探討不同的方法并提供實戰案例來說明它們的用法。
讀取文本內容
innerText：獲取元素中可見文本，包括子元素。
let text = document.getElementById("element").innerText;
登錄后復制
textContent：與 innerText 類似，但也會獲取隱藏文本。
let text = document.getElementById("element").textContent;
登錄后復制
value：獲取表單元素（如輸入框和文本區域）的當前值。
let value = document.querySelector("input[type=text]").value;
登錄后復制
獲取屬性
getAttribute(name)：獲取指定屬性的值。
let href = document.getElementById("link").getAttribute("href");
登錄后復制
dataset：訪問帶有 data- 前綴的數據屬性。
let username = document.querySelector("user-profile").dataset.username;
登錄后復制
style：訪問 CSS 樣式屬性。
let color = document.getElementById("element").style.color;
登錄后復制
實戰案例
獲取頁面標題
const title = document.querySelector("head title").innerText;
console.log(title); // 輸出：我的網站
登錄后復制
設置表單輸入值
document.querySelector("input[name=name]").value = "John Doe";
登錄后復制
讀取按鈕的 data 屬性
const button = document.querySelector("button");
const action = button.dataset.action;
console.log(action); // 輸出：show-details
登錄后復制
基于 CSS 類獲取元素
const elements = document.querySelectorAll(".error");
elements.forEach((element) => {
console.log(element.innerText);
});
登錄后復制
結論
JavaScript 提供了強大的工具來讀取和操作網頁元素的文本和屬性。了解這些方法對于動態操作和操縱 DOM 內容至關重要。利用上面提供的實戰案例，您可以輕松地將這些技術應用到自己的項目中。
