--- 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>