Ensemble de données en HTML

La propriété Dataset peut être utilisée pour récupérer les attributs de données plus simplement. Pour chaque attribut de données personnalisé, cette propriété renvoie un objet DOMStringMap avec juste une entrée. Le concept de lecture seule de l'ensemble de données de l'interface HTML Element nous indique comment accéder en lecture/écriture aux attributs de données personnalisés (data-*) sur les éléments spécifiés. Il propose un mappage de chaînes (DOMStringMap) qui comporte une entrée pour chaque propriété data-*. L'ensemble de données est disponible en DOM et HTML.

Syntaxe :

La syntaxe est déclarée comme

element.dataset.key

Il s'agit de la création minimale d'un ensemble de données.

Les ensembles de données HTML permettent aux utilisateurs d'accéder aux données via des tableaux HTML conventionnels et d'autres balises structurées. Les ensembles de données HTML fonctionnent de la même manière que les ensembles de données XML, à l'exception du fait qu'ils peuvent tirer parti des millions de tableaux qui existent déjà ! L'ensemble de données HTML était une extension évidente car nous aplatissons XML dans une structure de tableau. L'ensemble de données est une propriété native d'un élément qui contient les attributs de données ; il n’est guère pris en charge dans IE11+ et Chrome 8+. Les valeurs des éléments de l'ensemble de données sont généralement des chaînes, bien que data() de jQuery respecte les types fournis par. données (clé, valeur). (Dataset renvoie DOMStringMap, tandis que data() dans jQuery renvoie un objet jQuery.)

Ensemble de données HTML

Les utilisateurs peuvent utiliser des tableaux HTML normaux et un autre balisage structuré comme sources de données avec l'ensemble de données Spry HTML. Les ensembles de données HTML fonctionnent de la même manière que les ensembles de données XML, à l'exception du fait qu'ils peuvent tirer parti des millions de tables disponibles. L'ensemble de données HTML était une extension naturelle du Spry Framework car nous aplatissons XML dans une structure de tableau.

L'ensemble de données HTML est livré avec un ensemble d'utilitaires que vous pouvez utiliser pour le modifier.

• getURL() – Cette fonction renvoie la valeur de l'URL actuelle dans la fonction d'ensemble de données Object() { [code natif] }.
• setURL(“URL”) – Cette fonction spécifie le chemin d'accès au nouveau fichier qui sera utilisé dans l'ensemble de données.
• getSourceElementID() – Obtient l'ID de l'élément de page sur lequel l'ensemble de données est basé.
• setSourceElementID(“theSourceID”) – Cette méthode est utilisée pour définir ou modifier l'ID de l'élément de page source de données.
• getRowSelector() renvoie le RowSelector actuellement utilisé.
• setRowSelector(“theRowSelector”) Définit un nouveau RowSelector pour l'ensemble de données.
• getDataSelector() – Renvoie le DataSeelctor actuel.
• setDataSelector("theDataSelector")-Définit un nouveau DataSelector pour l'ensemble de données.

Exemples

Pour un code HTML valide

<li class="prod" data-name="Dove Shampoo" data-country="Oslo"
data-lang="js" data-types="Hair">
<b>Hello Users:</b> <span>A newly launched Items</span>
</li>
var u1 = document.getElementsByTagName("li")[0];
var p1 = 0, span = user.getElementsByTagName("span")[0];
var content = [
{name: "country", prefix: "Product exported "},
{name: "type", prefix: "utilizing on hair "},
{name: "lang", prefix: "hello Oslo "}
];
u1.addEventListener("click", function(){
var content = content [ pos++ ];
span.innerHTML = content.prefix + u1.dataset[ content.name ];
}, false);

Dans l'extrait de code ci-dessus, la propriété d'ensemble de données fonctionne de la même manière qu'une propriété d'attribut. Ce code pourrait être enrichi à l'aide de préfixes comme le préfixe de contenu qui fonctionnera mieux à l'avenir. La clé peut être utilisée comme propriété d'objet de l'ensemble de données pour définir et lire les attributs, comme dans l'élément. nom de l'ensemble de données.key. La syntaxe entre crochets de propriétés d'objet peut également être utilisée pour définir et lire des attributs, comme dans element. ensemble de données [nom clé]. L'opérateur in peut être utilisé pour voir si un attribut est présent.

L'attribut IDL de l'ensemble de données fournit des accesseurs simples pour tous les attributs data-* d'un élément (data-*/a>). Obtention du jeu de données (dataset/a>) L'attribut IDL doit retourner un objet DOMStringMap associé aux algorithmes suivants, qui exposent ces attributs sur leur élément :

<ahref="demo.html#domstringmap-0"> </a>

Peu de choses à noter :

• Le nom de l'attribut n'est plus préfixé par le préfixe data-.
• Tout trait d'union précédé d'une lettre minuscule dans le nom est éliminé et la lettre qui le suit est transformée en majuscule.
• Les autres personnages seront laissés seuls. Cela signifie que tout trait d’union qui n’est pas suivi d’une lettre minuscule reste le même.

Support du navigateur

L'ensemble de données n'est pas compatible avec tous les navigateurs (en particulier les versions antérieures d'Internet Explorer). Voyons les données de compatibilité mises à jour dans un tableau :

Support	Versions
Desktop	Chrome	Edge	Firefox	Internet Explorer
	6 and 8	Yes	6 higher	9
Mobile	Android	Edge	Opera	Samsung
	6	Yes	Nil	Nil

Spécifications/commentaire

En HTML5, les choses ont changé pour tenter de rendre le développement d'une page d'accueil basée sur des standards encore plus facile, et cela devrait faire une grande différence. Parce que la courbe d'apprentissage et le taux d'échec du balisage simplement basé sur XML sont trop élevés, l'attribut data- a été créé pour appliquer cette approche. Il est essentiel de comprendre que les attributs de données ne tentent pas de remplacer les espaces de noms ou quoi que ce soit d'autre. Ils donnent les outils nécessaires au *déploiement* des fonctionnalités décrites ci-dessus. On peut utiliser des attributs de données en HTML pour obtenir du RDFa, des formats sophistiqués et même un certain type d'espace de noms. L’aspect le plus attrayant de cette spécification est que les utilisateurs n’ont pas besoin d’attendre qu’un navigateur la mette en œuvre pour pouvoir commencer à l’utiliser. Nous pouvons être assurés que si les utilisateurs commencent aujourd'hui à utiliser des préfixes de données sur les métadonnées HTML, cela continuera à fonctionner à l'avenir.

Exécutez l'algorithme suivant pour obtenir les paires nom-valeur d'un DOMStringMap :

• Soit list une liste de paires nom-valeur vide.
• Ajoutez une paire nom-valeur à la liste pour chaque attribut de contenu sur l'élément associé du DOMStringMap dont les cinq premiers caractères sont la chaîne « data- » et dont les caractères restants (le cas échéant) n'incluent aucun alphas supérieur ASCII, dans le ordre dans lequel ces attributs sont répertoriés dans la liste des attributs de l'élément.

Pour un standard HTML de base – Le commentaire de révision n'est pas un changement exact par rapport au dernier HTML 5.1

Version HTML 5   – Commentaire de révision (Aucun changement par rapport à la norme précédente)

Version HTML 5.1 – Aucun effet de HTML 5.

Conclusion – Ensemble de données en HTML

Enfin, les attributs de données personnalisés constituent un moyen pratique de stocker des données d'application sur des pages Web. HTML5 nous permet désormais d'incorporer des attributs de données personnalisés dans tous les composants HTML. Jusqu'à l'introduction de ces attributs, la seule clé pour obtenir un résultat similaire (associer des données à des éléments) était d'utiliser des classes CSS dans les éléments.

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!