Stick ID à l'élément HTML (en utilisant js) au lieu de id-attribut?

Question

Premier message sur stackoverflow. J'espère que tout va bien!

Je pense à attacher une valeur d'ID à l'élément HTML lui-même via JavaScript, au lieu d'utiliser l'attribut HTML id.

Par exemple, disons que la variable JavaScript htmlElement est un div. Donc htmlElement.cssName nous dirait sa classe CSS.

Maintenant, que diriez-vous faire

htmlElement.idProperty = "someValue" 

en JavaScript au lieu de faire <div id="someValue">? Ensuite, je peux utiliser le idProperty dans les gestionnaires d'événements say.

this.idProperty 

C'est simple!

Y a-t-il quelque chose de mal à le faire?

EDIT: Merci pour vos réponses! Très utile et instructif. Je voudrais pouvoir vérifier vert sur chacun d'eux!

Answer 1

pas, vous pouvez le faire de la façon dont vous le souhaitez, si vous créez dynamiquement ce point vous devriez Utilisez cette méthode, si vous faites cela à l'intérieur de HTML, je vous recommande de mettre simplement le nom de l'ID en HTML.

Cependant, une petite note. Utilisez element.id au lieu de idProperty.

element.id = 'my-id'; 

Answer 2

Vous pouvez utiliser la méthode createAttribute pour ajouter un id à l'élément comme celui-ci:

id = document.createAttribute('id'); 
id.value = "someValue"; 
htmlElement.setAttributeNode(id); 

Answer 3

Qu'est-ce que vous faites, il ajoute une propriété d'exécution (dans votre cas, appelé idProperty) à une instance d'objet HTMLElement. Vous pouvez s'en tirer avec votre code JavaScript (la bibliothèque Prototype le fait tout le temps). Cela me rend mal à l'aise, mais cela fonctionne sur tous les principaux navigateurs.

Si vous voulez également les spécifier dans le balisage HTML, j'utiliserais plutôt des attributs. Vous pouvez créer des attributs avec les noms que vous voulez, bien que par prudence, j'utilise des noms comme data-xyz (par exemple, utilisez un préfixe data-) car c'est la manière standard HTML5 d'utiliser vos propres attributs. Ensuite, vous utilisez getAttribute pour obtenir la valeur et setAttribute pour définir/mettre à jour la valeur.