Почему не работает добавление класса active к текущей странице?

Question

[Сергей Арсентьев]

Здравствуйте, есть задача добавить к странице https://beresurs.com/psihologicheskoe-zemletryasen... - слева где все новости класс .active к тому пункту, который является текущей страницей.
Погуглил, нашел некий код

let navs = document.querySelectorAll(".wp-block-latest-posts__post-title");
console.log(navs);


navs.forEach((nav) => {
	console.log(nav);
    if (nav.href == window.location.href) {
        nav.classList.add("active");
    }
}
	
)

вроде как должен работать но не работает.
в console.log пишет пусто, но ведь класс .wp-block-latest-posts__post-title есть на странице, почему скрипт его не находит?

Comments

[v3shin]

Потому что элементы отрисовываются после отрабатывания скрипта?

[Сергей Арсентьев]

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

[v3shin]

Сергей Арсентьев, вот и я о том же: чтобы функция обработала элементы, надо чтобы эти элементы уже были на странице. Как вариант - затормозить скрипт до полной загрузки страницы.

Answer 1

[admitriev]

(() => {
  const navs = [...document.querySelectorAll(".wp-block-latest-posts__post-title")];

  navs.forEach((nav) => {
    if (nav.href == window.location.href) {
      nav.classList.add("active");
    }
  });
})();

Comments

[Сергей Арсентьев]

спасибо большое, если бы ещё понять, почему не работал мой код и почему работает ваш - так вообще бы супер было, если бы нашли пару минут и пояснили, был бы признателен!