Modyfikowanie węzłów

Wiemy już jak odnaleźć węzeł z poziomu JavaScript, utworzyć go, zniszczyć i podmienić. W tym artykule pokażę kilka metod modyfikacji węzłów.

innerHTML

To bardzo wygodna właściwość, która umożliwia odczyt, zmodyfikowanie, wstawienie, albo usunięcie kodu HTML z danego elementu DOM.

Przykład 1 - zastosowanie innerHTML

Poniżej został wstawiony akapit o id="Akapit-1". Za pomocą innerHTML zmodyfikujemy go.

To jest testowy akapit z pogrubionym tekstem.

<p id="Akapit-1">To jest testowy akapit z <strong>pogrubionym tekstem</strong>.</p>
<body>
<script>
 document.getElementById("Akapit-1").innerHTML = "A to jest zmodyfikowany tekst <strong> z pogrubionym tekstem<>";
</script>

Jak widać właściwość innerHTML jest prosta w użyciu i możemy za jej pomocą umieszczać w danym węźle cały kod HTML. Ma to swoje zalety (prostota) i wady (tracimy referencje z poziomu JavaScript do zawartości takiego węzła).

Właściwość ta umożliwia, jak widać w powyższym przykładzie, wstawianie wartości, ale jest to też właściwość umożliwiająca odczyt kodu HTML z danego węzła.

Bardzo podobną właściwością jest textContent, która odnosi się tylko do tekstu.

Przykład 2 - Usuwanie zawartości węzła

Zobaczmy przykład, który z elementu <div> usuwa zawartość kodu HTML.

<script>
	document.getElementById("Kontener").innerHTML = "";
</script>

To jest zawartość div-a

Przykład 3 - Zmiana zawartości węzła oraz stylu

Zobaczmy przykład, który do elementu <div> wstawi większą część kodu HTML, zastępując starą zawartość.

<div id="Div-1" style="border: solid; border-color:burlywood; background-color: antiquewhite; padding: 10px; margin: 10px; width:40%; text-align: center;">To jest zawartość <strong>pierwszego</strong> div-a.</div>

<script>
var w = document.getElementById("Div-1");
w.innerHTML = "<p>To jest nowa zawartość div-a.</p><p> <b>Można tu wstawić na przykład</b>:</p><ul><li>listę nieuporządkowaną</li><li>linki</li><li>grafikę</li><li>... i cokolwiek innego</li></ul>>";
w.style.textAlign = 'left';
w.style.background = 'beige';
</script>

To jest zawartość pierwszego div-a.

Przykład 4 - Przypisanie nowego stylu lub klasy do węzła.

Pamiętaj, że możesz zadziałać na całym stylu używając metody setAttribute("style", styl_CSS) lub dodać klasę setAttribute("class", nowa_klasa);

<div id="Div-1" style="border: solid; border-color:burlywood; background-color: antiquewhite; padding: 10px; margin: 10px; width:40%; text-align: center;">To jest zawartość div-a.</div>
<script>
w.setAttribute("class","boxik");
w.setAttribute("style","border: solid; border-color:burlywood; background-color: white; padding: 5px; margin: 5px; width:35%; text-align: center;");
</script>

To jest zawartość div-a.

Inne zagadnienia z tej lekcji

Document Object Model - DOM

Opis hierarchii dokumentu HTML. Oprócz tego, że przeglądarka wczytuje i wyświetla zawartość dokumentu HTML z użyciem arkuszy stylów CSS, dodatkowo zapamiętuje MODEL danego dokutemu.

Pobieranie elementów DOM

W jaki sposób w JavaScript można pobierać i modyfikować elementy struktury DOM strony internetowej? Służą do tego cztery właściwości w JavaScript: getElementById, getElementByTagName, querySelector i querySelectorAll.

Relacje między elementami DOM

Opis relacji miedzy węzłami w strukturze DOM w Javascript. Zobaczymy jakie zachodzą relacje miedzy tymi elementami. Artykuł zawiera listę właściwości węzłów i przykłady ich stosowania.

Tworzenie i usuwanie elementów

Opis metod tworzenia i usuwania węzłów w dokumencie HTML przy użyciu JavaScript. W tym artykule pokazuję, jak stworzyć, usunąć albo podmienić element strony internetowej.