Węzły w DOM i podstawowe ich dodawanie
04 kwietnia 2006
W poprzednim odcinku opisu DOM-u skupiliśmy się na sposobie odnajdywania elementów. Jest to przydatna umiejętność, umożliwiająca przechadzanie się po drzewie dokumentu i późniejsze operowanie na jego gałęziach. O wiele jednak ciekawiej będzie, gdy połączymy to z możliwością zmieniania i dodawania elementów jak i całych gałęzi. O tym dzisiaj.
Zanim jednak zaczniemy, musimy posiąść wiedzę na temat typu węzłów. Drzewo DOM składa się z kilku typów takich węzłów i musimy umieć je rozpoznawać. Węzły różnych typów mają przyporządkowane różne wartości liczbowe. Możemy poznać je przez właściwość nodeType.
Najczęściej spotykanym jest węzeł elementu - nodeType zwróci dla niego wartość 1. Węzeł atrybutu zwraca 2, natomiast węzeł tekstowy 3. Istnieje jeszcze 9 typów, z ważniejszych to 4 określająca sekcję CDATA oraz 8 odpowiadająca węzłowi komentarza.
Jeśli okaże się, że aktualny węzeł jest elementem (nodeType dla niego to 1) możemy skorzystać z właściwości nodeName i pobrać jego nazwę (div, p, a, i tak dalej). Jeśli będzie to węzeł atrybutu dostaniemy nazwę atrybutu. Natomiast jeśli odnosimy się do węzła tekstowego nodeName zwraca "#text". Zaznacza się, że nodeType jak i nodeName są właściwościami tylko do odczytu.
Jest jeszcze nodeValue. Ta właściwość zwraca tekst węzła tekstowego oraz wartość atrybutu. Dla elementu zwraca null, czyli nic. Właśnie gdy mamy do czynienia z węzłem elementu nie możemy nadpisać tej wartości (null), w pozostałych przypadkach możemy - zmienić wartość atrybutu albo tekst.
Powiązana jest z tym pewna pułapka. Początkujący koderzy DOM zwykle chcąc zmienić tekst elementu na stronie, pobierają jego uchwyt, na przykład za pomocą getElementById
var uchwyt = document.getElementById("jakisdiv");
a potem robią tak:
uchwyt.nodeValue = "tego nie robi się tak";
Uważni obserwatorzy zauważyli już, że próbowano przyporządkować nową wartość elementowi, a nie tekstowi w nim zawartemu, który jest kolejnym węzłem. Należy sięgnąć do węzła pod elementem i jemu przypisać nową nodeValue. Skorzystamy tutaj z firstChild połączonej ze sprawdzeniem czy na pewno docelowy węzeł jest tekstowy - za pomocą nodeType.
if (uchwyt.firstChild.nodeType == 3) {uchwyt.firstChild.nodeValue = "bo robi się właśnie tak"}
Tworzenie elementów umożliwia metoda createElement(nazwa). Metoda ta zwraca odwołanie do stworzonego elementu. Element nie jest dodawany do drzewa DOM - wisi sobie w przestrzeni czekając aż coś mu każe do niego się przyczepić ;) = nie ma właściwości parentNode. Przykładowo aby stworzyć cytat blokowy należy napisać tak:
var cytat = document.createElement("blockquote");
Teraz aby doczepić nowo stworzony cytat należy skorzystać z appendChild. Jest to metoda dodająca dany węzeł na koniec węzłów potomnych (childNodes mówiąc w DOM) tego z którego go wywołano.
document.body.appendChild(cytat);
W ten sposób korzystając z skrótu dla body (zamiast getElementsByTagName("body")[0]) dokumentu umieściliśmy cytat na samym jego końcu. W kolejnej części dowiemy się jak podczepiać elementy w innych miejsach, na razie starczy tyle.
Z appendChild wiąże się kolejna podstawowa metoda - tworzenie tekstu (węzła o nodeType równym 3).
var tekst = document.createTextNode("przykładowy cytat");
Podobnie jak w przypadku createElement otrzymanego tekstu nigdzie nie widać w dokumencie i używając odwołania należy go podczepić elementowi. Powiedzmy że będzie to nasz cytat.
cytat.appendChild(tekst);document.body.appendChild(cytat);
Teraz dopiero zobaczymy w przeglądarce wynik naszych działań - na końcu dokumentu pojawi się (zazwyczaj) wcięty tekst "przykładowy cytat".
Michał Górny 1
04 kwietnia 2006, 07:41
marcoos 3
04 kwietnia 2006, 09:13
olórin 4
04 kwietnia 2006, 09:38
psz 7
07 kwietnia 2006, 23:21