From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/node/textcontent/index.html | 145 ++++++++++++++++++++++++ 1 file changed, 145 insertions(+) create mode 100644 files/zh-cn/web/api/node/textcontent/index.html (limited to 'files/zh-cn/web/api/node/textcontent/index.html') diff --git a/files/zh-cn/web/api/node/textcontent/index.html b/files/zh-cn/web/api/node/textcontent/index.html new file mode 100644 index 0000000000..1a2cd275e7 --- /dev/null +++ b/files/zh-cn/web/api/node/textcontent/index.html @@ -0,0 +1,145 @@ +--- +title: Node.textContent +slug: Web/API/Node/textContent +tags: + - Node.textContent + - innerHTML + - innerText + - 参考 +translation_of: Web/API/Node/textContent +--- +
{{APIRef("DOM")}}
+ +

{{domxref ("Node")}} 接口的 textContent 属性表示一个节点及其后代的文本内容。

+ +
+

注意: textContent 和 {{domxref("HTMLElement.innerText")}} 容易混淆，但这两个属性在重要方面有不同之处 。

+
+ +

语法

+ +
let text = someNode.textContent;
+someOtherNode.textContent = string;
+ +

返回值

+ +

一个字符串或 null.

+ +

描述

+ +

textContent 的值取决于具体情况：

+ + + +

在节点上设置 textContent 属性的话，会删除它的所有子节点，并替换为一个具有给定值的文本节点。

+ +

与 innerText 的区别

+ +

不要被 Node.textContent 和 {{domxref("HTMLElement.innerText")}} 的区别搞混了。虽然名字看起来很相似，但有重要的不同之处：

+ + + +

与 innerHTML 的区别

+ +

正如其名称，{{domxref("Element.innerHTML")}} 返回 HTML。通常，为了在元素中检索或写入文本，人们使用 innerHTML。但是，textContent 通常具有更好的性能，因为文本不会被解析为HTML。

+ +

此外，使用 textContent 可以防止 XSS 攻击。

+ +

例子

+ +

给出这个 HTML 片段:

+ +
<div id="divA">This is <span>some</span> text!</div>
+ +

你可以使用 textContent 去获取该元素的文本内容：

+ +
let text = document.getElementById('divA').textContent;
+// The text variable is now: 'This is some text!'
+ +

或者设置元素的文字内容：

+ +
document.getElementById('divA').textContent = 'This text is different!';
+// The HTML for divA is now:
+// <div id="divA">This text is different!</div>
+ +

IE8 的替代方法

+ +
// Source: Eli Grey @ https://eligrey.com/blog/post/textcontent-in-ie8
+if (Object.defineProperty
+  && Object.getOwnPropertyDescriptor
+  && Object.getOwnPropertyDescriptor(Element.prototype, "textContent")
+  && !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) {
+  (function() {
+    var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
+    Object.defineProperty(Element.prototype, "textContent",
+     // Passing innerText or innerText.get directly does not work,
+     // wrapper function is required.
+     {
+       get: function() {
+         return innerText.get.call(this);
+       },
+       set: function(s) {
+         return innerText.set.call(this, s);
+       }
+     }
+   );
+  })();
+}
+ +

浏览器兼容性

+ +

{{Compat("api.Node.textContent")}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}{{Spec2('DOM WHATWG')}}No change vs. DOM4
{{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}}{{Spec2('DOM4')}}
{{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}}{{Spec2('DOM3 Core')}}Introduced
+ +

相关链接

+ + -- cgit v1.2.3-54-g00ecf