nodeValue vs innerHTML i textContent. Jak wybrać?

Używam zwykłego js do zmiany wewnętrznego tekstu elementu etykiety i nie byłem pewien, na jakiej podstawie powinienem użyć innerHTML, nodeValue lub textContent. Nie muszę tworzyć nowego węzła ani zmieniać elementów HTML ani nic - po prostu zamień tekst. Oto przykład kodu:

var myLabel = document.getElementById("#someLabel");
myLabel.innerHTML = "Some new label text!"; // this works

myLabel.firstChild.nodeValue = "Some new label text!"; // this also works.

myLabel.textContent = "Some new label text!"; // this also works.

Przejrzałem źródło jQuery i używa ono nodeValue dokładnie raz, ale innerHTML i textContent kilka razy. Potem znalazłem ten test jsperf, który wskazuje, że firstChild.nodeValue jest znacznie szybszy. Przynajmniej tak to rozumiem.

Jeśli metoda firstChild.nodeValue jest znacznie szybsza, jaki jest haczyk? Czy nie jest szeroko obsługiwany? Czy jest jakiś inny problem?

Różnice między textContent / innerText / innerHTML na MDN.

I odpowiedź Stackoverflow na temat innerText / nodeValue.

Podsumowanie

1. innerHTML analizuje zawartość jako HTML, więc trwa to dłużej.
2. nodeValue używa prostego tekstu, nie analizuje HTML i jest szybszy.
3. textContent używa prostego tekstu, nie analizuje HTML i jest szybszy.
4. innerText Uwzględnia style. Na przykład nie otrzyma ukrytego tekstu.

innerTextnie istniał w Firefoksie aż do FireFox 45 według caniuse, ale jest teraz obsługiwany we wszystkich głównych przeglądarkach.

.textContentwyjścia text/plainpodczas .innerHTMLwyjść text/html.

Szybki przykład:

var example = document.getElementById('exampleId');

example.textContent = '<a href="https://google.com">google</a>';

wyjście: <a href="http://google.com"> google </a>

example.innerHTML = '<a href="https://google.com">google</a>';

wyjście: google

W pierwszym przykładzie widać, że dane wyjściowe typu text/plainnie są analizowane przez przeglądarkę i powodują wyświetlenie pełnej treści. Dane wyjściowe typu text/htmlinformują przeglądarkę o przeanalizowaniu go przed wyświetleniem.

MDN innerHTML , MDN textContent , MDN nodeValue

Dwa, które dobrze znam i z którymi pracuję, to innerHTML i textContent .

Używam textContent, gdy chcę tylko zmienić tekst akapitu lub nagłówka w następujący sposób:

var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')

setTimeout(function () {
  heading.textContent = 'My New Title!'
  paragraph.textContent = 'My second <em>six word</em> story.'
}, 2000)

em { font-style: italic; }

<h1 id="heading">My Title</h1>
<p id="paragraph">My six word story right here.</p>

Tak więc textContent po prostu zmienia tekst, ale nie analizuje kodu HTML, co możemy stwierdzić na podstawie znaczników widocznych w postaci zwykłego tekstu w wyniku.

Jeśli chcemy analizować HTML, używamy innerHTML w następujący sposób:

var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')

setTimeout(function () {
  heading.innerHTML = 'My <em>New</em> Title!'
  paragraph.innerHTML = 'My second <em>six word</em> story.'
}, 2000)

em { font-style: italic; }

<h1 id="heading">My Title</h1>
<p id="paragraph">My six word story right here.</p>

Zatem w tym drugim przykładzie ciąg, który przypisuję do właściwości innerHTML elementu DOM jako HTML.

To jest niesamowite i duża luka w zabezpieczeniach:)

(poszukaj XSS, jeśli chcesz wiedzieć o bezpieczeństwie)

innerText jest mniej więcej tym, co uzyskasz, jeśli zaznaczysz tekst i skopiujesz go. Elementy, które nie są renderowane, nie są obecne w innerText.

textContent jest połączeniem wartości wszystkich TextNodes w poddrzewie. Czy renderowane czy nie.

Oto świetny post opisujący różnice

InternalHTML nie powinien być uwzględniany w porównaniu z innerText lub textContent, ponieważ jest zupełnie inny i naprawdę powinieneś wiedzieć dlaczego :-) Sprawdź to osobno

[Uwaga: ten post dotyczy bardziej udostępniania konkretnych danych, które mogą komuś pomóc, niż mówienia innym, co mają robić]

Gdyby ktoś się zastanawiał, co jest dziś najszybsze: https://jsperf.com/set-innertext-vs-innerhtml-vs-textcontent & https://jsperf.com/get-innertext-vs-innerhtml-vs-textcontent ( dla drugiego testu zawartość przęsła to zwykły tekst, wyniki mogą się zmieniać w zależności od jego zawartości)

Wygląda na .innerHtmlto, że jest to wielki zwycięzca pod względem czystej prędkości!

(UWAGA: mówię tutaj tylko o szybkości, możesz chcieć poszukać innych kryteriów, zanim wybierzesz, którego użyć!)

Element.innerHTML do setlub getkod HTML elementu.

Np. Mamy z tym <h1>tag i mocny styl:

<h1 id="myHeader" style="color: green"><strong>My Header</strong> Normal Text</h1> Aby getzawartość elementu miała identyfikator równy „myHeader”, zrobimy to samo:

var element = document.getElementById("myHeader");
element.innerHTML

Wynik zwrotu:

<strong>My Header</strong> Normal Text`

Aby „ustawić” nową zawartość (wartość) dla tego elementu, kod będzie tutaj:

Element.innerHTML = "My Header My Text";

Więc ta właściwość działa nie tylko ze zwykłym tekstem, ale ma na celu przekazywanie lub kopiowanie kodu HTML.

=> Nie powinniśmy go używać.

Jednak wielu programistów (w tym ja) używa tego atrybutu do wstawiania tekstu na stronę internetową, a ta metoda niesie ze sobą potencjalne ryzyko:

1. Niewłaściwa operacja: wstawienie każdego tekstu tylko czasami powoduje usunięcie całego innego kodu HTML wstawionego elementu.
2. Ze względów bezpieczeństwa: oczywiście dwa powyższe przykłady są całkowicie nieszkodliwe, nawet jeśli użycie tagu nadal nie stanowi problemu, ponieważ standard HTML5 uniemożliwił wykonanie wiersza poleceń wewnątrz tagu. po umieszczeniu na stronie internetowej za pośrednictwem atrybutu innerHTML. Zobacz tę zasadę tutaj .

Z tego powodu innerHTMLnie zaleca się używania przy wstawianiu zwykłego tekstu, zamiast tego użyj textContent. textContentNieruchomość nie zrozumie, że kod można przejść jest składnia HTML, ale tylko tekst 100% nie więcej i nie mniej.

Wynik zostanie zwrócony, jeśli użyjesz textContentw powyższym przykładzie:

My Header My Text