querySelector работает, но querySelectorAll не

Question

Я пытаюсь изменить цвет тегов привязки при прокрутке, а также цвет фона панели навигации (который работает). До сих пор кажется, что использование querySelector для выбора первого тега привязки работает, а querySelectorAll - нет. Я попытался написать al oop, чтобы перебрать все теги привязки, но я не могу понять, почему это не работает :( Если это помогает, это для сайта Wordpress, и это может быть потому, что узлы не stati c (согласно моему исследованию в Google), но я думал, что l oop разрешит это. Любое понимание очень ценится! Спасибо:)

var nav = document.getElementById('site-navigation');
var link = document.querySelector('.menu-link')[0]; 

  for (i = 0; i < 0; i++){
      link[i].style.color= "blue";
  }

  window.onscroll = function() {
      if (window.pageYOffset > 100) {
          nav.style.background = "#406681"; 
          link.style.color = "#fff";


      }
      else {
          nav.style.background = "transparent";
          link.style.color = "blue";

      }
  }

Answer 1

for l oop никогда не запускается

document.querySelector возвращает первый элемент, который удовлетворяет заданному запросу, если его нет, я считаю, что он либо нулевой, либо неопределенный

document.querySelectorAll возвращает список узлов элементов, который удовлетворяет запросу, если в пустом списке узлов нет элементов

Я предполагаю, что вы хотите создать каждую ссылку, а не только первую, в этом случае ссылки под нав? Если это так, вы можете просто добавить класс к навигации в зависимости от прокрутки.

const nav = document.getElementById('site-navigation');
window.onscroll = function () {
    const navHasClass = nav.classList.contains("over-hundred");
    if (window.pageYOffset > 100) {
        if (!navHasClass) nav.classList.add("over-hundred");
    } else if (navHasClass) {
        nav.classList.remove("over-hundred");
    }
}

и в вашем css

#site-navigation {
    background: #406681;
}

#site-navigation .menu-link {
    color: #fff;
}

#site-navigation.over-hundred {
    background: transparent;
}

#site-navigation.over-hundred .menu-link{
    color: blue;
}