Warsztaty Webowe grupa średniozaawansowana

Czym jest DOM?

DOM - Document Object Model

Moje wyjaśnienie:

DOM przedstawia stronę internetową jako ustrukturyzowane drzewo węzłów, którymi możemy manipulować za pomocą np. JS-a

Lepsze wyjaśnienie:

Introduction to the DOM

TO samo ale po polsku

Jeśli chcemy podejrzeć jak wygląda DOM na naszej stronie, możemy użyć DOM Viewer lub zanurkować w narzędzia developerskie w naszej przeglądarce!

2. JS i DOM

Do pozyskania elementu lub elementów DOM-u używamy:

document.getElementById("id")

document.getElementsByTagName("tag")

document.getElementsByClassName("class")

Elementy możemy tworzyć, dodawać i usuwać:

document.createElement(element)

document.removeChild(element)

document.appendChild(element)

document.replaceChild(element)

Zmiana atrybutów i stylów:

element.attribute = new value

element.style.property = new style

Przykład:

Zadanie 5.1

Pobierz plik input.html, uzupełnij funkcje save_inputs() w taki sposób by po jej wywołaniu do listy <ul> został dodany nowy element <li> z zawartością pól #input_1 i #input_2

3. DOM Events

Eventy generowane przez DOM możemy obsługiwać na dwa sposoby:

- event listener

element.addEventListener(type, handler, options)

type - typ eventu który chcemy obsłużyć

handler - funkcja która zostanie wywołana

options - dodatkowe opcje

Dostępne typy eventów

- on-events

Element DOM-u może posiadać specjalne pola które służą do obsługiwania określonych eventów, np. onclick, onkeypress, onfocus ...

Zadanie 5.3

Stwórz prostą stronę na której będzie znajdował się czerwony kwadrat 200px x 200px (zwyczajny div). Dodając odpowiedni event spraw że po każdym kliknięciu kwadrat zmieni swój kolor.

Zadanie 5.3.1*

Zwiększ ilość kwadratów, każdemu przypnij event który sprawi że po najechaniu myszką kolor danego kwadratu się zmieni.

Zadanie DOMowe

Stwórz stronę na której zostaną wstawione zdjęcia wszystkich kotków znajdujących się w tablicy w pliku koty.txt. Po kliknięciu na zdjęcie kota powinien wyskoczyć alert (window.alert()) z jego imieniem oraz poziomem słodkości.

Praca domowa dotycząca projektu

Prosiłbym o dodanie do Waszych projektów arkusza stylów czyli css. Macie na to dwa tygodnie.