Kurs jQuery #5 – Modyfikowanie drzewa DOM

O tym czym jest DOM mówiłem już wcześniej przy okazji mojego kursu odnośnie JavaScript, jeśli jednak nie miałeś jeszcze czasu go przeczytać to postaram się krótko Ci o nim powiedzieć.

DOM to:

  • Wszystkie elementy HTML będące obiektami
  • Metody i właściwości tych obiektów
  • Zdarzenia dla elementów HTML będących tymi obiektami

Jest więc to sposób na to jak pobrać jakiś element, zmienić jego wartość, dodać nowy lub usunąć już istniejący.

Wartości elementów i ich atrybutów

Na samym początku myślę, że warto byłoby dowiedzieć się jak dostać się do zawartości elementu oraz wartości jego atrybutów. Zawartość elementu możemy pozyskać tak naprawdę na trzy sposoby. Pierwszym, najbardziej wulgarnym, jest po prostu wyciągnięcie całego HTMLa który się w nim znajduje za pomocą funkcji html(). Jest to odpowiednik innerHTML. Jeśli chcemy ustawić jakąś wartość to podajemy ją jako argument.

Inną opcją jest wykorzystanie funkcji text(). Różni się ona od html() tym, że nie przyjmuje kodu HTML a jeśli taki dostanie to parsuje go na zwykły tekst. Jeśli natomiast z jej pomocą wyciągamy zawartość jakiegoś elementu to tagi HTML znajdujące się wewnątrz nie zostaną zamienione w tekst i wyświetlone. Wyświetlony zostanie jedynie tekst.

Czasem pojawia się też taka sytuacja, że musimy dostać się do wartości elementów które nie trzymają ich tak naprawdę w sobie a w specjalnym atrybucie – value. Do atrybutów ogólnie istnieje odpowiednia funkcja o której zaraz Ci powiem ale value jest na tyle popularnym atrybutem, że stworzona została dla niego osobna, dedykowana funkcja – val()Tak jak w przypadku poprzednich dwóch za jej pomocą możemy zarówno dostać się do wartości jak i ustawić nową wartość.

Przed chwilą wspomniałem coś o specjalnej funkcji do pozyskiwania wartości atrybutów. Jest to attr()Jako pierwszy argument podajemy w niej nazwę atrybutu do którego wartości chcemy się odnieść. Jeśli chcemy jedynie poznać jakąś wartość wtedy pozostajemy przy jednoatrybutowej wersji. Jeśli jednak chcesz nadać temu atrybutowi swoją wartość musisz ją podać jako drugi argument.

Dodawanie nowych elementów

Dodawać elementy dzięki jQuery możemy na naprawdę wiele sposobów. Możemy je nawet tworzyć na wiele sposobów. Na początku pokażę Ci samo dodawanie elementów na przykładzie zwyczajnego tekstu a później pokażę trzy metody tworzenia elementów.

Na początku pokażę Ci jak dodawać coś na końcu wybranego elementu. Służy do tego funkcja append(). Jest ona odpowiednikiem appendChild() z czystego JSa.

Odwrotnością tej funkcji jest funkcja prepend() która z kolei dodaje element na samym początku innego, wybranego elementu.

Możemy też dokładnie sprecyzować w którym miejscu chcemy wstawić dany element. Tutaj posłużymy się funkcją after(). Dodaje ona jakiś element za wybranym.

Funkcja before() za to wstawia ten element przed wybranym.

Do każdej z pokazanych powyżej metod możemy ponadto wstawić kilka argumentów będących elementami do wstawienia. Zostaną one dodane w takiej kolejności w jakiej zostały podane.

Zamiana elementów na stronie

Jeśli potrzebujesz zamienić jakiś element na inny, być może nowo stworzony, być może już jakiś istniejący na stronie wystarczy zastosować funkcję replaceWith().

Usuwanie elementów ze strony

Do usuwania elementów możemy podejść na dwa sposoby. Pierwszym jest usunięcie jednego, wybranego elementu i wszystkich jego potomków dzięki funkcji remove().

Drugim natomiast jest usunięcie wszystkich potomków obiektu bez usuwania jego samego.

Tworzenie nowych elementów

Nowe elementy możemy tworzyć na różne sposoby. Może to być tradycyjne podejście które używaliśmy w czystym JS a więc funkcja createElement().

Dzięki jQuery można sobie trochę ułatwić ten proces w taki sposób:

Albo pójść całkowicie na łatwiznę i napisać coś takiego:

Wszystkie trzy zapisy są ze sobą jednoznaczne.

Operacje na klasach

jQuery daje nam możliwość dodawania nowych klas do obiektu, usuwania już istniejących czy też przełączania ich bez konieczności posiadania wiedzy czy ta akurat klasa jest w tym momencie przypisana do tego obiektu czy też nie.

Zacznijmy więc od prostego dodawania klasy. Służy do tego addClass().

Kiedy chcemy zrezygnować z jakiejś klasy możemy użyć removeClass().

Tak jak wspomniałem możemy skorzystać z funkcji toggleClass() w celu dodawania lub usuwania klasy w zależności od tego czy jest ona właśnie przypisana do elementu czy też nie.

Zabawa z CSS

W jQuery możemy szybko i łatwo ustawiać konkretne style CSS dla elementów i dostawać się do ich wartości. Umożliwia nam to funkcja css().

Pierwszym argumentem jest konkretna właściwość CSS do której chcemy się odnieść a drugim, opcjonalnym, wartość jaką chcemy jej nadać. Kiedy, tak jak w tym przypadku, pobieramy aktualny kolor tekstu w akapicie dostaniemy go w takim formacie:

Możemy również ustawić kilka wartości na raz poprzez podanie jako argumentu obiektu a w nim określenie po kolei konkretnych wartości.

Rozmiary elementów

jQuery Dimensions

Pozwoliłem sobie zapożyczyć grafikę z portalu w3schools w celu szybkiego zobrazowania na czym polega różnica w poszczególnych wartościach szerokości i wysokości elementu. Jak widać mamy trzy zestawy funkcji odpowiedzialnych za dostarczenie nam tych wartości.

Pierwszym z nich jest innerWidth()innerHeight(). Określają one odpowiednio szerokość i wysokość elementu z uwzględnieniem jego padding.

Jak widać padding ustawiony jest na 10px także taką wartość dodaje jakby z każdej strony. Dlatego też wartości inner które uwzględniają ten padding są o 20px większe od oryginalnego rozmiaru elementu.

Kolejny zestaw określa nam szerokość i wysokość elementu samego elementu, bez żadnych dodatków – width()height().

Ostatnim zestawem jest ten który określa rzeczywistą szerokość i wysokość elementu. Składa się na nią rozmiar samego elementu, jego padding, obramowanie i margin – outerWidth()outerHeight().