Javascript 两个代码行之间的DOM querySelector差异

为什么第二行有效而第一行无效

const elements{
     current: document.querySelector('#current-')
    }
        (elements.current + activePlayer).textContent = roundScore;

第二线

 document.querySelector('#current-' + activePlayer).textContent = roundScore;

---

元素。当前的

将为您提供一个HTMLElement。HtmleElement是一个对象。 如果将字符串连接到对象（反之亦然），则会得到一个字符串

因此，您的语句

elements.current+activePlayer

为您提供了

“[object object]123”

（假设您的

activePlayer

的值为

123

在

String.prototype

---

第二种方法之所以有效，是因为您实际上是针对一个名为textContent的属性的HtmleElement。

因为第一种方法是语法错误和完全胡说八道的结合。JavaScript是一种语言，有语法。您不能撕下半句话，粘到完全不同的地方，仍然有意义。因为第一行引用的DOM元素不存在，因此elements.current变得未定义。因为第一行是一个组合。是国家和语法错误的组合！因为

document。querySelector（'#current-'）+activePlayer

与

document.querySelector（'#current-'+activePlayer）

不同。