JavaScript liest Text und Attribute in Webseitenelementen

JavaScript bietet Methoden zum Lesen von Text und Attributen von Webseitenelementen, einschließlich: Lesen von Text: innerText, textContent, value Abrufen von Attributen: getAttribute, Datensatz, Stil

JavaScript liest Text und Attribute in Webseitenelementen

Einführung

JavaScript bietet eine Vielzahl von Methoden zum Lesen und Bearbeiten von Text und Attributen in Webseitenelementen. In diesem Artikel werden verschiedene Methoden untersucht und praktische Beispiele zur Veranschaulichung ihrer Verwendung bereitgestellt.

Textinhalt lesen

innerText: Ruft den sichtbaren Text im Element ab, einschließlich untergeordneter Elemente.

let text = document.getElementById("element").innerText;

textContent: Ähnlich wie innerText, erhält aber auch versteckten Text.

let text = document.getElementById("element").textContent;

value: Ermittelt den aktuellen Wert von Formularelementen wie Eingabefeldern und Textbereichen.

let value = document.querySelector("input[type=text]").value;

Get attributes

getAttribute(name): Ruft den Wert des angegebenen Attributs ab.

let href = document.getElementById("link").getAttribute("href");

Datensatz: Zugriff auf Datenattribute mit dem Präfix data-.

let username = document.querySelector("user-profile").dataset.username;

style: Zugriff auf CSS-Stileigenschaften.

let color = document.getElementById("element").style.color;

Praktischer Fall

Holen Sie sich den Seitentitel

const title = document.querySelector("head title").innerText;
console.log(title); // 输出：我的网站

Legen Sie den Formulareingabewert fest

document.querySelector("input[name=name]").value = "John Doe";

Lesen Sie das Datenattribut der Schaltfläche

const button = document.querySelector("button");
const action = button.dataset.action;
console.log(action); // 输出：show-details

Rufen Sie das Element basierend auf der CSS-Klasse ab

const elements = document.querySelectorAll(".error");
elements.forEach((element) => {
  console.log(element.innerText);
});

Fazit

Powered by JavaScript Leistungsstarke Tools zum Lesen und Bearbeiten des Textes und der Attribute von Webseitenelementen. Das Verständnis dieser Methoden ist für die dynamische Bearbeitung und Bearbeitung von DOM-Inhalten von entscheidender Bedeutung. Anhand der oben aufgeführten praktischen Beispiele können Sie diese Techniken problemlos auf Ihre eigenen Projekte anwenden.

Das obige ist der detaillierte Inhalt vonJavaScript liest Text und Attribute in Webseitenelementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!