JavaScript - DHTML, DOM, właściwości węzłów, metoda item, klonowanie węzłów, zamienianie węzłow

Kod:

Ewentualne Objaśnienia:

Tutaj na początek przedstawiam Wam listę właściwości węzłów w standardzie DOM (odwoływanie tak jak we wcześniejszym przykładzie węzeł.właściwość) :
- parentNode - węzeł macierzysty dla danego
- childNodes - lista el. potomnych danego węzła
- firstChild - pierwszy el. potomny
- lastChild - ostatni
- nextSibling - kolejny el. będący potomnym tego samego macierzystego węzła
- previousSibling - poprzedni -||-
- nodeValue - zwraca tekst węzła dla węzłów tekstowych, dla innych null
- nodeType - zwraca typ węzła, 1 to element, 2 atrybut, a 3 węzeł tekstowy
- nodeName - nazwa węzła lub atrybutu (np. br, hr, form, div itd.)

Metoda item służy do analizowania, odwoływania się do elementów. Tak jak w jednym z przykładów pobieraliśmy listę znaczników span ze strony przez getElementsByTagName a potem odwoływaliśmy się var element = elementy[0] . Można zrobić podobnie, ale właśnie poprzez item korzystając z zapisu : var element = elementy.item(0) .

Kolejna ciekawa rzecz związana jest z zamienianiem węzłów w dokumencie. Załóżmy, że mamy potrzebę zamienienia jakiegoś spisu na stronie, który jest w postaci tabeli. Chcemy troszkę go zmienić, coś w nim poprzestawiać, dodać itp. Ale nie chcemy żeby odwiedzający widział te pojedyncze zmiany na bieżąco tylko już zobaczył efekt finalny. Dlatego kopiujemy (klonujemy) sobie tabelę, dokonujemy zmian na kopii, a następnie zamieniamy oryginalną na kopie :
    - klonowanie węzłów odbywa się przez metodę cloneNode() przykładowo :
        var tabelaOrg = document.getElementById("tabela_glowna");
        var sklonowana = tabelaOrg.cloneNode(true);
    - true w nawiasie metody klonowania oznacza, że należy skopiować cały węzeł oraz wszystkie jego el. potomne. Jeśli nie chcemy kopiować el. potomnych należy podać false
    - po dokonaniu modyfikacji zastępujemy tabele poprzez metodę replaceNode() :
        var tabelaRodzica = tabelaOrg.parentNode;
        tabelaRodzica.replaceChild(sklonowana, tabelaOrg);