Programowanie w JavaScript Rusz głową!

646

Dodatek A

Obiekt document

2. Więcej operacji na DOM

W książce tej wspominaliśmy już o niektórych operacjach, jakie można wykonywać na DOM, jednak jest

ich znacznie więcej. Obiekt reprezentujący dokument oraz jego zawartość — czyli obiekt

document

oraz

różne obiekty elementów — jest pełen właściwości i metod, pozwalających na interakcję i manipulowanie

stronami wyświetlanymi w przeglądarkach.

Już wiesz, jak można używać metod

document.getElementById

oraz

document.getElementsByTagName

,

by pobierać elementy stron. Jednak obiekt

document

udostępnia także kilka innych metod, z których

można korzystać do pobierania elementów. Oto one.

document.getElementsByClassName

document.getElementsByName

document.querySelector

document.querySelectorAll

Przekaż w wywołaniu tej metody nazwę

klasy, a ona zwróci obiekt NodeList

zawierający wszystkie elementy należące

do tej klasy.

Ta metoda pobiera elementy, w których

został określony atrybut name, a jego

wartość odpowiada łańcuchowi przekazanemu

w wywołaniu metody.

Ta metoda pobiera selektor (taki jak selektor CSS)

i zwraca pierwszy element, który do niego pasuje.

Ta metoda pobiera selektor i zwraca obiekt NodeList

zawierający wszystkie elementy pasujące do tego selektora.

Poniżej przedstawiony został przykład pokazujący, w jaki sposób można użyć metody

document.querySelector

, aby pobrać element listy należący do klasy

”song”

i umieszczony w elemencie o identyfikatorze

”playlist”

.

var li = document.querySelector(”#playlist .song”);

Ten selektor informuje, że należy

odszukać element o identyfikatorze

playlist, a następnie zwrócić pierwszy

element należący do klasy song.

Czy zwróciłeś uwagę, że ten

selektor przypomina selektory

używane w arkuszach stylów CSS?

A co zrobić, gdybyśmy chcieli programowo umieścić na stronie nowe elementy? W takim

przypadku należałoby skorzystać z kombinacji metod obiektu

document

oraz metod obiektu

elementu, co pokazaliśmy na poniższym przykładzie.

var newItem = document.createElement(”li”);

newItem.innerHTML = ”Yellow Submarine”;

var ul = document.getElementById(”playlist”);

ul.appendChild(newItem);

Istnieje jeszcze znacznie więcej operacji, które można wykonywać na DOM

przy użyciu kodu JavaScript. Doskonałe wprowadzenie do tych zagadnień

możesz znaleźć w książce

HTML5. Rusz głową!.

ul

li li

Najpierw tworzymy nowy

element <li> i określamy

łańcuch znaków, który będzie

stanowił jego zawartość.

Następnie pobieramy element <ul>,

w którym chcemy umieścić (jako dziecko)

nowy element <li>, a następnie dodajemy

element <li> do <ul>.