JavaScript 讀取網頁元素中的文字和屬性

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 內容至關重要。利用上面提供的實戰案例，您可以輕鬆地將這些技術應用到自己的專案中。

以上是JavaScript 讀取網頁元素中的文字和屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！