Programowanie w JavaScript Rusz głową!

272

Rozdział 6.

Zastosowanie właściwości innerHTML

Dostęp do kodu HTML w elemencie

:áDĞFLZRĞüinnerHTML

jest ważną właściwością, której można używać do pobrania lub zmiany

zawartości elementu. Kiedy odczytamy jej wartość, poznamy zawartość umieszczoną

wewnątrz

danego elementu, z pominięciem jego znaczników HTML. Właśnie ta „zawartość” sprawia, że

w nazwie właściwości występuje słowo „inner” (czyli „wewnętrzny”). Teraz wykonamy niewielki

eksperyment. Spróbujemy wyświetlić zawartość elementu

planet

w oknie konsoli, rejestrując

w tym celu wartość właściwości

innerHTML

. Oto wynik.

Alarm czerwony:

rozpoczÚto ostrzaï

z fazeröw!

.RQVROD-DYD6FULSW

Wszystko jest

w porzÈdku

.RQVROD-DYD6FULSW

I zmieni się także

zawartość strony!

var planet = document.getElementById("greenplanet");

console.log(planet.innerHTML);

Przekazujemy właściwość planet.innerHTML

w wywołaniu console.log, by wyświetlić

zawartość elementu w oknie konsoli.

Wartością właściwości innerHTML jest

zwyczajny łańcuch znaków, zatem zostanie on

wyświetlony w oknie konsoli, tak jak każdy

inny łańcuch.

A teraz spróbujmy zmienić wartość właściwości

innerHTML

. Operacja ta będzie

równoznaczna ze zmianą zawartości elementu

<p>

o identyfikatorze

”greenplanet”

na stronie, co oznacza, że zauważymy ją także w oknie przeglądarki!

var planet = document.getElementById(”greenplanet”);

planet.innerHTML = ”Alarm czerwony: rozpoczÚto ostrzaï z fazeröw!”;

console.log(planet.innerHTML);

Teraz zmieniamy zawartość elementu, przypisując

właściwości innerHTML łańcuch znaków „Alarm

czerwony: rozpoczęto ostrzał z fazerów!”.

A zatem, kiedy zarejestrujemy

zawartość właściwości innerHTML,

w oknie konsoli pojawi się nowy

łańcuch znaków.

jesteś tutaj

273

Interakcja ze stronami WWW

Hej, usiądź i zrób sobie chwilkę przerwy. Być może nurtuje Cię pytanie: „Chwila, kołacze mi się po

głowie coś o identyfikatorach i klasach, jednak nie pamiętam szczegółów, ale czy to wszystko nie

było związane z CSS?”. Nie ma problemu, odświeżymy Ci szybko pamięć, byś znalazł odpowiedni

kontekst i już niebawem będziesz mógł wrócić do dalszej nauki…

Spójrz na poniższy przykład.

<div id="menu">

...

</div>

Teraz możesz wybrać ten element w arkuszu stylów CSS, by określić jego wygląd, np. tak:

div#menu {

background-color: #aaa;

}

Dodatkowo na podstawie tego samego identyfikatora możemy odwołać się do elementu

w kodzie JavaScript.

Temu elementowi <div> nadajemy unikalny

identyfikator o wartości „menu”. Tylko

ten jeden element strony powinien mieć

taki identyfikator.

div#menu wybiera element

div o identyfikatorze menu,

więc możemy zdefiniować styl

określający postać tego jednego

elementu i tylko jego.

div#menu jest

seleketorem

indentyfikatora.

<h3 class=”drink”>Truskawkowa eksplozja</h3>

<h3 class=”drink”>Cytrynowy chïöd</h3>

Oba elementy <h3> należą do

klasy „drink”. Klasa przypomina

nieco grupę; do tej samej grupy

może jednocześnie należeć wiele

elementów.

Nie zapominaj jednak, że istnieje także inny sposób oznaczania elementów: przy użyciu

klas. Klasy umożliwiają oznaczanie całych grup elementów. Oto przykład.

W języku HTML identyfikatory dają możliwość unikalnej identyfikacji konkretnych

elementów. A kiedy element jest unikalny, możemy odwołać się do niego w stylach CSS,

by określić jego wygląd. A jak się już przekonałeś, w kodzie JavaScript na podstawie

identyfikatora można pobrać konkretny element.

5\[DMKGQFĆYKGĒGPKGRCOKôEK

var myMenu = document.getElementById(”menu”);

Także na podstawie klas można wybierać elementy i to zarówno w arkuszach stylów CSS,

jak i w kodzie JavaScript. O tym, jak korzystać z klas w języku JavaScript, dowiesz się

dalej w tej książce. A swoją drogą, jeśli to krótkie przypomnienie Ci nie wystarczyło,

sugerujemy, żebyś zajrzał do rozdziału 7. książki

Head First HTML and CSS. Edycja

polska

lub Twojego ulubionego podręcznika dotyczącego HTML i CSS.