Obtenir les infos du DOM au survol de la souris

Version imprimable

14/08/2018, 19h16
mathieuq1

1 pièce(s) jointe(s)

Obtenir les infos du DOM au survol de la souris
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 :
Pièce jointe 403808

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 ?

:salut:

Un exemple :

Code:

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

Code:

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
        });
}

14/08/2018, 21h33
Beginner.

Salut,

Pour le name il suffit d'utiliser "name" (event.target.name) et pour la classe "className" (event.target.className).
14/08/2018, 22h05
Beginner.

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

Citation:

Envoyé par mathieuq1

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...
16/08/2018, 09h55
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.
16/08/2018, 10h35
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".
16/08/2018, 10h56
mathieuq1

Citation:

Envoyé par 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.

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 ?
16/08/2018, 10h57
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.
16/08/2018, 11h54
mathieuq1

merci à vous pour vos réponses !
16/08/2018, 13h58
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...