Thuộc tính textContent trong HTML DOM

Thuộc tính textContent trong HTML DOM trả về hoặc thiết lập một chuỗi tương ứng với văn bản (bao gồm khoảng trắng) của nút và tất cả các nút con của nó.

Cú pháp

Lấy giá trị:

Node.textContent

Giá trị trả về có thể là:

• null cho các nút tài liệu (document nodes)
• Văn bản của nút được chỉ định và tất cả các nút con của nó

Thiết lập giá trị:

Node.textContent = chuỗi

Lưu ý: Thuộc tính textContent thiết lập văn bản của nút và các nút con thành một chuỗi văn bản đơn lẻ (không phân tích HTML).

Ví dụ

Dưới đây là ví dụ minh họa thuộc tính textContent:

<!DOCTYPE html>
<html>
<head>
  <title>HTML DOM textContent</title>
  <style>
    form { width: 70%; margin: 0 auto; text-align: center; }
    * { padding: 2px; margin: 5px; }
    input[type="button"] { border-radius: 10px; }
    ul { width: 30%; margin: 0 auto; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>HTML-DOM-textContent</legend>
      <h3>Sinh viên</h3>
      <ul>
        <li>Adam</li>
        <li>Alex</li>
        <li>Bina</li>
        <li>Eden</li>
        <li>Rajesh</li>
        <li>Zampa</li>
      </ul>
      <input type="button" onclick="checkForBina()" value="Xác nhận cho Bina">
      <div id="divDisplay"></div>
    </fieldset>
  </form>
  <script>
    var divDisplay = document.getElementById("divDisplay");
    var studentList = document.getElementsByTagName("li");
    var status = 'Không có mặt';
    function checkForBina() {
      for (var i = 0; i < studentList.length; i++) {
        if (studentList[i].childNodes[0].textContent === 'Bina') {
          status = 'Có mặt';
          break;
        }
      }
      divDisplay.textContent = 'Bina ' + status;
    }
  </script>
</body>
</html>

Kết quả

Trước khi nhấn nút 'Xác nhận cho Bina':

Sau khi nhấn nút 'Xác nhận cho Bina':