คุณสมบัติ textContent ของ HTML DOM

คุณสมบัติ textContent ของ HTML DOM ใช้สำหรับ อ่านหรือกำหนด ข้อความ (รวมช่องว่าง) ของโหนดที่ระบุและโหนดลูกทั้งหมด

ไวยากรณ์ (Syntax)

การอ่านค่า (Getter)

Node.textContent

การกำหนดค่า (Setter)

Node.textContent = string

ค่าที่ส่งคืน

• null สำหรับโหนดเอกสาร (document nodes)
• ข้อความของโหนดที่ระบุและโหนดลูกทั้งหมด

หมายเหตุ: การกำหนด textContent จะตั้งค่าข้อความของโหนดและโหนดลูกเป็นสตริงข้อความเดียว — HTML tags จะไม่ถูกแปลง (escaped) แต่จะแสดงเป็นข้อความธรรมดา ซึ่งต่างจาก innerHTML

ตัวอย่างการใช้งาน

ตัวอย่างนี้ตรวจสอบว่าชื่อ "Bina" อยู่ในรายการนักศึกษาหรือไม่ โดยใช้ textContent อ่านข้อความของแต่ละ <li>

<!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>Students</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="Confirm for Bina">
      <div id="divDisplay"></div>
    </fieldset>
  </form>
<script>
  var divDisplay = document.getElementById("divDisplay");
  var studentList = document.getElementsByTagName("li");
  var status = 'not Present';
  function checkForBina() {
    for(var i=0; i<studentList.length; i++){
      if(studentList[i].childNodes[0].textContent === 'Bina'){
        status = 'Present';
        break;
      }
    }
    divDisplay.textContent = 'Bina is '+status;
  }
</script>
</body>
</html>

ผลลัพธ์ (Output)

ก่อนกดปุ่ม "Confirm for Bina":

หลังกดปุ่ม "Confirm for Bina":