Aujourd'hui je suis confronté à une question, j'ai trois textes similaires, ils sont vraiment identiques.

Et avec un petit script, je peux en fait trouver le texte exact sur lequel j'ai cliqué, même s'ils sont vraiment similaires, c'est fou, comment JavaScript fait-il cela?

const allTxt = document.querySelectorAll('.txt');

allTxt.forEach(item => {
    
    item.addEventListener('click', (e) => {
        
        const itemClick = e.target;

        for(i = 0; i < allTxt.length; i++) {

            if(itemClick === allTxt[i]){
                console.log(itemClick);
            }

        }

    })

})
<p class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla asperiores placeat quidem sint in harum.</p>
<p class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla asperiores placeat quidem sint in harum.</p>
<p class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla asperiores placeat quidem sint in harum.</p>

Si vous survolez le résultat sur la console, vous pouvez voir que le texte sur lequel vous avez cliqué est mis en surbrillance.

Comment JS compare-t-il deux éléments DOM? Existe-t-il une sorte d'attribut caché? Compare-t-il les éléments DOM en tant que texte brut? Si oui, comment trouver celui sur lequel j'ai cliqué?

Merci pour votre lumière!

-1
J.doe 31 oct. 2020 à 00:08

3 réponses

Parce que vous avez ajouté un événement de clic, chaque élément avec forEach.

allTxt.forEach(item => {
    item.addEventListener('click', (e) => {
        //
    });
});

Maintenant chaque élément de classe '.txt' a un écouteur de clic.

-1
Kara Dayı 30 oct. 2020 à 21:21

Ce que vous décrivez comme "votre texte" sont considérés comme des "éléments DOM" par le Javascript.

Les éléments DOM sont des nœuds qui sont tous distincts les uns des autres, même si leur HTML est le même.

Lorsque vous effectuez votre comparaison, JavaScript comparera les références des nœuds, et non le contenu des nœuds sous forme de chaîne.

0
dievardump 30 oct. 2020 à 21:20

La console ne contient pas que du texte. Lorsque vous enregistrez un objet, il conserve une référence à l'objet réel qui a été journalisé (cela permet au journal de se mettre à jour si l'objet est modifié). Et si l'objet est un élément DOM, le survol du message du journal mettra en évidence l'élément correspondant dans la page.

0
Barmar 30 oct. 2020 à 21:29