Artykuł

mar 18 2009
0

Document Object Model - tworzenie, zmienianie i usuwanie elementów

Jak już pokazałem w poprzednim artykule, DOM jest niezwykle użyteczną technologią, pozwala dobrać się do praktycznie dowolnego elementu strony. Dzięki temu w szybki sposób możemy odczytać określone właściwości. Jednak i to nie ogranicza naszego pola manewru. Bo jest coś jeszcze, odnajdując określony element, możemy zrobić z nim właściwie wszystko. Możemy pobrać jego atrybuty, zmienić je, usunąć, możemy również tworzyć nowe elementy potomne itd. I tym właśnie różnym operacjom będzie poświęcony dzisiejszy artykuł.

Przygotowania

Korzystając z DOM można tworzyć praktycznie całe dokumenty, ale ponieważ jest to artykuł przekrojowy, skupimy się na poszczególnych elementach by przedstawić jak największe spektrum możliwości. Do przeprowadzania operacji DOM wykorzystamy typowe elementy takie jak div, czy p, img.

Tworzenie nowych elementów

Tworzenie nowych elementów jest niezwykle łatwym zagadnieniem, zresztą podobnie jak wszystkie operacje, który wykonujemy w DOM. Na poniższym listingu przedstawiłem sposób tworzenia nowych elementów:

var oDiv = document.getElementById('mydiv');
var oParagraph = document.createElement('p');
var oImage = document.createElement('img');
oDiv.appendChild(oParagraph);
oDiv.appendChild(oImage);

Na początku odnajdujemy element div o określonym przez nas id mydiv, uzyskany element zapisujemy do zmiennej. W linii 2 i 3 tworzymy nowe elementy. Warto zwrócić uwagę, że wszystkie elementy tworzymy w obiekcie document. Referencje do świeżo utworzonych węzłów zapisujemy do zmiennych. W linii 4 i 5 do elementu mydiv dodajemy świeżo utworzone znaczniki.

Wypełnianie treścią akapitu p

Puste znaczniki na nie wiele się nam zdadzą. Skoro już je utworzyliśmy to warto wypełnić je jakimiś danymi. Zaczniemy od akapitu z tekstem. Pomiędzy linię 2 a 3, poprzedniego listingu, dodajmy następujący kod:

var oText = document.createTextNode('To jest jakiś przykładowy, bezsensowny tekst akapitu');
oParagraph.appendChild(oText);

W linii 1, tworzymy węzeł tekstu w obiekcie document i wypełniamy go treścią. W linii 2, dodajemy świeżo utworzony węzeł do naszego akapitu. Prawda że proste:)?

Tworzenie atrybutów w DOM na przykładzie znacznika img

Zagospodarowaliśmy już pierwszy z dwóch utworzonych przez nas elementów, czas zając się drugim. Element typu img, nie zawiera treści, zawiera jednak inny ciekawy element jakim są atrybuty. Najważniejszym z nich jest niewątpliwie atrybut src definiujący położenie obrazka na dysku. Aby dodać atrybuty do elementu img należy umieścić poniższy kod pomiędzy 3 i 4 linią listingu 1:

oImage.setAttribute('src', 'picture.jpg');
oImage.setAttribute('alt', 'Piękny obrazek');

W pierwszej linii w elemencie oImage tworzymy atrybut src. Konstrukcja użytej metody setAttribute jest bardzo prosta. 1 parametr stanowi nazwa klucza, natomiast 2, nazwa wartości. Metoda setAttribute jest używana zarówno do tworzenia nowych, nieistniejących przedtem atrybutów jak i do modyfikacji istniejących. Nie musimy się martwić o sprawdzanie czy atrybut istnieje czy też nie, JavaScript załatwi to za nas:) W drugiej linii dodajemy atrybut alt, na wypadek gdyby coś niedobrego stało się z naszym obrazkiem.

Zmiana treści istniejącego akapitu

Ponieważ za jakiś czas możemy dojść do wniosku, że utworzony przez nas akapit, zawiera rzeczywiście bezsensowny tekst, trzeba się ubezpieczyć przed możliwością jego zmiany. Dlatego przy listingu 1, dodajmy następujący kod (kod należy umieścić po utworzeniu elementu a przed jego dodaniem do elementu nadrzędnego):

oParagraph.setAttribute('id', 'mytext');

W ten sposób zapewniliśmy sobie swobodny dostęp do elementu akapitu p. Możemy zmienić jego zawartość w dowolnym momencie wykonując poniższy kod:

var oParagraph = document.getElementById('mytext');
oParagraph.innerHTML = 'nowy cudowny tekst';

Właściwość innerHTML, pozwala na zmianę elementów tekstowych wszystkich znaczników, które je zawierają np. p, em, span, strong itp.

Usuwanie atrybutów

Jeśli kiedyś uznamy, że jakiś atrybut jest nam nie potrzebny w danym znaczniku, to zawsze możemy go usunąć. Najpierw należy jednak dostać się do określonego elementu. Aby to uczynić najlepiej dodać do określonego elementu atrybut id w czasie jego tworzenia, przykładowo:

oImage.setAttribute('id', 'myimage');

Dzięki powyższej linijce możemy dostać się do naszego unikalnego znacznika img w dowolnym elemencie i usunąć niechciany przez nas atrybut. Możemy usunąć np. atrybut alt:

oImage = document.getElementById('myimage');
oImage.removeAttribute('alt');

Metoda removeAttribute, przyjmuje tylko jeden parametr i jest to nazwa zbędnego atrybutu.

Usuwanie elementów

W sytuacji gdy nasz cudowny div, jednak nam się znudzi, to zawsze możemy go usunąć. Aby to zrobić musimy uzyskać dostęp do elementu, który znajduje się powyżej. Można to zrobić np. tak:

var oDiv = document.getElementById('mydiv');
oDiv.parentNode.removeChild(oDiv);

W 1 linii uzyskujemy uchwyt do naszego diva, w sposób myślę, że już dobrze znany. W drugiej linii kłania się właściwość parentNode, którą poznaliśmy w poprzednim artykule. Dzięki parentNode, uzyskujemy dostęp do elementu znajdującego się bezpośrednio nad, naszym divem. Teraz bez żadnych skrupułów możemy już wywołać metodę removeChild, ze wskazaniem na uchwyt usuwanego elementu, w tym wypadku oDiv.

Podsumowanie

Dzisiejszy artykuł pozwolił właściwie prześledzić cykl tworzenia, edycji oraz usunięcia znaczników w DOM. Nauczyliśmy się również w jaki sposób tworzyć atrybuty, tworzyć elementy tekstowe oraz jak zmieniać istniejące już wcześniej elementy. Ważną uwagą w przypadku korzystania z DOM, jest to, że należy go stosować dopiero po załadowaniu strony. Jeśli wykonamy ten kod bezpośrednio w head, to mogą pojawić się błędy, ponieważ właściwy kod strony nie będzie jeszcze istniał. Można się przed tym uchronić stosując zdarzenia np. OnLoad, czy OnClick, a cały newralgiczny kod umieszczać w funkcjach. Przyjemnego DOMowania:)

Data ostatniej modyfikacji: 05.06.2011, 17:20.

Podoba Ci się ten wpis? Powiedz o tym innym!

Send to Kindle

Komentarze

blog comments powered by Disqus