1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
---
title: Node.textContent
slug: Web/API/Node/textContent
translation_of: Web/API/Node/textContent
---
<div>{{APIRef("DOM")}}</div>
<p><code><strong>Node.textContent</strong></code> 屬性表示了節點或其後代的文字內容。</p>
<h2 id="Syntax" name="Syntax">語法</h2>
<pre class="syntaxbox">var <em>text</em> = element.textContent;
element.textContent = "this is some sample text";
</pre>
<h2 id="Notes" name="Notes">描述</h2>
<ul>
<li><code>textContent</code> returns <code>null</code> if the element is a <a href="/en-US/docs/DOM/document" title="DOM/Document">document</a>, a document type, or a notation. To grab all of the text and CDATA data for the whole document, one could use<code> <a href="/en-US/docs/DOM/document.documentElement" title="DOM/document.documentElement">document.documentElement</a>.textContent</code>.</li>
<li>If the node is a CDATA section, a comment, a processing instruction, or a text node, <code>textContent</code> returns the text inside this node (the <a href="/en-US/docs/DOM/Node.nodeValue" title="DOM/Node/NodeValue/Node.nodeValue">nodeValue</a>).</li>
<li>For other node types, <code>textContent</code> returns the concatenation of the <code>textContent</code> attribute value of every child node, excluding comments and processing instruction nodes. This is an empty string if the node has no children.</li>
<li>Setting this property on a node removes all of its children and replaces them with a single text node with the given value.</li>
</ul>
<h3 id="與_innerText_的差異">與 <code>innerText</code> 的差異</h3>
<p>Internet Explorer introduced <code>element.innerText</code>. The intention is similar but with the following differences:</p>
<ul>
<li>While <code>textContent</code> gets the content of all elements, including {{HTMLElement("script")}} and {{HTMLElement("style")}} elements, the IE-specific property <code>innerText</code> does not.</li>
<li><code>innerText</code> is aware of style and will not return the text of hidden elements, whereas textContent will.</li>
<li>As <code>innerText</code> is aware of CSS styling, it will trigger a reflow, whereas <code>textContent</code> will not.</li>
<li>Unlike <code>textContent</code>, altering <code>innerText</code> in Internet Explorer (up to version 11 inclusive) not just removes child nodes from the element, but also <em>permanently destroys</em> all descendant text nodes (so it is impossible to insert the nodes again into any other element or into the same element anymore).</li>
</ul>
<h3 id="與_innerHTML_的差異">與 <code>innerHTML</code> 的差異</h3>
<p><code>innerHTML</code> returns the HTML as its name indicates. Quite often, in order to retrieve or write text within an element, people use <code>innerHTML</code>. <code>textContent</code> should be used instead. Because the text is not parsed as HTML, it's likely to have better performance. Moreover, this avoids an <span title="cross-site scripting">XSS</span> attack vector.</p>
<h2 id="Example" name="Example">範例</h2>
<pre class="brush: js">// Given the following HTML fragment:
// <div id="divA">This is <span>some</span> text</div>
// Get the text content:
var text = document.getElementById("divA").textContent;
// |text| is set to "This is some text".
// Set the text content:
document.getElementById("divA").textContent = "This is some text";
// The HTML for divA is now:
// <div id="divA">This is some text</div>
</pre>
<h2 id="Polyfill_for_IE8">Polyfill for IE8</h2>
<pre class="brush: js">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",
{
get: function() {
return innerText.get.call(this);
},
set: function(s) {
return innerText.set.call(this, s);
}
}
);
})();
}
</pre>
<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
{{Compat("api.Node.textContent")}}
<h2 id="Specifications" name="Specifications">規範</h2>
<table class="spectable standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}</td>
<td>{{Spec2('DOM WHATWG')}}</td>
<td>No changes versus DOM4</td>
</tr>
<tr>
<td>{{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}}</td>
<td>{{Spec2('DOM4')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}}</td>
<td>{{Spec2('DOM3 Core')}}</td>
<td>Introduced</td>
</tr>
</tbody>
</table>
<h2 id="參見">參見</h2>
<ul>
<li><a href="http://perfectionkills.com/the-poor-misunderstood-innerText/">More on differences between <code>innerText</code> and <code>textContent</code></a> (blog post)</li>
</ul>
|
