Uzyskaj tekst elementu HTML za pomocą JavaScript
Czasami programiści muszą ustawić lub uzyskać tekst elementu HTML, aby wykonywać różne zadania. Aby uzyskać tekst elementu, użyj „TextContent”Własność z właściwościami InnerHTML i Innertext. Element.TextContent to funkcja DOM poziomu 3, która jest w pełni obsługiwana we wszystkich przeglądarkach.
W tym artykule wyjaśniono procedurę otrzymania tekstu elementu za pomocą JavaScript.
Jak uzyskać tekst elementu HTML za pomocą JavaScript?
Zastosuj następujące podejścia do uzyskania tekstu elementu za pomocą JavaScript:
- właściwość TextContent z właściwością InnerHtml
- właściwość TextContent z właściwością Innertext
Metoda 1: Zdobądź tekst elementu HTML za pomocą właściwości TextContent z właściwością InnerHTML
Treść tekstową określonego węzła i jego potomków można ustawić lub zwrócić za pomocą „TextContent" atrybut. Zwraca połączenie treści tekstu każdego węzła dziecięcego. Jednak pusty ciąg jest zwracany jako wyjście na wypadek pustego elementu.
Składnia
Postępuj zgodnie z podaną składnią, aby wykorzystać „TextContent„Właściwość do uzyskania tekstu elementu HTML:
element.TextContent
Przykład
W poniższym przykładzie utworzymy listę nieuporządkowaną z elementami dziecięcymi
- Html
- CSS
- JavaScript
- Węzeł JS
- Reagować
Utwórz przycisk i dołącz „na kliknięcie„Wydarzenie, które wywoła zdefiniowane„getText ()" metoda:
Utwórz akapit, przypisując do niego identyfikator, w którym wyświetlone zostanie wyjście:
Po wykonaniu powyższego kodu HTML wyjście będzie następujące:
Teraz, w pliku JavaScript, najpierw zdobądź element za pomocą „getElementById ()„Metoda, a następnie pobrać swój tekst za pomocą„TextContent„Własność i przechowuj w zmiennej”tekst". Następnie zadzwoń do „InnerHtml„Właściwość, która wydrukuje tekst na określonym polu w jednym rzędzie z przestrzeniami.
funkcja getText ()
var text = dokument.getElementById („lista”).TextContent;
dokument.getElementById („tekst”).innerHtml = tekst;
Odpowiednie wyjście będzie następujące:
Sprawdźmy drugą metodę!
Metoda 2: Uzyskaj tekst elementu HTML za pomocą właściwości TextContent z właściwością Innertext
Aby uzyskać tekst w tym samym formacie, co pokazano na stronie internetowej, jak w formie listy, użyj „Innertext„Nieruchomość z„TextContent" nieruchomość.
Składnia
Dla właściwości Innertext wykorzystywana jest następująca składnia:
element.Innertext
Przykład
W pliku JavaScript, najpierw zdefiniuj funkcję „getText ()„To wywoła przycisk, kliknij, aby uzyskać treść tekstu listy nieopisanej elementu:
funkcja getText ()
var text = dokument.getElementById („lista”).TextContent;
dokument.getElementById („tekst”).innerText = tekst;
Wyjście
Powyższe gif oznacza, że „Innertext„Nieruchomość z„TextContent„Właściwość otrzymuje tekst elementu HTML w formacie listy.
Wniosek
Aby uzyskać tekst elementu HTML, użyj „TextContent„Nieruchomość z„InnerHtml" I "Innertext" nieruchomości. InnerHTML wydrukuje tekst elementu w kolejności wbudowanej, a wewnętrzny tekst drukuje tekst w tym samym formacie. W tym artykule wyjaśniono procedurę uzyskania tekstu elementu za pomocą JavaScript.