nodeValue vs InternalHTML và textContent. Chọn như thế nào?

Tôi đang sử dụng js đơn giản để thay đổi văn bản bên trong của một thành phần nhãn và tôi không chắc chắn về lý do nào tôi nên sử dụng InternalHTML hoặc nodeValue hoặc textContent. Tôi không cần tạo một nút mới hoặc thay đổi các thành phần HTML hoặc bất cứ thứ gì - chỉ cần thay thế văn bản. Đây là một ví dụ về mã:

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.

Tôi đã xem qua nguồn jQuery và nó sử dụng nodeValue chính xác một lần nhưng bên trongHTML và textContent nhiều lần. Sau đó, tôi tìm thấy thử nghiệm jsperf này chỉ ra FirstChild.nodeValue nhanh hơn đáng kể. Ít nhất đó là những gì tôi diễn giải nó có nghĩa.

Nếu FirstChild.nodeValue nhanh hơn rất nhiều, thì sao? Có phải nó không được hỗ trợ rộng rãi? Có một số vấn đề khác?

Sự khác nhau giữa textContent / InternalText / InternalHTML trên MDN.

Và một câu trả lời Stackoverflow về InternalText / nodeValue.

Tóm lược

1. InternalHTML phân tích nội dung dưới dạng HTML, do đó mất nhiều thời gian hơn.
2. nodeValue sử dụng văn bản thẳng, không phân tích HTML và nhanh hơn.
3. textContent sử dụng văn bản thẳng, không phân tích HTML và nhanh hơn.
4. InternalText Đưa phong cách vào xem xét. Nó sẽ không nhận được văn bản ẩn chẳng hạn.

innerTextkhông tồn tại trong firefox cho đến khi FireFox 45 theo caniuse nhưng hiện được hỗ trợ trong tất cả các trình duyệt chính.

.textContentđầu ra text/plaintrong khi .innerHTMLđầu ra text/html.

Ví dụ nhanh:

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

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

đầu ra: <a href="http://google.com"> google </a>

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

đầu ra: google

Bạn có thể thấy từ ví dụ đầu tiên rằng đầu ra của loại text/plainkhông được trình duyệt phân tích cú pháp và dẫn đến hiển thị toàn bộ nội dung. Đầu ra của loại text/htmlyêu cầu trình duyệt phân tích cú pháp trước khi hiển thị nó.

MDN bên trongHTML , MDN textContent , MDN nodeValue

Hai cái tôi biết rõ và làm việc cùng là InternalHTML và textContent .

Tôi sử dụng textContent khi tôi chỉ muốn thay đổi văn bản của đoạn văn hoặc tiêu đề như vậy:

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>

Vì vậy, textContent chỉ thay đổi văn bản, nhưng nó không phân tích HTML, vì chúng ta có thể biết từ các thẻ hiển thị trong văn bản thuần trong kết quả ở đó.

Nếu chúng tôi muốn phân tích HTML, chúng tôi sử dụng InternalHTML như thế này:

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>

Vì vậy, ví dụ thứ hai đó phân tích chuỗi tôi gán cho thuộc tính InternalHTML của phần tử DOM dưới dạng HTML.

Điều này thật tuyệt vời và một lỗ hổng bảo mật lớn :)

(tra cứu XSS nếu bạn muốn biết về bảo mật cho việc này)

InternalText là khoảng những gì bạn sẽ nhận được nếu bạn chọn văn bản và sao chép nó. Các phần tử không được kết xuất không có trong InternalText.

textContent là sự kết hợp các giá trị của tất cả các TextNodes trong cây con. Cho dù kết xuất hay không.

Đây là một bài viết tuyệt vời chi tiết về sự khác biệt

InternalHTML không nên được đưa vào so sánh với InternalText hoặc textContent, vì nó hoàn toàn khác nhau và bạn thực sự nên biết tại sao :-) Hãy tìm kiếm nó một cách riêng biệt

[Lưu ý: bài đăng này liên quan nhiều hơn đến việc chia sẻ dữ liệu cụ thể có thể giúp ích cho ai đó hơn là nói cho mọi người biết phải làm gì]

Trong trường hợp ai đó đang tự hỏi cái gì nhanh nhất hôm nay: https://jsperf.com/set-innertext-vs-innerhtml-vs-textcontent & https://jsperf.com/get-innertext-vs-innerhtml-vs-textcontent ( đối với thử nghiệm thứ hai, nội dung của nhịp là văn bản thuần túy, kết quả có thể thay đổi theo nội dung của nó)

Có vẻ như đó .innerHtmllà người chiến thắng tuyệt vời về tốc độ thuần túy!

(LƯU Ý: Tôi chỉ nói về tốc độ ở đây, bạn có thể muốn tìm kiếm các tiêu chí khác trước khi chọn sử dụng tiêu chí nào!)

Thuộc tính Element.innerHTML set, hoặc getmã HTML của phần tử.

Ví dụ: Chúng tôi có một <h1>thẻ và phong cách mạnh mẽ với nó:

<h1 id="myHeader" style="color: green"><strong>My Header</strong> Normal Text</h1> Để getnội dung của phần tử có id bằng với "myHeader", chúng tôi sẽ làm tương tự:

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

Kết quả trả về:

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

Để "đặt" nội dung mới (giá trị) cho thành phần này, mã sẽ ở đây:

Element.innerHTML = "My Header My Text";

Vì vậy, thuộc tính này không chỉ hoạt động với văn bản thuần túy mà còn nhằm mục đích truyền hoặc sao chép mã HTML.

=> Chúng ta không nên sử dụng nó.

Tuy nhiên, nhiều lập trình viên (bao gồm cả tôi) sử dụng thuộc tính này để chèn văn bản vào trang web và phương pháp này mang đến rủi ro tiềm ẩn:

1. Thao tác sai: chỉ chèn mỗi văn bản đôi khi xóa tất cả các mã HTML khác của phần tử được chèn.
2. Để bảo mật: Tất nhiên, hai ví dụ trên hoàn toàn vô hại, ngay cả khi sử dụng thẻ vẫn không có vấn đề gì vì tiêu chuẩn HTML5 đã ngăn chặn việc thực thi dòng lệnh bên trong thẻ. khi chèn vào trang web thông qua thuộc tính InternalHTML. Xem quy tắc này ở đây .

Vì lý do này, việc sử dụng innerHTMLkhông được khuyến nghị khi chèn văn bản thuần túy, thay vào đó sử dụng textContent. Các textContentbất động sản sẽ không hiểu rằng mã bạn vượt qua là một cú pháp HTML, nhưng chỉ là một văn bản 100% không hơn không kém.

Kết quả trả về nếu sử dụng textContenttrong ví dụ trên:

My Header My Text