Witaj w DHTML Zone










Lekcja 2. Document Object Model & Window
Model
Poza właściwościami, obiekt document posiada także własne metody pozwalające na
zmianę zawartości całego dokumentu, gdzie możemy dodawać nowe elementy.
Skorzystaliśmy już z jednej z nich - innerText, teraz sprawdźmy w działaniu
pozostałe:
Aby rozpoznać różnice pomiędzy nimi utwórzmy element, który będzie dynamicznie
zmieniał zawartość

<div ID="Tekst">To jest tekst który zaraz się
zmieni</div>
oraz 4 funkcje wykorzystujące funkcje innerText, outerText, innerHTML, outerHTML:
<script language="VBScript">
Sub InnerT()
document.all("Tekst").innerText=document.all("input")
End Sub
Sub OuterT()
document.all("Tekst").outerText=document.all("input")


End Sub
Sub InnerH()
document.all("Tekst").innerHTML=document.all("input")

End Sub
Sub OuterH()
document.all("Tekst").outerHTML=document.all("input")

End Sub
</scipt>

Następnie tworzymy cztery przyciski reagujące na
odpowiednie funkcje, oraz EditBox w którym będziemy wpisywać nowe wartości:

To jest tekst który będziemy zmieniać




Teraz możemy rozpocząć dynamiczną zmianę elementu podstawiając na jego miejsce co
tylko będziemy chcieli:
Na początek zmienimy jego wewnętrzną zawartość posługując się właściwością
innerText, która jest referencją tego co znajduje się pomiędzy formatkami np. <div>innerText</div>. Oczywiście możemy wpisać również ciąg HTML np.

Wpisz lub zaznacz i użyj schowka( clipboardu ): <div
style="color:red"> To jest nadal tekst </div>

Jeśli przycisnąłeś przycisk innerText zauważyłeś, że wszystkie parametry HTML są
widoczne. Stało się tak ponieważ metoda ta interpretuje wszystkie znaki jako ciąg
tekstowe. Teraz wykorzystajmy tą samą linię kodu wykonując skrypt pod przyciskiem
InnerHTML.
Niestety pojawia się błąd. Dlaczego? To proste. Próbowaliśmy zamienić zawartość
formatki drugą wewnętrzną, a to czasami jest niemożliwe. Wpisując jednak ciąg:

<b>x86</b><u>magazyn</u><i>internetowy</i>


ukaże się nam ciąg wraz ze zmienionym typem czcionki. InnerHTML wstawia więc do
formatki ciąg HTML, który jest interpretowany przez przeglądarkę. Co natomiast
przycisnąć jeśli chcielibyśmy zmienić wszystko razem ze style wyświetlania? Użyjmy
outerHTML:


<a href="http://www.x86.info.pl" id="Tekst"
style="font-size:6mm;color:red">Magazyn x86</a>

Gdybyśmy zamiast przyporządkować id="Tekst" wpisali cokolwiek innego lub wogóle
nie wpisali identyfikatora nasz kod przestałby działać, gdyż wymiana linii na nową
spowodowałaby utratę informacji o nazwie elementu.

Ostatnią funkcją jest outerText - służy on do wymiany całego elementu HTML dowolnym
ciągiem, który zostanie zinterpretowany jako tekst. W przeciwieństwie do innerHTML
ostatecznie usuwa on formatkę wraz z zawartością co eleminuje możliOczywiście
wykonanie powyższych funkcji nie powoduje jakichkolwiek zmian w kodzie. Wszystko dzieje
się dynamicznie w trakcie przeglądania strony i wraca do normy po ponownym załadowaniu
dokumentu. Oprócz zmian jakie zachodzą w dokumencie HTML dynamicznie czasem istnieje
potrzeba od razu zamiany jakiegoś ciągu bez potrzeby nadawania identyfikatorów i tym
podobnych funkcji. Do naszego następnego przykładu wykorzystajmy jeszcze jeden obiekt - screen, z którego do tej pory nie korzystaliśmy.






Sub InnerT()
document.all("Tekst").innerText=document.all("inputbox").value

End Sub
Sub OuterT()
document.all("Tekst").outerText=document.all("inputbox").value



End Sub
Sub InnerH()
document.all("Tekst").innerHTML=document.all("inputbox").value


End Sub
Sub OuterH()
document.all("Tekst").outerHTML=document.all("inputbox").value

End Sub