innerText vs innerHTML vs label vs text vs textContent vs externalText

Mam listę rozwijaną, która jest wypełniona przez Javascript.

Decydując o tym, jaka powinna być domyślna wartość do wyświetlenia podczas ładowania, zdałem sobie sprawę, że następujące właściwości pokazują dokładnie te same wartości:

• innerText
• innerHtml
• label
• text
• textContent
• outerText

Moje własne badania pokazują testy benchmarkingowe lub porównania kilku z nich, ale nie wszystkich.

Mogę użyć własnego zdrowego rozsądku i wybrać 1 lub inny, ponieważ dają one ten sam wynik, ale obawiam się, że nie będzie to dobry pomysł, jeśli dane miałyby się zmienić.

Moje ustalenia są następujące:

• innerText pokaże wartość taką jaka jest i zignoruje jakiekolwiek formatowanie HTML, które może być zawarte
• innerHTML pokaże wartość i zastosuje formatowanie HTML
• labelwydaje się być taki sam jak innerText, więc nie widzę różnicy
• textwydaje się być tym samym, innerTextale wersja skrócona jQuery
• textContentwygląda tak samo jak, innerTextale zachowuje formatowanie (takie jak \n)
• outerText wydaje się być taki sam jak innerText

Moje badania mogą doprowadzić mnie tylko do tego stopnia, że ​​mogę tylko przetestować to, o czym myślę lub przeczytać, co zostało opublikowane, czy ktoś może jednak potwierdzić, czy moje badania są prawidłowe i czy jest coś specjalnego w labeli outerText?

Z MDN :

Internet Explorer wprowadził element.innerText. Zamiar jest prawie taki sam [jak textContent], z kilkoma różnicami:

• Zwróć uwagę, że chociaż textContent pobiera zawartość wszystkich elementów, w tym elementów <script>i <style>, w większości równoważna właściwość specyficzna dla IE, innerText, nie.

• innerText jest również świadoma stylu i nie zwróci tekstu ukrytych elementów, podczas gdy textContent to zrobi.

• Ponieważ innerText jest świadome stylu CSS, wywoła zmianę przepływu, podczas gdy textContent nie.

Więc innerTextnie będzie zawierać tekstu, który jest ukryty przez CSS, ale textContentbędzie.

innerHTML zwraca kod HTML zgodnie z jego nazwą. Dość często, aby pobrać lub napisać tekst w elemencie, ludzie używają innerHTML. Zamiast tego należy użyć textContent. Ponieważ tekst nie jest analizowany jako HTML, prawdopodobnie będzie miał lepszą wydajność. Co więcej, pozwala to uniknąć wektora ataku XSS.

W przypadku, gdy brakowało, że powtórzę to jaśniej: Do nie używać .innerHTML, chyba że wyraźnie zamiar wstawić w obrębie elementu HTML i podjęły niezbędne środki ostrożności w celu zapewnienia, że HTML wstawiasz nie może zawierać szkodliwą zawartość. Jeśli chcesz wstawić tylko tekst, użyj .textContentlub jeśli potrzebujesz obsługiwać IE8 i starsze wersje, użyj wykrywania funkcji, aby wyłączyć między .textContenta .innerText.

Głównym powodem, dla którego istnieje tak wiele różnych właściwości, jest to, że różne przeglądarki miały pierwotnie różne nazwy tych właściwości i nadal nie ma pełnej obsługi wszystkich przeglądarek dla nich wszystkich. Jeśli używasz jQuery, powinieneś się trzymać, .text()ponieważ jest to zaprojektowane tak, aby wygładzać różnice między przeglądarkami. *

W przypadku niektórych innych: outerHTMLjest w zasadzie taki sam jak innerHTML, z wyjątkiem tego, że zawiera znacznik początkowy i końcowy elementu, do którego należy. Nie mogę znaleźć żadnego opisu outerText. Myślę, że jest to prawdopodobnie mało znana własność, której należy unikać.

Lista rozwijana zawiera zbiór Optionobiektów, więc powinieneś użyć .textwłaściwości do sprawdzenia tekstowej reprezentacji elementu, tj.

<option value="123">text goes here</option>
                    ^^^^^^^^^^^^^^

Przy okazji,

.textwydaje się być tym samym, .innerTextale wersja skrócona JQuery

To nie jest poprawne; $(element).text()jest wersją jQuery, a wersją element.textdostępu do właściwości.

Dodatek do znakomitej odpowiedzi JLRishe'a:

Przyczyną istnienia innerText i externalText jest symetria z innerHTML i externalHTML. Staje się to ważne podczas przypisywania do nieruchomości.

Załóżmy, że masz element ez kodem HTML <b>Lorem Ipsum</b>:

e.innerHTML = "<i>Hello</i> World!"; => <b><i>Hello</i> World!</b>
e.outerHTML = "<i>Hello</i> World!"; =>    <i>Hello</i> World!
e.innerText = "Hello World!";        => <b>Hello World!</b>
e.outerText = "Hello World!";        =>    Hello World!

textContent nie sformatuje (\ n)

Sprawdź zgodność przeglądarek http://www.quirksmode.org/dom/html/, jeśli kierujesz reklamy na określone przeglądarki. Ponieważ wydaje się, że wszyscy mają swój własny sposób robienia rzeczy. Dlatego lepiej jest używać JQuery .text () ( http://api.jquery.com/text/ ), jeśli nie chcesz się bawić.

texti labelusuń dodatkowe spacje. Otrzymałem następujące wyniki podczas sprawdzania opcji w menu rozwijanym:

e.textContent = "A    B C   D     "
e.text = "A B C D"
e.label = "A B C D"