Vài tuần trước, tôi đang làm việc gì đó và có một trong những câu 'Aha!' những khoảnh khắc mà điều gì đó có ý nghĩa sâu sắc đến mức tôi tự nhủ rằng mình nên khám phá nó và viết về nó.

Thật không may, tôi không nhớ mình đã làm việc gì hay câu 'Aha!' thời điểm là chính xác. Vì vậy, tôi sẽ đi sâu vào và xem liệu tôi có thể khám phá lại nó hay không.

innerText

Trong JavaScript vani, innerText chỉ lấy văn bản được hiển thị của một phần tử HTML. Về bản chất, văn bản hiển thị trong trình duyệt là thứ mà innerText lấy.

HTML

<p id=“example”>This is an <span> example </span>.</p>

JavaScript

var x = document.getElementById(“example”).innerText;

Một số điều cần ghi nhớ:

• nếu các phần tử bị ẩn với CSS (bằng cách sử dụng một cái gì đó như thuộc tính 'hiển thị' hoặc 'khả năng hiển thị') thì innerText không thể truy cập chúng
• innerText sẽ KHÔNG trả về nội dung của các phần tử <script> hoặc <style>

Điều này thực sự sẽ lấy hoặc thiết lập nội dung bên trong của một phần tử HTML.

Khi truy xuất nội dung bên trong, nó cũng sẽ bao gồm bất kỳ thẻ khoảng cách và phần tử bên trong nào như <li> hoặc <span>, v.v.

HTML

<p id=“example”>This is an <span> example </span>.</p>

var x = document.getElementById(“example”).innerHTML;

Để thay đổi nội dung của một phần tử HTML:

document.getElementById(“example”).innerHTML = “And <strong> NOW </strong> the contents have been changed!”;

*** Vì innerHTML có thể được sử dụng để thay đổi nội dung trên một trang, nên các thẻ <script> nguy hiểm và các cuộc tấn công JavaScript khác có thể được thực thi. ***

*** Do đó, không nên sử dụng innerHTML. ***

Thay vào đó, hãy thử sử dụng textContent.

textContent

Thao tác này sẽ trả về nội dung văn bản có khoảng cách (tương tự như innerHTML), nhưng không có bất kỳ thẻ phần tử bên trong nào.

Để lấy textContent:

HTML

<p id=“example”>This is an <span> example </span>.</p>

var x = document.getElementById(“example”).textContent;

Để đặt textContent, chỉ cần làm như vậy với ví dụ bên trongHTML ở trên.

document.getElementById(“example”).textContent = “And <strong> NOW </strong> the contents have been changed!”;

• sẽ trả về nội dung văn bản của tất cả các phần tử bao gồm <script> và <style>
• sẽ trả về văn bản của các phần tử bị ẩn bằng CSS