HTML DOM Element textContent 属性

ການອະທິບາຍແລະການນໍາໃຊ້

textContent ທະວີຄວາມນີ້ຈະກັບມາຄວາມຄິດຂອງຂໍ້ຄວາມທີ່ກ່ຽວກັບຂະແໜງຂອງທີ່ໄດ້ກໍານົດທັງໝົດຂອງຜູ້ລວມຜູ້ຫຼິ້ນ.

ຖ້າເຈົ້າໄດ້ການປ່ຽນທະວີຄວາມ: textContent ທະວີຄວາມນີ້ຈະຖືກປັບລົງຫຼິ້ນທັງໝົດຂອງຜູ້ລວມຜູ້ຫຼິ້ນແລະຖືກປ່ຽນດ້ວຍຂໍ້ຄວາມທີ່ໃຫ້ໄດ້.

ຄຳແນະນຳ:ບາງຄັ້ງທະວີຄວາມນີ້ສາມາດນຳໃຊ້ແທນທະວີຄວາມ nodeValue ມັນກໍ່ຕາມເອງບໍ່ວ່າບໍ່ຕ້ອງລະງັບວ່າທະວີຄວາມນີ້ຈະຖືກກັບຂໍ້ຄວາມຂອງຜູ້ລວມຜູ້ຫຼິ້ນທັງໝົດ.

ບໍ່ວ່າງ:

ທະວີຄວາມ innerText

ທະວີຄວາມ innerHTML

ຄວາມຈິງ

ບົດສະຫຼຸບ 1

ການຖະແຫຼງຂໍ້ຄວາມຂອງປະກອບ:

let text = element.textContent;

亲自试一试

ບົດສະຫຼຸບ 2

ການປ່ຽນຂໍ້ຄວາມຂອງປະກອບ <p> ທີ່ id="demo":

element.textContent = "I have changed!";

亲自试一试

ບົດສະຫຼຸບ 3

ການຊອກຫາຂໍ້ຄວາມທັງໝົດຂອງປະກອບ <ul> ທີ່ id="myList":

let text = document.getElementById("myList").textContent;

亲自试一试

语法

返回节点的文本内容：

element.textContent

或

node.textContent

设置节点的文本内容：

element.textContent = text
node.textContent = text

属性值

值 描述
text 元素或节点的文本内容。

返回值

类型 描述
字符串

元素及其所有后代的文本内容。

如果元素是 document、document type 或 notation，则返回 null。

innerHTML、innerText 与 textContent 的区别

innerText 属性返回：

只返回元素及其所有子元素的文本内容，没有 CSS 隐藏文本间距和标签，除了 <script> 和 <style> 元素。

innerHTML 属性返回：

元素的文本内容，包括所有空白和内部 HTML 标签。

textContent 属性返回：

元素和所有后代的文本内容，带有空白和 CSS 隐藏文本，但没有标签。

HTML 实例

<p id="myP">   This element has extra spacing     and contains <span>a span element</span>.</p>

ການພະຍາຍາມ JavaScript

let text = document.getElementById("myP").innerText;
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;

亲自试一试

在上面的例子中：

innerText 属性返回：

ປະກອບສັນຍານມີຊັ້ນກາງຫຼາຍ ແລະ ມີປະກອບສັນຍານ span.

innerHTML 属性返回：

   ປະກອບສັນຍານມີຊັ້ນກາງຫຼາຍ ແລະ ມີ <span>ປະກອບສັນຍານ span</span>.

textContent 属性返回：

   ປະກອບສັນຍານມີຊັ້ນກາງຫຼາຍ ແລະ ມີປະກອບສັນຍານ span.

浏览器支持

element.textContent 是 DOM Level 3 (2004) 特性。

所有浏览器都完全支持它：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
ການສະໜັບສະໜູນ 9-11 ການສະໜັບສະໜູນ ການສະໜັບສະໜູນ ການສະໜັບສະໜູນ ການສະໜັບສະໜູນ