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