Node#
Node.textContent#
Właściwość textContent zwraca lub ustawia zawartość tekstową dla danego węzła oraz jego potomków.
Opis działania#
Samo wywołanie i poszczególne jego części najlepiej objaśnić na zapisie składniowym:
var all_text = node.textContent; // getting node.textContent = new_value; // setting
gdzie poszczególne człony oznaczają:
- all_text - łańcuch znakowy reprezentujący aktualną zawartość tekstową węzła oraz jego potomków lub wartość
null. - node - węzeł będący obiektem kontekstu.
- new_value - łańcuch znakowy reprezentujący nową zawartość tekstową węzła. Wartość
nullma identyczne działanie jak przekazanie pustego łańcucha znakowego.
W zależności od rodzaju węzła i podejmowanej akcji muszą zostać wykonane następujące kroki:
Odczyt wartości atrybutu (getting):
Typ węzła textContent DocumentFragment,Element,Attr*,Entity*,EntityReference*Zwracanie odbywa się według następującego algorytmu:
- Zwróć połączenie danych tekstowych ze wszystkich węzłów typu
Text, zgodnie z porządkiem drzewa, będących potomkami w obiekcie kontekstu.
Text,Comment,ProcessingInstruction,CDATASection*Zwracanie odbywa się według następującego algorytmu:
- Zwróć dane tekstowe z obiektu kontekstu.
Identyczny efekt można uzyskać za pomocą poleceń:
Document,DocumentType,Notation*Zwracanie odbywa się według następującego algorytmu:
- Zwróć wartość
null.
- Zwróć połączenie danych tekstowych ze wszystkich węzłów typu
Zmiana wartości atrybutu: (setting):
Typ węzła textContent DocumentFragment,Element,Attr*,Entity*,EntityReference*Ustawianie odbywa się według następującego algorytmu (przekazana wartość
nulljest traktowana jak pusty łańcuch znakowy):- Niech node będzie wartością
null. - Jeśli przekazana wartość nie jest pustym łańcuchem znakowym to ustaw node na nowy węzeł typu
Text, którego danymi tekstowymi jest przekazana wartość. - Zastąp wszystko węzłem node w obiekcie kontekstu.
Przekazanie wartości
nulllub pustego łańcucha znakowego pozwala na szybkie i wygodne usunięcie całej zawartość danego węzła.Text,Comment,ProcessingInstruction,CDATASection*Ustawianie odbywa się według następującego algorytmu (przekazana wartość
nulljest traktowana jak pusty łańcuch znakowy):- Zastąp dane tekstowe z węzłem będącym obiektem kontekstu, przesunięciem będącym wartością
0, licznikiem wskazywanym przez atrybutlengthoraz danymi tekstowymi ustawionymi na przekazaną wartość.
Identyczny efekt można uzyskać za pomocą poleceń:
Document,DocumentType,Notation*Nic nie rób.
- Niech node będzie wartością
W celu pobrania lub zmiany zawartości tekstowej węzła typu Element początkujący programiści bardzo często sięgają po właściwość Element.innerHTML. Nie jest to dobre rozwiązanie, tekst musi zostać dodatkowo sparsowany (gorsza wydajność) oraz jest podatny na ataki typu XSS. Przy odczycie i ustawianiu surowego tekstu najlepiej używać wyłącznie właściwość textContent (lub jej odpowiedniki).
Prosty przykład:
<script>
document.write("<p>Pierwszy akapit.</p>");
document.write("Tekst1");
document.write("<br>");
document.write("Tekst2");
document.write("<br>");
document.write(document.body.textContent); // "Tekst1Tekst2"
document.write("<br>");
document.write(document.textContent); // null
document.write("<br>");
var newFragment = document.createDocumentFragment(); // tworzymy nowy pusty fragment
document.write(newFragment.textContent); // "" - pusty łańcuch
newFragment.textContent = "Tekst fragmentu";
document.write(newFragment.textContent); // "Tekst fragmentu"
// Zmieniamy zawartość tekstową BODY po upływie 5 s
setTimeout(function(){
document.body.textContent = "Nowa zawartość tekstowa BODY.";
}, 5000);
</script>Składnia Web IDL#
interface Node : EventTarget { attribute DOMString? textContent; }