Tại sao nội dung văn bản tốt hơn nội dung html?

Trong JavaScript, có ba thuộc tính có thể được sử dụng để đặt hoặc trả về nội dung của phần tử HTML trong DOM. InternalHTML, InternalText và TextContent. Nếu bạn không chắc chắn về sự khác biệt và tự hỏi nên sử dụng cái nào, hy vọng so sánh sau đây sẽ giúp ích cho bạn

[1] Thuộc tính innerHTML đặt và trả về nội dung của phần tử có nội dung HTML mới

Setting text with innerHTML:const example = document.getElementById[‘example’]
example.innerHTML = “
This is my paragraph.
”

Mặc dù HTML5 ngăn thẻ được chèn bằng InternalHTML thực thi, vẫn có rủi ro bảo mật bất cứ khi nào bạn sử dụng InternalHTML để đặt chuỗi bằng JavaScript. Tội phạm mạng có thể nhúng mã JavaScript mà không cần sử dụng để viết lại nội dung trong trang HTML hoặc chuyển hướng trình duyệt sang một trang khác có chứa mã độc. Vì lý do này, KHÔNG nên sử dụng InternalHTML khi chèn văn bản thuần túy

Để tìm hiểu thêm về các cuộc tấn công InternalHTML và Cross-Site Scripting [XSS], hãy tham khảo các liên kết tài nguyên ở cuối bài đăng này

HTML5 prevents malicious  from executing:
Alert WILL NOT showconst example1 = "alert['I am an annoying alert!']"
el.innerHTML = example1 

const example2 = document.getElementById['example2']
example2.innerHTML = 'alert["XSS Attack"];'


Examples of cybercriminals embedding JavaScript without :
Alert WILL showconst example3 = "

click me!

[2] Thuộc tính innerText trả về nội dung của tất cả các phần tử, ngoại trừ các phần tử và

HTML5 prevents malicious  from executing:
Alert WILL NOT showconst example1 = "alert['I am an annoying alert!']"
el.innerHTML = example1 

const example2 = document.getElementById['example2']
example2.innerHTML = 'alert["XSS Attack"];'


Examples of cybercriminals embedding JavaScript without :
Alert WILL showconst example3 = "

click me!

0. Nội dung được trả về là văn bản thuần túy có thể nhìn thấy mà không có bất kỳ định dạng nào, tương tự như đánh dấu văn bản rồi sao chép và dán văn bản đó. Những gì bạn thấy là những gì bạn nhận được

Một nhược điểm khi sử dụng InternalText là giá trị của nó kích hoạt chỉnh lại dòng do nhận thức về kiểu dáng CSS, dẫn đến giảm hiệu suất. Chỉnh lại dòng là khi trình duyệt tính toán lại các thành phần trang để hiển thị lại tài liệu. Các trường hợp kích hoạt chỉnh lại dòng bao gồm thay đổi kích thước cửa sổ trình duyệt hoặc thay đổi các phần tử trong DOM. Reflow tốn kém về mặt tính toán và nên được giảm thiểu để cải thiện tốc độ, hiệu quả và trải nghiệm người dùng

GHI CHÚ. Thuộc tính InternalText không được hỗ trợ trong Internet Explorer 9 trở về trước

Setting text with innerText:const example = document.getElementById['example']
example.innerText = "text"

[3] Thuộc tính textContent trả về nội dung thô với kiểu dáng bên trong tất cả các phần tử, nhưng loại trừ các thẻ phần tử HTML. Điều này bao gồm các phần tử và

HTML5 prevents malicious  from executing:
Alert WILL NOT showconst example1 = "alert['I am an annoying alert!']"
el.innerHTML = example1 

const example2 = document.getElementById['example2']
example2.innerHTML = 'alert["XSS Attack"];'


Examples of cybercriminals embedding JavaScript without :
Alert WILL showconst example3 = "

click me!

0, khoảng trắng, ngắt dòng và xuống dòng. Không giống như InternalHTML, textContent có hiệu suất tốt hơn vì giá trị của nó không được phân tích cú pháp dưới dạng HTML. Vì lý do đó, sử dụng textContent cũng có thể ngăn chặn các cuộc tấn công Cross-Site Scripting [XSS]. Không giống như InternalText, textContent không biết về kiểu dáng CSS và sẽ không kích hoạt chỉnh lại dòng. Tất cả các đối tượng Node đều có textContent, trong khi chỉ các đối tượng HTMLElement mới có InternalText

GHI CHÚ. Thuộc tính textContent không được hỗ trợ trong Internet Explorer 8 trở về trước

Setting text with textContent:const example = document.getElementById['example']
example.textContent = "word"

Ví dụ dưới đây cho thấy cách mỗi thuộc tính trong số ba thuộc tính trả về nội dung của phần tử

HTML5 prevents malicious  from executing:
Alert WILL NOT showconst example1 = "alert['I am an annoying alert!']"
el.innerHTML = example1 

const example2 = document.getElementById['example2']
example2.innerHTML = 'alert["XSS Attack"];'


Examples of cybercriminals embedding JavaScript without :
Alert WILL showconst example3 = "

click me!

2

 This element has extra spacing   and contains a span element.

function getInnerHtml[] {
  console.log[document.getElementById["demo"].innerHTML]
}

innerHTML returns: 
" This element has extra spacing   and contains a span element."

The innerHTML property returns the text, spacing, and inner HTML element tags.




function getInnerText[] {
  console.log[document.getElementById["demo"].innerText]
}

innerText returns: 
"This element has extra spacing and contains a span element."

The innerText property returns just the visible text, 
without spacing or inner HTML element tags.




function getTextContent[] {
  console.log[document.getElementById["demo"].textContent]
}

textContent returns: 
" This element has extra spacing   and contains a span element."
 
The textContent property returns the text and spacing, 
but without the inner HTML element tags.

Bây giờ bạn đã biết sự khác biệt giữa tất cả các tùy chọn có sẵn để trả lại và đặt văn bản trong JavaScript, hãy sử dụng tùy chọn phù hợp nhất với nhu cầu nội dung của bạn

Tôi nên sử dụng InternalHTML hay textContent?

Sự khác biệt giữa InternalText và textContent là gì?

Việc sử dụng textContent là gì?

Ví dụ về sự khác biệt giữa InternalHTML và InternalText là gì?