Zamiana tekstu w każdym divie o danej klasie

Question

Chciał bym, aby każdy div o klasie (np. div_tekst) został sprawdzony, czy wewnątrz znajduje się dany tekst (np. %like%), a jeśli się znajduje to ma zostać podmieniony na inny tekst (np. Like). Nie mam zbytnio pomysłu jak odwoływać się do pojedynczego diva. Jak to zrobić?

Answer 1

Stwórz zmienną, w której umieścisz wszystkie elementy o danej klasie - czyli document.getElementsByClassName('jakas-klasa');

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

Następnie zrób pętle po tych elementach i sprawdzaj każdy element czy zawiera dany tekst - użyj do tego własności elementu innerHTML wraz z indexOf() albo regex

https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

Jeśli dany tekst się odnalazł w danym elemencie, to podmień go na własny tekst - również za pomocą własności innerHTML.

Comments

Prawdę mówiąc nie bardzo widzę sens używania document.getElementsByClassName podczas gdy mamy document.querySelectorAll.

---

Jeśli wiadomo, że szukamy elementów danej klasy, to document.getElementsByClassName będzie szybsze niż document.querySelectorAll

https://jsperf.com/getelementsbyclassname-vs-queryselectorall/18

Poza tym getElementsByClassName zwraca "żywą" listę elementów, czyli zmiana w danym elemencie DOM powinna zostać zastosowana w elemencie z tej zwróconej listy (w JavaScript) - w przeciwieństwie do querySelectorAll, który nie zwraca "żywej" listy elementów. A przynajmniej tak to rozumiem z opisu na MDN i np. stąd:

http://stackoverflow.com/a/30473180/4983840

Do różnic podanych na W3C nie mogłem się dokopać :(

 

---

Jeśli wiadomo, że szukamy elementów danej klasy, to document.getElementsByClassName będzie szybsze niż document.querySelectorAll

Ok, a tak szczerze: pisałeś aplikację na tyle dużą i zaawansowaną, że sposób pobierania elementów zrobił Ci różnicę? ;)

 Poza tym getElementsByClassName zwraca "żywą" listę elementów, czyli zmiana w danym elemencie DOM powinna zostać zastosowana w elemencie z tej zwróconej listy (w JavaScript) - w przeciwieństwie do querySelectorAll, który nie zwraca "żywej" listy elementów.

IMO właśnie największym problemem jest ta żywa kolekcja, reagująca na wszystkie zmiany w dokumencie. Wystarczy sobie wyobrazić sytuację, że będziemy dodawać od czasu do czasu w pętli kolejny element z daną klasą – i już mamy niekończącą się pętlę ;) Snapshoty stanu dokumentu to raczej to, czego się oczekuje.

Do różnic podanych na W3C nie mogłem się dokopać :( 

Różnice są definiowane w dwóch różnych specyfikacjach. document.querySelectorAll definiowane jest wewnątrz specyfikacji Selectors API, a document.getElementsByClassName wewnątrz specyfikacji DOM (i częściowo w specyfikacji HTML5).

Największym problemem z Selectors API nie jest szybkość, ale fakt, że selektory muszą być bezwzględne (czyli takie, jakie byłyby w arkuszu CSS) ;)

---

Ok, a tak szczerze: pisałeś aplikację na tyle dużą i zaawansowaną, że sposób pobierania elementów zrobił Ci różnicę? ;)

Nie, ale przecież pisząc kod, wypadałoby aby był szybki. Jeśli więc są jakieś dwie funkcje, które wykonują podobne rzeczy, to wybiera się szybszą (jeśli nie generuje jakichś niepożądanych "skutków ubocznych" w danej sytuacji). Dlatego, widząc że autor tematu chciał zmieniać elementy o danej klasie - zaproponowałem getElementsByClassName - bo jest bardziej specyficzne i szybsze.

IMO właśnie największym problemem jest ta żywa kolekcja, reagująca na wszystkie zmiany w dokumencie. Wystarczy sobie wyobrazić sytuację, że będziemy dodawać od czasu do czasu w pętli kolejny element z daną klasą – i już mamy niekończącą się pętlę ;) Snapshoty stanu dokumentu to raczej to, czego się oczekuje.

 Dobra, wygrałeś :) O tym nie wiedziałem.

---

Nie, ale przecież pisząc kod, wypadałoby aby był szybki. Jeśli więc są jakieś dwie funkcje, które wykonują podobne rzeczy, to wybiera się szybszą

Wybiera się tę, która jest łatwiejsza w utrzymaniu. Szybkość jest na drugim miejscu. IMO w większości aplikacji spieranie się między getElementsByClassName a querySelectorAll to kwestia całkowicie nieistotna. 

Answer 2

document.querySelectorAll zwróci Ci obiekt tablicopodobny, więc można go wykorzystać w pętli for czy for...of. Albo przepuścić przez Array.from i uzyskać normalną tablicę.