Discussion :

[mathieuq1]

Hello, dans le cadre d'un projet personnel, je souhaite pouvoir identifier, comme on peut le faire avec Chrome ou Firefox, l'élément du DOM que je suis en train de survoler.
Cela comprend :

• le nom du tag (ça, j'ai - tagName)
• l'id de l'élément (j'ai aussi - id)
• le contenu texte de l'élément (j'ai aussi - innerText)

En revanche, je n'arrive pas à récupérer la classe ni le name de l'élément. Voici ce que j'aimerais avoir par exemple :


A terme, l'idée est de pouvoir identifier de façon certaine l'élément cliqué et donner sa valeur à l'utilisateur. J'ai regardé l'ensemble des propriétés des éléments du DOM et rien ne semble convenir. Auriez vous la possibilité de m'aider ?

[danielhagnoul]

Un exemple :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<output id="textID" class="basique inutile" name="textName" data-name="information" data-url="https://www.google.com">Un texte</output>

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const elems = document.querySelectorAll('output');
 
for (const elem of elems) {
    elem.addEventListener('mouseenter', ev => {
        console.clear();
        console.log(`ev.target.textContent = ${ev.target.textContent}`);
        console.log(`ev.target.name = ${ev.target.name}`);
        console.log(`ev.target.id = ${ev.target.id}`);
        console.log(`ev.target.classList = ${ev.target.classList}`);
 
        for(const key in ev.target.dataset){
            console.log(`ev.target.dataset[ ${ key } ] = ${ ev.target.dataset[key] }`);
        }
 
        /*
        ev.target.textContent = Un texte
        ev.target.name = textName
        ev.target.id = textID
        ev.target.classList = basique inutile
        ev.target.dataset[ name ] = information
        ev.target.dataset[ url ] = https://www.google.com
        */
    }, {
            capture: false,
            passive: true,
            once: false
        });
}

[Beginner.]

Salut,

Pour le name il suffit d'utiliser "name" (event.target.name) et pour la classe "className" (event.target.className).

[Beginner.]

Ah je vois que Daniel a répondu avant moi...

A terme, l'idée est de pouvoir identifier de façon certaine l'élément cliqué et donner sa valeur à l'utilisateur. J'ai regardé l'ensemble des propriétés des éléments du DOM et rien ne semble convenir. Auriez vous la possibilité de m'aider ?

Pourrais-tu développer ? Comment tu veux donner cette information à l'utilisateur et comment est-il censé l'utiliser ?

Oui parce que sinon on pourrait te répondre que "event.target" désigne l’élément en question, ça l'identifie de façon certaine... Mais si tu veux l’identifier autrement par rapport au DOM eh bien il y a l'id c'est faisable car il censé être unique mais le problème c'est que tous les éléments n'ont pas forcément un id. Les autres choses (à ma connaissance) comme la class ne permettent pas d'identifier un élément de façon certaine comme tu dis (oui car plusieurs éléments peuvent avoir la même classe, il peut y avoir plusieurs élément ayant le même tagName...).


Par contre je pense qu'il y a un autre moyen qui ne nécessite pas que l’élément ait un id, un className ou autre... C'est le chemin (path) complet (avec l'indice entre crochet ce qui permet de faire la distingtion entre les éléments ayant le même tagName)...

J'avais ouvert un fil sur ce point : Comment trouver le chemin de l’élément (balises) dans lequel se trouve le curseur ?...

Voici un exemple pour tester : http://jsbin.com/cedoqulomu/edit?js,output...
En plus du chemin (path) il y a aussi l'id qui est indiqué lorsque l’élément survolé en a un... On pourrait ajouter d'autres choses comme la classe...

[mathieuq1]

WOW impressionnant merci messieurs pour vos réponses, je pense effectivement que le Path ici est la meilleure alternative. L'idée pour moi est de pouvoir identifier précisément et systématiquement identifier et retrouver un élément dans n'importe quelle page c'est donc a priori la meilleure solution.

[danielhagnoul]

Le chemin est une caractéristique intéressante, c'est une bonne idée, il est utile, mais il faut se souvenir qu'il peut varier.

Exemple :

• lorsqu'on supprime ou injecte un élément HTML dans le DOM pour répondre aux actions de l'utilisateur ;
• lorsqu'on modifie l'ordre de présentation des éléments HTML pour faire du "responsive".

[mathieuq1]

Le chemin est une caractéristique intéressante, c'est une bonne idée, il est utile, mais il faut se souvenir qu'il peut varier.

J'ai bien conscience de cela, mais est-ce qu'il existe une façon sure et certaine (ou plus sûre) d'identifier un élément particulier sur une page web ?

J'ai un projet de sauvegarder le chemin de l'élément (et l'url de la page) de façon à pouvoir m'y référer plus tard, afin de détecter des changements de l'élément suivi. Quelle serait dans le cas ma meilleure option ?

[danielhagnoul]

Pour identifier un élément de manière sûre, il n'y a que l'ID car il doit être unique dans la page web.

[mathieuq1]

merci à vous pour vos réponses !

[Beginner.]

Oui et comme je disais le problème c'est que tous éléments d'une page n'ont pas forcément d'id et en pratique il peut arriver que certains mettent plusieurs fois le même id bien que celui-ci doit être unique.

Alors je ne sais pas si il existe une solution qui marche à tous les coups pour n'importe quel élément de n'importe quelle page... Il faut peut-être bien procéder au cas par cas...