Kontynuując naszą przygodę z JavaScriptem, dziś przyjrzymy się trzem kluczowym właściwościom: innerText, textContent oraz value.

Choć na pierwszy rzut oka mogą wydawać się podobne, każda z nich pełni nieco inną rolę w manipulacji treścią na stronie. Zaczynajmy!

innerText vs. textContent

Obie te właściwości pozwalają na odczytanie lub modyfikację tekstu wewnątrz elementu HTML. Jednak różnią się w kilku kluczowych aspektach:​

• textContent: Zwraca całą zawartość tekstową danego elementu, niezależnie od tego, czy jest ona widoczna dla użytkownika. Oznacza to, że pobiera również tekst z ukrytych elementów (np. tych z display: none).​

• innerText: Zwraca tylko widoczny tekst, pomijając zawartość ukrytą za pomocą stylów CSS. Dodatkowo, innerText uwzględnia stylowanie, takie jak text-transform, co może wpływać na zwracany tekst.​

Przykład:

kod HTML

<div id="example">
Widoczny tekst.
<span style="display: none;">Ukryty tekst.</span>
</div>

kod JavaScript

const element = document.getElementById("example");
console.log(element.textContent); // "Widoczny tekst.\n Ukryty tekst."
console.log(element.innerText); // "Widoczny tekst."

Właściwość value

W przypadku elementów formularza, takich jak pola tekstowe (<input type="text">), właściwość value pozwala na odczytanie lub ustawienie wartości wprowadzonej przez użytkownika.​

Przykład:

kod HTML

<label for="username">Nazwa użytkownika:</label>
<input type="text" id="username" value="DomyślnaWartość">
<button onclick="showValue()">Pokaż wartość</button>

kod JavsScript

function showValue() {
const inputElement = document.getElementById("username");
alert(inputElement.value); // Wyświetli aktualną wartość pola tekstowego
}

Tutaj, kliknięcie przycisku spowoduje wyświetlenie aktualnej zawartości pola tekstowego w oknie alertu.

Podsumowanie dla textContent, innerText oraz value

• textContent: Używamy, gdy chcesz pobrać lub ustawić cały tekst wewnątrz elementu, niezależnie od jego widoczności.​

• innerText: Stosujemy, gdy zależy Ci na tekście widocznym dla użytkownika, z uwzględnieniem stylów CSS.​

• value: Niezastąpiona przy pracy z elementami formularza, pozwala na manipulację wartościami wprowadzonymi przez użytkownika.​

Trzeba pamiętać, że świadome korzystanie z tych właściwości pozwoli na efektywną i precyzyjną manipulację treścią na stronach internetowych.