Spisie treści
W pierwszej części tego samouczka widzieliśmy, jak zbudowany jest DOM i jak działa, w tym będziemy kontynuować pracę z nim w celu rozszerzenia jego funkcjonalności i możliwości manipulowania wszystkimi elementami naszego dokumentu HTML.Praca z DOM
Aby uzyskać dostęp do obiektu dokumentu, używamy globalnej zmiennej dokumentu; Ta zmienna jest jednym z kluczowych obiektów, które tworzy dla nas przeglądarka, ponieważ to za pośrednictwem tego obiektu dokumentu możemy uzyskać dostęp do informacji o dokumencie jako całości i daje nam indywidualny dostęp do każdego obiektu dokumentu.
Jak zawsze, zobaczmy przykład, za pomocą którego możemy pogodzić znaną nam teorię ze sposobem jej zastosowania w rzeczywistości.
PrzykładIstnieje wiele różnych rodzajów owoców - tylko ponad 500 odmian bananów. Zanim dodamy niezliczone rodzaje jabłek, pomarańczy i innych dobrze znanych owoców, stajemy przed tysiącami wyborów.
Jednym z najciekawszych aspektów owoców jest odmiana dostępna w każdym kraju. Mieszkam niedaleko Londynu, w okolicy znanej z jabłek.
Kod, za pomocą którego używamy SŁOŃCE Jest dość krótki i prosty, jednak zawiera różne zastosowania, które możemy mu nadać, wyjaśnimy kod część po części, aby zobaczyć, w jaki sposób wykorzystaliśmy obiekty.
Jedną z najbardziej podstawowych czynności, którą możemy wykonać, jest uzyskanie informacji z dokumentu HTML, z którym pracujemy, więc pierwsza linia, którą umieściliśmy w naszym kodzie, właśnie to robi i możemy to zobaczyć:
dokument.napisany ("
URL: "+ dokument.URL);
W tym przypadku odczytujemy wartość nieruchomości document.URL, który zwraca adres URL bieżącego dokumentu, czyli adres URL, którego przeglądarka użyła do załadowania dokumentu, w którym mamy kod.
Widzimy też, jak korzystamy z metody pisanej:
dokument.napisany ("
URL: "+ dokument.URL);
Ta metoda po prostu dodaje treść na końcu naszego dokumentu HTML, w tym konkretnym przypadku zaczynamy od dodania tagu
a następnie właściwość URL, za pomocą której zmodyfikowaliśmy już strukturę i zawartość DOM.
Teraz następną rzeczą, którą zrobiliśmy, było wybranie wszystkich elementów, które mają znacznik p w dokumencie, do tego używamy następującej linii:
var elems = document.getElementsByTagName ("p");
Jak widzimy metodę getElementsByTagName To ten, który służy naszym celom, jednocześnie wszystko, co zbiera ta metoda, przypisujemy do zmiennych elementów.
W kolejnym wierszu wykonujemy iterację nad zmienną elems, uzyskując przypisane obiekty, do każdego, który będziemy iterować, dodamy wiersz tekstu z jego id, a później zmienimy jego atrybuty, aby zmodyfikować jego wygląd .
for (var i = 0; i <elems.length; i ++) {document.writeln ("Identyfikator elementu:" + elems [i] .id); elems [i] .style.border = "średni podwójny czarny"; elems [i] .style.padding = "4px"; }
Jak widać, do każdego elementu, który zapisaliśmy w naszych zmiennych elems, dodajemy obramowanie i dodatkowo dodajemy padding.
Po tym wszystkim zobaczmy wreszcie, jak to wszystko wygląda w przeglądarce:
POWIĘKSZAĆ
Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt
