JavaScript : exploitez les attributs de données HTML5 pour une efficacité maximale

Dans cet article, nous verrons comment obtenir des attributs de données HTML5 à l'aide de JavaScript. Nous passerons en revue quelques exemples pratiques pour montrer comment utiliser ces propriétés de données avec du JavaScript simple et jQuery.

JavaScript est l'une des technologies de base d'Internet. Il est utilisé par la plupart des sites Web et pris en charge par tous les navigateurs Web modernes sans avoir besoin de plugins. Dans cette série, nous discuterons de trucs et astuces pour vous aider dans votre développement JavaScript quotidien.

Souvent, vous devez stocker des informations supplémentaires ainsi que différents éléments HTML sur votre application Web ou votre site Web. Cela ne signifie peut-être rien pour l'utilisateur, mais cela peut vous être utile si vous souhaitez agir sur la base de ces informations.

Par exemple, si vous disposez d'un tableau HTML contenant des lignes d'une base de données, vous souhaiterez peut-être stocker l'ID de base de données correspondant pour chaque ligne. Cela facilitera l’édition et d’autres tâches. C'est une excellente utilisation des attributs de données personnalisés.

Avant l'introduction de ces attributs de données personnalisés, les développeurs utilisaient souvent des attributs de classe pour stocker ces informations, mais les attributs de classe ne sont pas réellement utilisés à cette fin, et cette pratique peut prêter à confusion dans la compréhension du code et du balisage du site.

Avec l'introduction des attributs de données personnalisés HTML5, le stockage et la récupération de données personnalisées en HTML sont devenus très simples.

Accédez aux attributs des données à l'aide de Vanilla JavaScript

Dans cette section, nous aborderons différentes manières d'obtenir des attributs de données HTML5 en utilisant du JavaScript simple.

HTMLElement.dataset Propriétés

dataset Les attributs vous permettent d'accéder facilement aux propriétés de données d'un élément.

Considérons l'exemple suivant.

Tout d'abord, nous associons les attributs de données à chaque <li> 元素上定义了 data-employee-id 自定义数据属性，用于存储员工 ID。如果需要的话，稍后可以使用它来获取员工的更多详细信息。接下来，我们在每个 <li> 元素上定义了 onclick 事件处理程序，因此当您单击任何行时，它将调用 getEmpId 函数，该函数最终获取 employee 的值 - id 与相应 <li> élément.

Dans la fonction getEmpId, nous utilisons l'attribut getEmpId 函数中，我们使用了 <li> 元素的 dataset 属性，该属性作为第一个参数传递。 dataset 属性返回 DOMStringMap de l'élément <li>, qui est passé en premier paramètre.

La propriété renvoie un objet DOMStringMap que vous pouvez utiliser pour obtenir des propriétés individuelles.

dataset 属性获取各个属性时，有一些重要的事情。 data- 前缀已从属性名称中删除。任何后跟连字符的小写字符都会转换为大写字符，并删除连字符。换句话说， dash-style 属性名称将转换为 camelCaseIl y a quelques éléments importants lorsque vous utilisez l'attribut

pour obtenir des propriétés individuelles. Le préfixe data- a été supprimé des noms de propriété. Tous les caractères minuscules suivis d'un trait d'union sont convertis en majuscules et le trait d'union est supprimé. En d'autres termes, les noms de propriétés style tiret sont convertis en clés d'objet camelCase. Les autres rôles restent inchangés.

data-employee-id 属性将转换为 employeeId。因此，您可以使用 element.dataset.employeeId 来获取 data-employee-idDans notre exemple, en utilisant ces règles,

la valeur de l'attribut.

datasetC'est ainsi que

fonctionne correctement en JavaScript Vanilla.

getAttribute()

Méthode

getAttributeDans cette section, nous verrons comment obtenir la valeur d'un attribut de données à l'aide de la méthode

.

Nous modifierons l'exemple discuté dans la section précédente.

getAttribute 方法获取自定义数据属性非常简单。您只需传递整个属性名称以及 data-Comme vous pouvez le voir, obtenir un attribut de données personnalisé est très simple en utilisant la méthode

d'un élément HTML. Vous transmettez simplement le nom complet de la propriété avec le préfixe data- pour obtenir la valeur de la propriété.

Accédez aux propriétés des données à l'aide de la bibliothèque jQuery

Dans cette section, nous verrons comment obtenir des attributs de données HTML5 à l'aide de la bibliothèque jQuery.

data()

Méthode

Les méthodes datajQuery

vous permettent d'obtenir facilement les attributs de données d'un élément.

Comprenons comment fonctionnent les méthodes de données jQuery avec l'exemple suivant.

Comme vous pouvez le voir, il nous suffit de transmettre la version camelCase du nom de l'attribut de données pour obtenir sa valeur.

attr()

Méthode

attrDans jQuery, vous pouvez également utiliser la méthode

pour obtenir la valeur d'un attribut spécifique d'un élément. 🎜

Voyons rapidement comment utiliser la méthode attr dans jQuery.

…
…
var empId = $(element).attr('data-employee-id');
…
…

Comme vous pouvez le voir, la méthode attr 方法的工作方式与普通 JavaScript 中的 getAttribute fonctionne de la même manière que la méthode getAttribute en JavaScript normal.

Dans jQuery, la différence entre les méthodes data et data 和 attr 方法的区别在于 data est que la méthode data convertit en interne la chaîne obtenue à partir de l'attribut data dans le type correspondant, tel que des nombres, Boolean valeurs, etc

Voici comment obtenir facilement des attributs de données à l'aide de jQuery.

Conclusion

Aujourd'hui, nous avons expliqué comment obtenir des attributs de données HTML5 à l'aide de JavaScript. À l'aide de plusieurs exemples pratiques, vous avez appris comment les attributs de données HTML5 fonctionnent avec les bibliothèques JavaScript et jQuery courantes.

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!