Explication détaillée de la façon dont JavaScript exploite les attributs, les styles et les noms de classe des éléments

DOM - Modèle d'objet de document

Un ensemble complet d'attributs et de méthodes pour faire fonctionner le flux de documents

• Balises de page d'opération (éléments)
  Ajout, suppression, modification et vérification de balise d'opération
  Attributs de balise d'opération (id, classe, type, …)
  Manipuler le style des balises
  …

• Découvrez du contenu
  -document : flux de document, page, nœud racine, mais pas élément (tag)
  -html : le plus grand élément qui porte toutes les balises, nœud d'élément racine
  -head : porte spécifiquement la balise de description de la page en cours, le contenu ici n'est généralement pas affiché sur la page
  -body : porte spécifiquement la balise d'affichage de la page en cours, le contenu qui est effectivement affiché sur la page web

Récupérer l'élément

Utiliser une variable pour enregistrer un ou plusieurs éléments dans la page
Les méthodes d'obtention des éléments sont divisées en deux catégories
1. Récupérer des éléments non conventionnels

• html: document .documentElement
• head : document.head
• body : document body

2. Obtenir des éléments réguliers

• Obtenir des éléments basés sur l'identifiant
  Syntaxe : document.getElementById
  Valeur de retour : s'il existe un élément correspondant à id sur la page, alors c'est cet élément, sinon, il est nul

• Selon Get elements by class name
  Syntaxe : document.getElementsByClassName('Element class name')
  Valeur de retour : doit être un pseudo array
  S'il y a des éléments correspondant au nom de la classe sur la page, récupérez-en autant que possible et mettez-les dans le pseudo tableau Return
  S'il n'y a aucun élément correspondant au nom de la classe sur la page, alors c'est un vide pseudo tableau

• Obtenir des éléments en fonction du nom de la balise
  Syntaxe : document.getElementsByTagName('Tag Name')
  Valeur de retour : Doit être un pseudo tableau
  S'il y a des éléments correspondant au nom de la balise sur la page, puis récupérez-en autant qu'il y en a et mettez-les dans un pseudo tableau et retournez
  S'il n'y a aucun élément correspondant au nom de la balise sur la page, alors ce sera un pseudo tableau vide

• Récupérez-le selon le sélecteur A label
  Syntaxe : document.querySelector('selector')
  Valeur de retour : S'il y a un élément correspondant au sélecteur sur la page, alors le premier élément correspondant au sélecteur est retourné
  S'il n'y a aucun élément correspondant au sélecteur sur la page, alors C'est nul

• Obtenir un ensemble de balises basé sur le sélecteur
  Syntaxe : document.querySelectorAll('selector')
  Valeur de retour : doit être un pseudo-tableau
  S'il y a des éléments correspondant au sélecteur sur la page, combien sont obtenus Combien, mettre dans un pseudo tableau et retourner
  S'il n'y a aucun élément correspondant au sélecteur sur la page, alors c'est un pseudo tableau vide

Manipulation des styles d'éléments

• Il existe trois façons de manipuler les styles d'éléments dans JS
  1. Obtenez le style en ligne de l'élément (seul le style en ligne peut être obtenu)
  2. Obtenez le style non en ligne de l'élément (y compris en ligne et non en ligne)
  3. Définissez le style de l'élément (seul le style en ligne peut être défini)
  Remarque : implique le soulignement. Lorsque le nom du style est
  converti en casse camel
  utilisez la syntaxe d'association de tableau

• pour obtenir le style en ligne de l'élément
  Syntaxe : nom element.style.style

console.log(ele.style.width)
console.log(ele.style.height) // 非行内样式
console.log(ele.style.fontSize)
console.log(ele.style['font-size'])

• ·Obtenir le style non-inline de l'élément
  Syntaxe : window getComputedStyle (élément pour obtenir le style).Nom du style

console.log(window.getComputedStyle(ele).width)
console.log(window.getComputedStyle(ele).height)
console.log(window.getComputedStyle(ele).fontSize)
console.log(window.getComputedStyle(ele)['background-color'])

• Définir le style de l'élément (seul le style en ligne peut être défini)
  Syntaxe : element.style.Style name = style value

ele.style.backgroundColor = 'red'

Operation element class name

Objectif : Changer les styles par lots

• className
  Opération des attributs natifs
  Parce qu'il y a une clé dans JS appelée class, afin d'éviter en le renommant, il s'appelle className
  Remarque : La valeur du nom de classe est une chaîne, mais la chaîne peut contenir plusieurs Chaque nom de classe

• classList
  Chaque nœud d'élément a un attribut appelé classList
  C'est une structure de données similaire à un groupe, qui stocke tous les noms de classe de l'élément
  L'ajout, la suppression, la modification et la requête sont toutes des opérations sur classList. Donnez une API dédiée
  Ajoutez : element.classList.add(class name)
  Supprimez : element.classList. remove(class name)
  Switch : element.classList.toggle(class name)
  - Supprimer s'il est là à l'origine, s'il n'y est pas avant. Ajoutez simplement

Recommandations associées : [Tutoriel vidéo JavaScript]

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!