getElementsByClassName nie działa w google extension

Question

Witam,

Potrzebuję stworzyć rozszeżenie do przeglądarki, które będzie zmieniało tag w podrzędnym divie. Wszystko wygląda dobrze gdy użyję metody getElementById:

document.getElementById('widget-html').innerHTML = document.getElementById('widget-html').innerHTML.replace(/div/g, "span");

ale gdy to samo probuje zrobić dla getElementsByClassName rozszeżenie nie chce działać

document.getElementsByClassName('widget1').innerHTML = document.getElementsByClassName('widget1').innerHTML.replace(/div/g, "img");

Czy wie ktoś jaka może być tego przyczyna?

Pozdrawiam

Answer 1

Masz na stronie jeden element o klasie widget1, czy więcej? getElementsByClassName pobierze wszystkie elementy o podanej klasie i zwróci obiekt tablico-podobny. getElementById pobiera Ci referencję do danego obiektu DOM, więc wszystko działa, tutaj dostejesz "tablicę" / "kolekcję" i musisz się odnieść do danej pozycji.

Comments

Cześć,

Mam wiele obiektów o tej klasie, czy mogę się odnieść do wszystkich?

Pozdr

---

Tak, potrzebujesz jakiejś pętli po tym zbiorze obiektów. Podstaw sobie pod zmienną zwracany przez getElementsByClassName obiekt i wyrzuć go w konsoli poprzez "console.log()" i zobacz jak to wygląda. Możesz się po nim poruszać podobnie do normalnej tablicy, jednak wiele metod dostępnych dla zwykłej tablicy nie będzie tutaj działać.

---

@MateuszB, spróbowałem poniższe i działa

var images = document.getElementsByClassName('widget1');
for (var i = 0, l = images.length; i < l; i++) {
  images[i].innerHTML = images[i].innerHTML.replace(/a/g, "img");
}

 

---

O czymś takim myślałem