JavaScript lit le texte et les attributs dans les éléments de la page Web

JavaScript fournit des méthodes pour lire le texte et les attributs des éléments de page Web, notamment : Lecture de texte : innerText, textContent, value Obtention d'attributs : getAttribute, dataset, style

JavaScript lecture de texte et d'attributs dans les éléments de page Web

Introduction

JavaScript fournit une variété de méthodes pour lire et manipuler le texte et les attributs dans les éléments d'une page Web. Cet article explorera différentes méthodes et fournira des exemples pratiques pour illustrer leur utilisation.

Lire le contenu du texte

innerText : obtenez le texte visible dans l'élément, y compris les éléments enfants.

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

textContent : similaire à innerText, mais obtient également du texte masqué.

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

value : obtenez la valeur actuelle des éléments de formulaire tels que les zones de saisie et les zones de texte.

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

Get attribues

getAttribute(name) : récupère la valeur de l'attribut spécifié.

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

dataset : accédez aux attributs de données préfixés par data-.

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

style : Accédez aux propriétés de style CSS.

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

Cas pratique

Obtenir le titre de la page

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

Définir la valeur d'entrée du formulaire

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

Lire l'attribut data du bouton

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

Obtenir l'élément basé sur la classe CSS

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

Conclusion

Propulsé par JavaScript Des outils puissants pour lire et manipuler le texte et les attributs des éléments de page Web. Comprendre ces méthodes est essentiel pour manipuler et manipuler dynamiquement le contenu DOM. À l’aide des exemples pratiques fournis ci-dessus, vous pouvez facilement appliquer ces techniques à vos propres projets.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!