Kurs obiektowego JavaScript (30)

Autor: Damian Chodorek • Opublikowany: 25 października 2014 • Ostatnia aktualizacja: 8 lutego 2015 • Kategoria: javascript, kursy

Funkcje skrótowe. Edycja elementów DOM.

Sposoby nawigowania po drzewie DOM, które poznałeś w poprzedniej lekcji, są wystarczające, aby odnaleźć te węzły, które potrzebujesz. Z drugiej strony są niewygodne. Po pierwsze sprawę utrudnia fakt, że białe znaki są traktowane jak węzły. Po drugie jeśli odrobinę zmienisz swoją stronę, Twój skrypt również będziesz musiał zmodyfikować.

Te problemy rozwiązują trzy funkcje:

  • getElementsByTagName(),
  • getElementsByName(),
  • getElementById().

Pierwsza z nich, jako parametr, przyjmuje nazwę tagu danego elementu i zwraca kolekcję (obiekt podobny do tablicy) węzłów, które mu odpowiadają.

<body>
  <p class="beg" >akapit 1</p>
  <p><em>akapit</em> 2</p>
  <p id="end" >akapit 3</p>
  <!-- jakiś HTML'owy komentarz -->
</body>
var k=document.getElementsByTagName('p');
k.length; //3
k[0]; //<p class=​"beg">​akapit 1</p>
k.item(0); ​ //<p class=​"beg">​akapit 1</p>
k[0].innerHTML; //"akapit 1"

//sposób na uzyskanie atrybutu id
k[2].id; //"end"

//sposób na uzyskanie artybutu class
k[0].className; //"beg"

//wszystkie elementy na stronie:
var a=document.getElementsByTagName("*"); 
a.length;

Pozostałe dwie funkcje działają bardzo podobnie. Jedyna różnica tkwi w tym, że pierwsza zwróci kolekcję obiektów, które posiadają atrybut name, a druga atrybut id podany jako parametr funkcji.

document.getElementById("end"); //<p id=​"end">akapit 3</p>​

Bracia, body, pierwsze i ostatnie dziecko

Bardzo przydatne okazują się również atrybuty nextSibling oraz previousSibling. Jeśli posiadasz referencję do danego elementu, możesz przy ich pomocy uzyskać dostęp do elementów sąsiednich.

var b=document.getElementById("end");
b.nextSibling; //#text
b.previousSibling; //#text

b.nextSibling.nextSibling;//<!-- jakiś HTML'owy komentarz -->

Element body również posiada swój własny, dedykowany skrót.

document.body;

Pole firstChild jest równoznaczne z konstrukcją childNodes[0], a lastChild z konstrukcją childNodes[ childNodes.length-1 ].

document.body.childNodes[1]; //<p class=​"beg">​akapit 1</p>
document.body.firstChild.nextSibling; //<p class=​"beg">​akapit 1</p>

Modyfikacja drzewa

Wiesz już jak poruszać się po drzewie. Przydałaby się możliwość jego edycji. Jak tego dokonać? Znasz już pole innerHTML.

document.body.childNodes[1].innerHTML="<em>nowy akapit 1</em>";

//element em staje się częścią drzewa:
document.body.childNodes[1].firstChild.firstChild; //"nowy akapit 1"

//innym sposobem jest użycie pola nodeValue:
document.body.childNodes[1].firstChild.firstChild.nodeValue="jeszcze nowszy akapit 1";

Modyfikacja CSS

Bardzo często jest tak, że treść chcesz zostawić w spokoju, ale za to potrzebujesz dokonać modyfikacji wyglądu. Umożliwia to pole style, które posiada w sobie pola odpowiadające poszczególnym własnościom CSS.

var ak1=document.body.childNodes[1];
ak1.style.border="1px solid green"; //zielona ramka wokół

Często własności CSS posiadają myślnik w nazwie. W JS jest to niedozwolony znak w nazwie zmiennej, zamiast niego stosujemy wielką literę kolejnego słowa. Zamiast padding-left będzie paddingLeft itp.

Oprócz stylów masz dostęp do innych atrybutów elementu, na podobnej zasadzie.

ak1.id="akapit1"
ak1.style.paddingTop="10px";

//oto efekt końcowy:
ak1; /*<p class=​"beg" style=​"border:​ 1px solid green;​ padding-top:​ 10px;​" id=​"akapit1">...​*/

W tym artykule to wszystko. Przejdź do następnej części:

Kurs obiektowego JavaScript (31)

Zobacz również
Kurs obiektowego JavaScript (28)Dokładniejsze omówienie modelu BOM. Obiekt window.
Kurs obiektowego JavaScript (29)Model DOM. Sposoby nawigowania po węzłach drzewa.
Kurs obiektowego JavaScript (31)Wstawianie, usuwanie i zamiana węzłów.
Kurs obiektowego JavaScript (32)Omówienie obiektów skrótowych w JS.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.