querySelector nie wyszukuje tagu a

pytanie zadane 5 stycznia 2022 w JavaScript przez Jacek Śmiel Użytkownik (510 p.)

Chciałbym do zmiennej var menuItem "załadować" tag html a, żeby w późniejszym etapie dodać do niego klasę active.

var menuItem = document.querySelector("nav.col-md-2.d-none.d-md-block.bg-light.sidebar div.sidebar-sticky div.nav-item a[href='zarobki.php']");

console.log(menuItem);

Niestety w konsoli widzę komunikat null

W moim załozeniu chciałbym aby przeszukał taką cześć kodu html:

<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
  <div class="sidebar-sticky">
    <ul class="nav flex-column">
      <li class="nav-item">
        <a class="nav-link" href="home.php">
        <i class="fas fa-home"></i> Home
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="kampanie.php">
        <i class="fas fa-users"></i> Kampanie <span class="sr-only">(current)</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="zarobki.php">
        <i class="fas fa-heart"></i> Zarobki <span class="sr-only"></span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="statystyki.php">
        <i class="bi bi-bar-chart-line-fill"></i> Statystyki <span class="sr-only"></span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="wiadomosci.php">
        <i class="bi bi-chat-dots-fill"></i></i> Wiadomości <span class="sr-only"></span>
        </a>
      </li>
    </ul>

    <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
      <span>Konto</span>
      <a class="d-flex align-items-center text-muted" href="#" aria-label="Add a new report">
      </a>
    </h6>
    <ul class="nav flex-column mb-2">
      <li class="nav-item">
        <a class="nav-link" href="settings/account.php">
        <i class="fas fa-user-cog"></i> Ustawnienia konta
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="settings/api.php">
        <i class="fas fa-terminal text-center icon"></i> Dostęp API
        </a>
      </li>
    </ul>
  </div>
</nav>

querySelector konstrułowałem w oparciu o https://developer.mozilla.org/pl/docs/Web/API/Document/querySelector

2 odpowiedzi

odpowiedź 5 stycznia 2022 przez elwood Gaduła (4,180 p.)
wybrane 5 stycznia 2022 przez Jacek Śmiel

Najlepsza

W selectorze odwołujesz sie do div.nav-item, a ta klasa przypisana jest do listy, więc powinno być li.nav-item

var menuItem = document.querySelector("nav.col-md-2.d-none.d-md-block.bg-light.sidebar div.sidebar-sticky li.nav-item  a[href='zarobki.php']");

komentarz 5 stycznia 2022 przez Jacek Śmiel Użytkownik (510 p.)

Super! bardzo dziękuję za pomoc

komentarz 5 stycznia 2022 przez VBService Ekspert (253,100 p.)

@Jacek Śmiel, wystarczy też samo .nav-item

var menuItem = document.querySelector("nav.col-md-2.d-none.d-md-block.bg-light.sidebar div.sidebar-sticky .nav-item a[href='zarobki.php']");

lub krótszy zapis

var menuItem = document.querySelector("nav .nav-item a[href='zarobki.php']");

komentarz 5 stycznia 2022 przez Jacek Śmiel Użytkownik (510 p.)

Mam jeszcze pytanie. Myślałem, że zrobię to od ręki, ale nie haha.

Zmienna var patchNameSliced = 'zarobki.php'; chciałbym ją załadować w miejsce a[href='patchNameSliced'] wewnątrz nawiasów querySelector();

Niestety tak jak to zapisałem nie działa, bez znaków " tez nie działa. W jaki sposób mam zapisać nazwę tej zmiennej do środka querySlector?

komentarz 5 stycznia 2022 przez ScriptyChris Mędrzec (190,190 p.)

Możesz skorzystać z interpolacji w template stringu.

var patchNameSliced = 'zarobki.php'; 
document.querySelector(`a[href='${ patchNameSliced }']`);

komentarz 5 stycznia 2022 przez Jacek Śmiel Użytkownik (510 p.)

Niestety twoja propozycja nie działa, w konsoli otrzymuje null

var menuItem = document.querySelector("nav .nav-item a[href='${ patchNameSliced }']");

komentarz 5 stycznia 2022 przez ScriptyChris Mędrzec (190,190 p.)

Bo nie owinąłeś całego selektora w `` tylko nadal używasz ""

komentarz 6 stycznia 2022 przez VBService Ekspert (253,100 p.)

@Jacek Śmiel, jak nie za bardzo wiesz jak "posługiwać" się interpolacją możesz użyć "starego" sposobu na łączenie zmiennych z tekstem (string).

var patchNameSliced = 'zarobki.php'; 
var menuItem = document.querySelector("nav .nav-item a[href='"+patchNameSliced+"']");
 
console.log(menuItem);

odpowiedź 5 stycznia 2022 przez ScriptyChris Mędrzec (190,190 p.)

W selektorze błędnie napisałeś div.nav-item, bo tą klasę mają elementy <li>, więc powinieneś zapisać li.nav-item.

Niemniej, jeśli nie masz konkretnego powodu, aby używać tak długiego selektora (co jest nawet anty patternem), dlaczego nie zapiszesz po prostu a[href='zarobki.php']? Jeśli tylko ten link ma taki adres odnośnika, to wystarczy. Alternatywnie, mógłbyś temu elementowi nadać osobną klasę lub identyfikator.

Przy okazji selektorów i ogólnie konwencji nazewniczej klas w HTML - polecam zapoznać się z metodologią pokroju BEM.