คุณสมบัติ เนื้อหาข้อความ HTML DOM
ตัวอย่าง
รับเนื้อหาข้อความขององค์ประกอบ:
var x =
document.getElementById("myBtn").textContent;
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติ textContent ตั้งค่าหรือส่งคืนเนื้อหาข้อความของโหนดที่ระบุ และรายการย่อยทั้งหมด
หากคุณตั้งค่าคุณสมบัติ textContent โหนดย่อยใดๆ จะถูกลบออกและแทนที่ด้วยโหนดข้อความเดียวที่มีสตริงที่ระบุ
หมายเหตุ:คุณสมบัตินี้คล้ายกับ คุณสมบัติ innerTextอย่างไรก็ตาม มีความแตกต่างบางประการ:
- textContent ส่งคืนเนื้อหาข้อความของ องค์ประกอบ ทั้งหมดในขณะที่ innerText ส่งคืนเนื้อหาขององค์ประกอบทั้งหมด ยกเว้น องค์ประกอบ <script> และ <style>
- innerText จะไม่ส่งคืนข้อความขององค์ประกอบที่ซ่อนอยู่ด้วย CSS (textContent will)
เคล็ดลับ:บางครั้งสามารถใช้คุณสมบัตินี้แทน คุณสมบัติ nodeValueได้ แต่อย่าลืมว่าคุณสมบัตินี้ส่งคืนข้อความของโหนดย่อยทั้งหมดด้วย
เคล็ดลับ:หากต้องการตั้งค่าหรือส่งคืนเนื้อหา HTML ขององค์ประกอบ ให้ใช้คุณสมบัติinnerHTML
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Property | |||||
---|---|---|---|---|---|
textContent | 1.0 | 9.0 | Yes | Yes | Yes |
ไวยากรณ์
ส่งคืนเนื้อหาข้อความของโหนด:
node.textContent
ตั้งค่าเนื้อหาข้อความของโหนด:
node.textContent = text
มูลค่าทรัพย์สิน
Value | Type | Description |
---|---|---|
text | String | Specifies the text content of the specified node |
รายละเอียดทางเทคนิค
คืนมูลค่า: | สตริงที่แทนข้อความของโหนดและทายาททั้งหมด ส่งคืนค่า null หากองค์ประกอบเป็นเอกสาร ประเภทเอกสาร หรือสัญกรณ์ |
---|---|
เวอร์ชัน DOM | วัตถุโหนดระดับ 3 หลัก |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
เปลี่ยนข้อความขององค์ประกอบ <p> ด้วย id="demo":
document.getElementById("demo").textContent = "Paragraph changed!";
ตัวอย่าง
รับข้อความทั้งหมดขององค์ประกอบ <ul> ที่มี id="myList":
var x = document.getElementById("myList").textContent;
ค่าของxจะเป็น:
Coffee Tea
ตัวอย่าง
ตัวอย่างนี้แสดงให้เห็นถึงความแตกต่างบางอย่างระหว่าง innerText, innerHTML และ textContent:
<p id="demo"> This element has extra spacing and contains <span>a span
element</span>.</p>
<script>
function getInnerText() {
alert(document.getElementById("demo").innerText)
}
function getHTML()
{
alert(document.getElementById("demo").innerHTML)
}
function
getTextContent() {
alert(document.getElementById("demo").textContent)
}
</script>
รับเนื้อหาของ <p> องค์ประกอบด้านบนด้วยคุณสมบัติที่ระบุ:
innerTextส่งคืน: "องค์ประกอบนี้มีระยะห่างพิเศษและมีองค์ประกอบช่วง"
innerHTMLส่งกลับ: " องค์ประกอบนี้มีระยะห่างพิเศษและมี <span>องค์ประกอบช่วง</span>"
textContentส่งคืน: " องค์ประกอบนี้มีระยะห่างพิเศษและมีองค์ประกอบช่วง"
คุณสมบัติ innerText ส่งคืนเฉพาะข้อความโดยไม่มีการเว้นวรรคและแท็กองค์ประกอบภายใน
คุณสมบัติ innerHTML ส่งคืนข้อความ รวมถึงแท็กการเว้นวรรคและองค์ประกอบภายในทั้งหมด
คุณสมบัติ textContent ส่งคืนข้อความที่มีระยะห่าง แต่ไม่มีแท็กองค์ประกอบภายใน