Operacje na obiekcie DOM w JavaScript

W poprzednim artykule wprowadziłem Cię do obiektu DOM, teraz pora przejść do praktyki. Pokaże Ci jak pobierać konkretne elementy z drzewa DOM i jak je modyfikować. Także, dzięki temu że na pewno zapoznałeś się już z wprowadzeniem, które omówiłem w poprzednim artykule, tym razem bez żadnego wstępu możemy zabierać już się do konkretów.

Wróćmy do przykładu z poprzedniego artykułu:

<!DOCTYPE html>
<html">
<head>
    <title>Document Object Model</title>
</head>
<body>

    <div id="container">
        <button id="zapisz">Zapisz</button>
        <button id="anuluj">Anuluj</button>
    </div>
    
    <div class="simpleClass">
    </div>

    <div class="simpleClass">
    </div>

    <script src="js/skrypt.js"></script>
</body>
</html>

Wszystkie operacje w tym artykule będę pisał bezpośrednio w pliku js/skrypt.js do którego odwołałem się w powyższym html'u.

Wspomniałem Ci w poprzednim artykule, że DOM możesz traktować jako zwykły obiekt. Zatem każdy obiekt ma swoje właściwości oraz metody. I tak samo jest również z DOM:

document.title = 'Nowy tytuł!';

Dzięki takiemu zabiegowi, zmieni się tytuł Twojej strony (widoczny w nagłówku). Jest kilka metod, dzięki którym możesz pobrać konkretny element jaki Cię interesuje. Zacznijmy od metody querySelector.

let container = document.querySelector('#container');

Metoda querySelector przyjmuje jako parametr takie same selektory jakie używasz w CSS i zwraca 1 element pasujący do selektora. Dzięki tej metodzie pobraliśmy div z id container i ten div został przypisany do zmiennej container. Od tej pory wszystkie zmiany na zmiennej będą zmieniać drzewo DOM. Tak jak we wszystkich obiektach w JavaScript, do właściwości oraz metod obiektu DOM możesz odwoływać się po kropce.

container.innerHTML = '<button>Nowy przycisk</button>';

Dzięki właściwości innerHTML możesz wstawić wewnętrzny html do div. Teraz na stronie wyświetli się tylko jeden przycisk - "Nowy przycisk". Ponieważ nadpisał on 2 stare przyciski. Oczywiście również możesz dodać nowy przycisk do pozostałych, bez nadpisywania. Używając do tego znanej Ci już składni:

container.innerHTML += '<button>Nowy przycisk</button>';

Dzięki takiemu zapisowi nowy przycisk zostanie dodany na stronę, bez nadpisywania pozostałych, które zostały juz dodane wcześniej.

Kolejną ciekawą metodą do pobierania elementów z drzewa DOM jest metoda querySelectorAll, która różni się tym od metody querySelector że pobiera wszystkie pasujące elementy. W przypadku querySelector był pobierany tylko 1 dopasowany element.

let buttons = document.querySelectorAll('button');

W naszym wypadku zmienna buttons, a właściwie tablica buttons będzie zawierać 2 elementy, 2 przyciski: zapisz oraz anuluj. Do tych elementów możesz odwoływać się za pomocą indeksów lub za pomocą pętli, które opisywałem we wcześniejszych artykułach.

buttons[0].innerText = 'OK';
buttons[1].innerText = 'Exit';

Taki zapis zmieni teksty wyświetlane na pobranych wcześniej przyciskach.

Myślę, że 2 powyższe metody pobierania elementów są najbardziej popularne, ale przedstawię Ci jeszcze 3 inne metody, które mogą Ci się przydać.

Dzięki metodzie getElementById możesz pobrać element po podanym w parametrze id.

let buttonSave = document.getElementById('zapisz');
buttonSave.style.backgroundColor = '#fff';

Powyższym sposobem pobraliśmy element po id, tym razem był to przycisk o id zapisz, a następnie dla tego przycisku został ustawiony kolor tła na biały.

Podobnie za pomocą metody getElementsByClassName możesz pobrać elementy, które posiadają daną klasę. Zostaje zwrócona kolekcja elementów.

let divs = document.getElementsByClassName('simpleClass');
divs[0].innerHTML += '<button>Dodany przycisk</button>'

Musisz pamiętać, że podobnie jak w metodzie querySelectorAll do zmiennej zostanie przypisana kolekcja pasujących elementów.

Ostatnia metoda, jaką przedstawię Ci w tym artykule to metoda getElementsByTagName.

let buttons = document.getElementsByTagName('button');
for (const button of buttons) 
    button.style.color = '#ff0000';

Dzięki powyższej metodzie zostaną pobrane wszystkie buttony ze strony, a następnie każdemu z nich zostanie przypisany kolor czcionki - czerwony.

Na koniec przypomnę Ci o tym, że pobrany przez Ciebie element może nie istnieć na stronie, wówczas zostanie zwrócony null.

let container123 = document.querySelector('#container123');
console.log(container123); //null

Warto zawsze zabezpieczać się przed takimi sytuacjami, na przykład używając do tego instrukcji warunkowej:

let container123 = document.querySelector('#container123');
if(container123) {
    container123.innerHTML += '<button>Dodany przycisk</button>'
} else {
    //null
}

To wszystko co chciałem Ci przekazać w tym artykule. Zapraszam Cię do kolejnych artykułów z serii podstaw programowania w języku JavaScript.

Poprzedni artykuł - Wprowadzenie do DOM w JavaScript.
Następny artykuł - Zdarzenia w JavaScript.

Blog Dla Młodszych Programistów C#/.NET

Operacje na obiekcie DOM w JavaScript

Dodaj komentarz

Wyszukiwarka

Tagi

Najnowsze artykuły

Losowe artykuły