Mam stronę "Wszystko o psach",

świetną, tylko że...

nie każdemu się to spodoba,
ale jestem raczej kociarą.

Przerobiłabym tę stronę
na "Wszystko o kotach".

Użyję JavaScript,

zamiast tylko modyfikować to HTML.

W końcu zrobię z tego
rozszerzenie przeglądarki

i każdą stronę przekształcę tak,
by dotyczyła kotów.

Byłoby wspaniale:
cały Internet o kotach!

Ta strona zawiera nagłówek,

akapit i parę zdjęć.

Będziemy je zmieniać po kolei,
zaczynając od nagłówka,

w dwóch krokach,
o których się uczyliśmy.

Krok pierwszy - to znaleźć węzeł
DOM-u zawierający ten nagłówek.

Przedtem znaleźliśmy węzeł

poleceniem "document.body",

ale teraz interesuje mnie coś
konkretnego: nagłówek h1.

A ten nagłówek h1 ma ID,

więc powinien być jedynym na stronie
tagiem o takim ID.

Jest łatwy sposób szukania
węzłów DOM-u mających ID.

Metoda nazywa się
"getElementById".

Zastosujmy to tu, w tagu "script".

Deklarujemy zmienną,
która będzie to przechowywać:

"var headingEl".

Kończę nazwy zmiennych
"El" lub "Node",

żeby wiedzieć,
że przechowują element

zwany też "node" (węzłem).

Użyjmy tej metody. Jest powiązana
z globalnym dokumentem obiektowym,

więc dajemy "document", kropkę

i "getElementById",

a potem nawiasy, bo to funkcja.

Niczego nie znajdzie tak po prostu,
bo nie wie, którego szukać ID.

W nawiasie wpisujemy szukane ID,

jako ciąg znaków w cudzysłowie.

Tutaj: "heading".

Jak ustalić, że znaleźliśmy element,

zanim zaczniemy coś z nim robić?

Jeden sposób - to funkcja
"console.log".

Zatrzymajcie film i otwórzcie
"narzędzia deweloperskie".

Wypróbujcie skrót 
Command-Option-I na Macu

lub Control-Shift-I w Windows.

Któryś powinien zadziałać.

Widzicie "h1" na konsoli?

Tak? Dobrze!

Krok pierwszy wykonany.

Znaleźliśmy element,
przechowujemy go w zmiennej.

Krok drugi.

Zmodyfikujmy element
sposobem, który już znamy:

zmieniając "innerHTML".

Zobaczmy... Napiszemy:

"headingEl.innerHTML ="...

chwila prawdy...

Koty!

"Wszystko o kotach". Gotowe!

Zaczęliśmy. Kotyfikacja ruszyła.

Teraz spróbujcie zrobić
coś podobnego w zadaniu.