diff options
Diffstat (limited to 'files/zh-tw/web/api/node/textcontent/index.html')
| -rw-r--r-- | files/zh-tw/web/api/node/textcontent/index.html | 158 |
1 files changed, 158 insertions, 0 deletions
diff --git a/files/zh-tw/web/api/node/textcontent/index.html b/files/zh-tw/web/api/node/textcontent/index.html new file mode 100644 index 0000000000..9375396158 --- /dev/null +++ b/files/zh-tw/web/api/node/textcontent/index.html @@ -0,0 +1,158 @@ +--- +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> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1+</td> + <td>2</td> + <td>9</td> + <td>9.64 (possibly earlier)</td> + <td>3 (possibly earlier)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<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> |