[maciorqa]

To prawda, że jeżeli za pomocą JS chcę coś zmienić w elemencie html, to nie powinienem robić tego tak:

const p = document.querySelector("p");

p.addEventListener("click", function () {
p.style.color = "red";
});

tylko zrobić oddzielną klasę w CSS i dodać ją do takiego elementu? Podobno jest to dobra praktyka i zgadzam się z tym, ale wydaje mi się, że tak się powinno robić w przypadku, gdy chcemy dodać więcej właściwości CSS.

Jednak gdy chcę dodać tylko jedną właściwość (czyli np zmienić kolor, lub sprawić, żeby element zniknął dzięki właściwości display: none), to po co tylko dla jednej właściwości robić specjalnie klasę w CSS?

Generalnie co jest złego w takim zapisie?

#javascript #frontend #webdev #css #naukaprogramowania

[patrolez]

@maciorqa: masz wybrać taką strategię wynalezienia referencji na element w drzewie DOM, aby była jak najbardziej odpowiednia/koherentna/ścisła do pozostałego kodu.

Kiedyś była stonka jsperf.com, ale już nie działa, to byś stamtąd wiedział, że getElementById jest najwydajniejszą metodą.

Inne rodzaje wyciągania referencji na element z drzewa znajdziesz na stronie z MDN WebAPI:

[magnuss]

getElementById jest najwydajniejszą metodą.

@patrolez: jeżeli masz do obrobienia tysiące elementów to prawda. Jeżeli selektuje jeden obiekt to raczej niema znaczenia

[patrolez]

@maciorqa: https://developer.mozilla.org/en-US/docs/Web/API/Document

querySelector powstał na odpowiedź tego, co zapoczątkowało jQuery w czasach, gdy tej metody jeszcze nie było.


W każdym razie odpytywanie po selektorze CSS zawsze będzie mniej wydajne niż zagadywanie po getElementById ze względu na dodatkowy etap parsowania selektora.

jeżeli masz do obrobienia tysiące elementów to prawda. Jeżeli selektuje jeden obiekt to raczej niema znaczenia

@magnuss: grosz do grosza i będzie kokosza. Obecni Front-Endowcy bez zaplecza niskopoziomowego robią rzeczy,

[maciorqa]

@magnuss: @patrolez: Czyli mam rozumieć, że nie powinienem używać querySelector(), jeżeli mam dużo elementów na stronie? W takim przypadku lepiej używać ID na każdy element i za pomocą tego ID pracować na tym elemencie w JS?

[patrolez]

jeżeli mam dużo elementów na stronie

@maciorqa: w obecnych praktykach, gdzie back-end to API, a front-end to coś zbudowane z komponentów w JS, to i tak potrzeba wyciągania referencji z drzewa DOM przez jego odpytywanie jest czymś, czego się nie robi, bo wszystkie relacje między komponentami są rozwikływane na poziomie JS-a, a DOM też raczej jest budowany w JS, a nie przez parsowanie HTML-a w silniku przeglądarki.

Jeżeli jednak back-end serwuje

[UrimTumim]

@maciorqa: to wszystko zależy. querySelector daje większe możliwości 'customizacji' wyszukiwania. Jeśli chodzi o szybkość działania, to jest wolniejszy niż getElementById() czy getElementsByClassName() szybki test rozwiązań:getElementById vs getElementsByClassName vs querySelector vs querySelectorAll.
Ja osobiście prawie nigdy nie używam querySelector.
Co do posługiwania się klasami zamiast ustawiania styli dla wybranego elementu, to ja widzę podstawowe problemy z przypisywaniem styli jak w Twoim przykładzie:
1. Teraz masz atrybut stylu do dopisania, ale

[patrolez]

@maciorqa: querySelector i querySelectorAll to ogólnie raczej opcje na wyciąganie danych przy Web Scrapingu, a nie metody używane, gdy ludzie od Front-End i Back-End siedzą obok siebie.

[Dawideo]

@maciorqa mam wrażenie że nie pytałeś o to czy dobrze pobrałeś paragraf z drzewa DOM tylko czy możesz przypisywać pojedyncze cssy czy całe klasy. IMO wydaje mi się że podejście z klasami pozwala łatwiej zarządzać wyglądem jakiegoś elementu w konkretnym stanie bo poza czerwonym kolorem zawsze możesz dodać szybko inne style.

Mimo że o to nie pytałeś to co do sposobu wybierania elementów to nie ma to większego znaczenia, niby performance jest

[maciorqa]

@UrimTumim: Bardzo dziękuje, wytłumaczyłeś mi zarówno o co chodzi z querySelector(), jak i odpowiedziałeś z sensem na moje pytanie. Czyli jeżeli ty byś potrzebował tylko w jednym miejscu zmienić np. kolorek, to wolałbyś zrobić klasę do CSS i dodać ją do elementu, niż to zrobić tak jak ja zrobiłem, nawet jeżeli miałbyś wykorzystać taką klasę tylko jeden raz w całym kodzie?

@Dawideo: Nie chodziło mi o sposób pobrania paragrafu (chociaż

[maciej__]

@maciorqa: Kiedyś przy prostych zmianach działałem na .style, ale potem jak trzeba było coś zmieniać / dodawać to tworzyło problemy których by nie było działając na klasach.

Polecam klasy

[UrimTumim]

Czyli jeżeli ty byś potrzebował tylko w jednym miejscu zmienić np. kolorek, to wolałbyś zrobić klasę do CSS i dodać ją do elementu, niż to zrobić tak jak ja zrobiłem, nawet jeżeli miałbyś wykorzystać taką klasę tylko jeden raz w całym kodzie?

@maciorqa: Raczej tak, jedynie gdybym nie miał dostępu do cssów/sassów/scssów to bym to robił inline z pominięciem klasy i traktowałbym to jako chwilowe rozwiązanie. Ewentualnie w przypadku dużej ilości

[Rufurege1]

@maciorqa: Hej, zarówno pierwsze jak i drugie rozwiązanie jest bardzo dobre. W internecie jest masa ston internetowych, które zostały nagrodzone w różnych konkursach, a wykorzystują obie metody.

[patrolez]

https://jsben.ch/8tEs3

@UrimTumim: @maciorqa: wyniki z Firefoxa

[patrolez]

https://jsben.ch/8tEs3

@UrimTumim: @maciorqa: wyniki z Google Chrome

Porównanie:

Firefox::getElementById (317834)

GChrome::getElementById (1540)
====

Firefox::getElementsByClassName (211945)

GChrome::getElementsByClassName (1463)
====

Firefox::querySelector (2233)

GChrome::querySelector (1669)
====

Firefox::querySelectorAll (460)

GChrome::querySelectorAll (382)
Serio szkoda, że nie istnieje już jsperf.com, bo nowe pokolenie JS-owców ma pod górkę. Na jsperf.com były wyświetlane wyniki benchmarków z różnych przeglądarek jednocześnie.

Tyle po tym pozostało: https://github.com/jsperf/jsperf.com

Google Chrome 97.0.4692.99
Mozilla Firefox 96.0