Wyszukiwanie elementu poprzez selektory CSS w DOM

pytanie zadane 20 czerwca 2018 w JavaScript przez Paweł Kościelny Początkujący (360 p.)

Witam mam taki oto kod html

<body>

    <ul class="list">
        <li>Element 01</li>
        <li>Element 02</li>
        <li>Element 03</li>
        <li>Element 04</li>
        <li>Element 05</li>
        <li>Element 06</li>
        <li>Element 07</li>
        <li>Element 08</li>
        <li>Element 09</li>
        <li>Element 10</li>
    </ul>

    <script>
        const list = document.querySelector('.list');

        const li = list.querySelectorAll('li');


li[2].style.setProperty("background-color", "red");

Jak napisać kod aby wyświetlało mi elementy tylko z "background color:red" ?

Póki co działa mi:

console.log(list.querySelector('[style] '));

aczkolwiek nie działa na tylko czerwony

4 odpowiedzi

odpowiedź 20 czerwca 2018 przez Tomek Sochacki Ekspert (227,490 p.)

Jak napisać kod aby wyświetlało mi elementy tylko z "background color:red" ?

A może spróbuj zmienić nieco sposób myślenia o problemie... Potrzebujesz dostać się do elementów, posiadających jakiś tam właściwości CSS, nie ważne jakie - zapominamy o background-color. Elementy o jakiś tam właściwościach.

Co nam to zmienia? Otóż wiele, ponieważ teraz możemy sobie sprecyzować czym te elementy się wyróżniają ale nie wizualnie (ponownie - zapominamy o background-color) ale czym się wyróżniają funkcjonalnie. To znaczy, dla przykładu załóżmy, że ten swój czerwony kolor dajesz dla divów wyświetlających jakiś błąd, ostrzeżenie itp. I tutaj mamy wskazówkę - a może by dla tych elementów dać po prostu dodatkową klasę "warning"?

No dobra, i co nam to z kolei daje?

Otóż teraz mamy zupełnie inny problem. W JS potrzebujmy dostać się do elementów oznaczających jakiś "warning", czyli mogę je pobrać po prostu przez querySelectorAll(".warning") (plus ewentualnie przerobić sobie to na Array w razie potrzeby). Nie interesuje nas jakie to elementy, czy są to LI, czy DIV itp. Interesuje nas jedynie ich znaczenie, które określiliśmy sobie klasą (można też atrybutem data- itp. rozwiązań jest wiele).

A co teraz ze stylami CSS? Można je wrzucić w tę klasę "warning" co pozwoli Ci stworzyć rozwiązanie uniwersalne.

I teraz pomyślmy jakie mamy zalety takiego podejścia:

całkowicie odseparowaliśmy rodzaj znaczników html od sposobu dobierania się do nich w JS. Bierzemy elementy po klasie, nie ważne czy są to li, div, p itp. itd. W razie potrzeby ich rozróżniania możemy potem dalej na tej pobranej liście analizować rodzaj elementu, ale wciąż pobieramy je tak samo.
stylowanie mamy w jednym miejscu.
i najważniejsze... nie łączymy stylowania z przeznaczeniem elementu! Nie interesuje nas element z tłem "red" co zakładamy, że jest czymś pokazującym błąd itp. ale interesuje nas element, który funkcjonalnie odpowiada za wyświetlanie warning itp. A to jak jest ostylowany to zupełnie osobna sprawa. Pozwala nam to np. łatwo zmienić rodzaj tła z czerwonego na bordowy i nadal nasz kod działa.

Warto czasem spojrzeć na problem z nieco innej strony :) Kolega raftom dał ciekawy przykład rozbudowanego selektora css ale przemyśl teraz jak takie twory mogą z czasem utrudnić rozwój i utrzymanie aplikacji.

odpowiedź 20 czerwca 2018 przez pablop76 VIP (123,340 p.)

odpowiedź 20 czerwca 2018 przez raftom Użytkownik (660 p.)

$('ul.list > li[style~="backgroundColor: red;"]')

coś takiego na szybko z JQuery

1	komentarz 20 czerwca 2018 przez Tomek Sochacki Ekspert (227,490 p.) o jezu... nie kwestionuję tego czy kod działa (skoro go dałeś to zakładam, że przetestowałeś) ale tak serio... chciałbyś takie coś zobaczyć w kodzie produkcyjnym dostając po kimś w spadku projekt... :) ?

komentarz 21 czerwca 2018 przez raftom Użytkownik (660 p.)

napisałem że to na szybko wymyślone , dużo lepsze podejście jest z klasą w css na przykład

a tak na poważnie, nie takie rzeczy dostawałem do przeróbki (bo wolno działa)

komentarz 21 czerwca 2018 przez Tomek Sochacki Ekspert (227,490 p.)

a tak na poważnie, nie takie rzeczy dostawałem do przeróbki (bo wolno działa)

a to to już zupełnie inna bajka... :) Kiedyś miałem stronkę, gdzie same fotki slidera ważyły ponad 15mb, a każda jedna ponad 3mb i dziwienie się dlaczego to się tak wolno ładuje... albo z samego kodu to widywałem już parę razy regexp tak długi, że można by encyklopedię z niego zrobić tylko do analizy rodzaju urządzenia żeby przerzucać między wersją pc i mobilną...

Pomysłowość niektórych ludzi chyba nie zna granic :)