Как изменить класс, не затрагивая другой класс

Question

мне было интересно бы ли я иметь возможность редактировать этот класс

<span class="chat-title"> 
    first title (I want to change) 
</span> 

, не затрагивая эту одну

<span id="chat-subrooms-toggle" class="chat-title"> 
    Chat (I don't want to change) 
</span> 

Я хочу использовать этот вид метода хотя, так как он хорошо работает с кодом

document.querySelector("chat-title").innerHTML = "title change"; 

Answer 1

Просто используйте :not псевдо-селектор Ф.И. введите этот идентификатор. Кроме того, вы забыли . при ссылке на класс CSS (классы CSS начинаются с . и идентификаторы начинаются с #) вот что должно работать для вас:

document.querySelector(".chat-title:not(#chat-subrooms-toggle)").innerHTML = "title change"; 

А вот jsfiddle для вас, чтобы посмотреть, на котором работает

Answer 2

вы можете добавить еще один класс в первый div.

<span class="chat-title to-change"> 
    first title (i want to change) 
</span> 

и оставить это как есть:

<span id="chat-subrooms-toggle" class="chat-title"> 
    Chat (i don't want to change) 
</span> 

и здесь JS код:

document.querySelector("to-change").innerHTML = "title change"; 

Гудлак