JS — сменить цвет выбранному h1 элементу?

Question

[PavelScron]

Без jquery

В общем если именно одному элементу(т.е. как бы первому) меняю цвет, через querySelector, то все работает

window.onload = function(){
    var lol = document.querySelector('h1');

    lol.onmousemove = function(){
        this.style.color = 'yellow';
    };
    lol.onmouseout = function(){
        this.style.color = 'white';
    };
};

а если хочу чтобы это действовало на все h1, но только к тому элементу на который наведена мышка, то this не работает почему-то(в коде ниже)

window.onload = function(){
    var lol = document.querySelectorAll('h1');

    lol.onmousemove = function(){
        this.style.color = 'yellow';
    };
    lol.onmouseout = function(){
        this.style.color = 'white';
    };
};

https://codepen.io/pavelscron/pen/BxYqbp вот код с querySelectorAll(

Comments

[levchak0910]

А чем не подходит :hover?
h1:hover {color: yellow}

[PavelScron]

levchak0910, ) сессия по js в универе

Answer 1

[Jumandjilos]

пройдись циклом по переменной lol, в которой все h1
for (let elem of lol) {
elem.onmousemove = function(){
this.style.color = 'yellow';
};
elem.onmouseout = function(){
this.style.color = 'white';
};
}

Answer 2

[string15]

Еще вариант применить делегирование, так производительнее.
Делегирование событий

Answer 3

[Stalker_RED]

Ошибка в том, что querySelector('h1') возвращает ссылку на первый попавшийся h1.
А вот querySelectorAll('h1') возвращает уже список (NodeList), и у списка нет событий onmousemove и onmouseout, это вообще не DOM-элемент.

Самый правильный вариант, использовать делегирование как советовал string15 , и да, лучше не использовать h1 больше одного раза, используйте h2, например, или что-то другое.

Comments

[PavelScron]

спасибо, теперь понял, а в jquery через this тоже не сработало бы?

[Stalker_RED]

PavelScron, в jQuery поиск всегда возвращает список, даже если найден один элемент. И обработчик будет навешен на каждый элемент из списка.

$('h1').on('click', function(){
  $(this).css('color', 'red')
})

как-то так

[PavelScron]

Stalker_RED, т.е. в jquery это получается намного легче сделать?
Попробовал ваш код - не работает тоже.

[Stalker_RED]

PavelScron,
Легче вообще без js, стилями: https://jsfiddle.net/qwvhwL2u/1/

Вот идея из вашего поста, но без ошибки: https://jsfiddle.net/qwvhwL2u/

С делегированием нужен пример, или таки заглянете в учебник по ссылке?

[PavelScron]

Stalker_RED, пока сам попробую с делегированием разобраться. спасибо.
А метод forEach не убрали в ES6? Ниже человек писал что нужен Babel для этого метода.

[Stalker_RED]

PavelScron,

https://developer.mozilla.org/ru/docs/Web/JavaScri... (в конце страницы)

Бабель нужен, чтобы в старых браузерах работало. Можете переписать на обычный for, или сделать slice

[PavelScron]

спасибо, теперь понял зачем этот babel используется! чтобы старые браузеры не тупили которые es6 не знают, про делегирование прочитал, но пока не понял как в моем примере через event.target сделать) если там не долго, то покажите пример )

[Stalker_RED]

PavelScron, Пример с делегированием https://jsfiddle.net/qwvhwL2u/2/

[PavelScron]

Stalker_RED, ого, сильно, спасибо, вопросов больше нет.

Answer 4

[Иван]

window.onload = function(){
  
    const lol = document.querySelectorAll('h1');
  
     lol.forEach( lolItem=> {
    lolItem.onmousemove = function() {
        this.style.color = 'yellow';
    };
       
    lolItem.onmouseout = function() {
        this.style.color = 'white';
    };
       
}  );

};

юзать babel

Comments

[PavelScron]

babel ведь для ie нужен? Не понял (

[Иван]

PavelScron, погугли про современный фронтенд) если кратко то он переводит код из es6-7-8 в es5 понятный для большинства браузеров

[PavelScron]

спасибо, но forEach это ведь es5?

[Иван]

PavelScron, для массивов да,но этот метод завезли в es8 для NodeList

[PavelScron]

Иван, спассибо, понял, не знал что js 8 вышел, думал что только 6, т.к. только его браузеры поддерживают пока что.

Answer 5

[Alexander Pushkarev]

h1 на странице может быть только одна штука.

Пример - https://codepen.io/AXP/pen/wjyQKq?editors=1010

window.onload = () => {
  const h2 = document.querySelectorAll('h2');
  
  [...h2].map(item => {
    item.addEventListener('mousemove', e => {
      e.target.style.color = 'yellow';
    });
    
    item.addEventListener('mouseout', e => {
      e.target.style.color = 'red';
    });
  });
}

Comments

[Stalker_RED]

"одна штука" - это совсем не строгая рекомендация. То есть ничего не сломается от дополнительных h1, разве что некоторые поисковики и и скринридеры обидятся.

[Алексей Николаев]

Это устаревшие данные. В HTML5 их может быть сколько угодно.