JavaScript如何比较相同的DOM元素？

今天我面临一个问题，我有三个相似的文本，它们是完全相同的

通过一个小脚本，我可以找到我点击的确切文本，即使它们非常相似，这太疯狂了，JavaScript是如何做到的

const allTxt=document.querySelectorAll（'.txt'）；
allTxt.forEach（项目=>{
item.addEventListener（'单击'，（e）=>{
const itemClick=e.target；
对于（i=0；i

Lorem ipsum door sit amet concertetur adipising elit。纳拉·阿斯佩里奥雷斯位于哈拉姆的奎登圣塔
Lorem ipsum door sate amet concertetur adipising elit。纳拉·阿斯佩里奥雷斯位于哈拉姆的奎登圣塔
Lorem ipsum door sate amet concertetur adipising elit。NullaAsperioresplaceatquidemsint在哈拉姆。

因为您添加了click事件，每个项目都带有forEach

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

现在，每个“.txt”类项都有一个单击侦听器。

Javascript将您描述为“您的文本”的内容视为“DOM元素”

DOM元素是相互区别的节点，即使它们的HTML相同

---

当您进行比较时，JavaScript将比较节点引用，而不是作为字符串的节点内容。

这不是魔术。在您的代码中，

allTxt[i]

和

itemClick

是对同一DOM元素的两个不同引用，因此它们总是相等的。就像我妻子说“斯科特”，我的孩子说“爸爸”，两种说法都是指我

当测试两个元素是否相同时，JavaScript不会比较元素的值，而是测试对象引用以查看这两个引用是否引用内存中的同一对象实例。您只是使用两种不同的方式在函数中引用同一对象

一些例子：

const par1=document.querySelector（“p”）；
const par2=par1.nextElementSibling；
const par3=par2.nextElementSibling；
console.log（par1==par2）；//false：段落元素的两个不同实例
console.log（par2==par3）；//false：段落元素的两个不同实例
console.log（par1==par3）；//false：段落元素的两个不同实例
//这将创建对第一段的第二次引用
const par1a=document.querySelector（“.txt”）；
console.log（par1==par1a）；//true：对paragraphElement的同一实例的两个不同引用

Lorem ipsum dolor-sit。纳拉·阿斯佩里奥雷斯位于哈拉姆的奎登圣塔
Lorem ipsum door-sit。纳拉·阿斯佩里奥雷斯位于哈拉姆的奎登圣塔

Lorem ipsum door-sit。NullaAsperioresplace位于哈拉姆的quidem sint。

控制台不仅仅包含文本。记录对象时，它会保留对已记录的实际对象的引用（这允许在修改对象时更新日志）。如果对象是DOM元素，将鼠标悬停在日志消息上会突出显示页面中相应的元素。

这不是魔术。在您的代码中，

allTxt[i]

和

itemClick

是对同一个DOM元素的两个不同引用，因此它们总是相等的。这不是他们所要求的。哇，这是一个很好的回答！我喜欢你的教学方式，喜欢比较和比喻。祝你白天/晚上愉快！：）