InternalText vs InternalHTML vs nhãn vs text vs textContent vs outsText

Tôi có một danh sách thả xuống được điền bởi Javascript.

Trong khi quyết định giá trị mặc định nào sẽ hiển thị khi tải, tôi nhận ra rằng các thuộc tính sau hiển thị chính xác cùng các giá trị:

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

Nghiên cứu của riêng tôi cho thấy các bài kiểm tra đánh dấu băng ghế hoặc so sánh giữa một vài trong số họ, nhưng không phải tất cả.

Tôi có thể sử dụng ý thức chung của riêng mình và chọn 1 hoặc khác vì chúng cung cấp kết quả tương tự, nhưng, tôi lo ngại điều này sẽ không phải là một ý tưởng tốt nếu dữ liệu sẽ thay đổi.

Những phát hiện của tôi là:

• innerText sẽ hiển thị giá trị như hiện có và bỏ qua mọi định dạng HTML có thể được bao gồm
• innerHTML sẽ hiển thị giá trị và áp dụng bất kỳ định dạng HTML nào
• labelcó vẻ giống như innerTextvậy, vì vậy tôi không thể thấy sự khác biệt
• textcó vẻ giống như innerTextnhưng phiên bản tốc ký của jQuery
• textContentxuất hiện giống như innerTextnhưng giữ định dạng (chẳng hạn như \n)
• outerText có vẻ giống như innerText

Nghiên cứu của tôi chỉ có thể đưa tôi đi xa vì tôi chỉ có thể kiểm tra những gì tôi có thể nghĩ hoặc đọc những gì được công bố, bất kỳ ai có thể xác nhận mặc dù nghiên cứu của tôi là chính xác và nếu có gì đặc biệt labelvà outerText?

Từ MDN :

Internet Explorer đã giới thiệu Element.innerText. Ý định khá giống nhau [như textContent] với một vài điểm khác biệt:

• Lưu ý rằng mặc dù textContent có được nội dung của tất cả các phần tử, bao gồm <script>và <style>các phần tử, nhưng thuộc tính dành riêng cho IE tương đương, bên trong, không.

• InternalText cũng nhận thức được phong cách và sẽ không trả về văn bản của các thành phần ẩn, trong khi textContent sẽ.

• Vì InternalText nhận thức được kiểu CSS, nó sẽ kích hoạt một dòng lại, trong khi textContent thì không.

Vì vậy, innerTextsẽ không bao gồm văn bản được ẩn bởi CSS, nhưng textContentsẽ.

InternalHTML trả về HTML như tên của nó chỉ ra. Rất thường xuyên, để truy xuất hoặc viết văn bản trong một phần tử, mọi người sử dụng InternalHTML. textContent nên được sử dụng thay thế. Vì văn bản không được phân tích cú pháp dưới dạng HTML, nên nó có thể có hiệu suất tốt hơn. Hơn nữa, điều này tránh một vectơ tấn công XSS.

Trong trường hợp bạn bị mất rằng, hãy để tôi lặp lại nó rõ ràng hơn: Đỗ không sử dụng .innerHTMLtrừ khi bạn có ý định chèn HTML trong một phần tử và đã đưa ra những biện pháp phòng ngừa cần thiết để đảm bảo rằng bạn đang chèn HTML không thể chứa nội dung độc hại. Nếu bạn chỉ muốn chèn văn bản, sử dụng .textContenthoặc nếu bạn cần hỗ trợ IE8 trở về trước, hãy sử dụng tính năng phát hiện để tắt giữa .textContentvà .innerText.

Một lý do chính khiến có rất nhiều thuộc tính khác nhau là các trình duyệt khác nhau ban đầu có các tên khác nhau cho các thuộc tính này và vẫn chưa hỗ trợ trình duyệt chéo hoàn chỉnh cho tất cả các trình duyệt đó. Nếu bạn đang sử dụng jQuery, bạn nên tuân thủ .text()vì nó được thiết kế để giải quyết các khác biệt giữa các trình duyệt. *

Đối với một số người khác: outerHTMLvề cơ bản giống như innerHTML, ngoại trừ việc nó bao gồm các thẻ bắt đầu và kết thúc của phần tử mà nó thuộc về. Tôi dường như không thể tìm thấy nhiều mô tả về outerTexttất cả. Tôi nghĩ rằng đó có thể là một tài sản di sản tối nghĩa và nên tránh.

Danh sách thả xuống bao gồm một tập hợp các Optionđối tượng, vì vậy bạn nên sử dụng thuộc .texttính để kiểm tra biểu diễn văn bản của phần tử, nghĩa là

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

Btw

.textcó vẻ giống như .innerTextnhưng phiên bản tốc ký của JQuery

Điều đó không đúng; $(element).text()là phiên bản jQuery trong khi đó element.textlà phiên bản truy cập thuộc tính.

Phụ lục cho câu trả lời xuất sắc của JLRishe:

Lý do cả bên trong và bên ngoài cả hai tồn tại là để đối xứng với bên trongHTML và bên ngoàiHTML. Điều này trở nên quan trọng khi bạn gán cho tài sản.

Giả sử bạn đã có một phần tử evới mã 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 sẽ không định dạng (\ n)

Xem khả năng tương thích của trình duyệt http://www.quirksmode.org/dom/html/ nếu bạn đang nhắm mục tiêu các trình duyệt cụ thể. Bởi vì dường như tất cả họ đều có cách làm việc riêng. Đó là lý do tại sao tốt hơn là sử dụng JQuery .text () ( http://api.jquery.com/text/ ) nếu bạn không muốn nghịch ngợm.

textvà labelloại bỏ không gian thừa. Tôi đã nhận được các kết quả này khi truy vấn các tùy chọn trong danh sách thả xuống:

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