diff options
Diffstat (limited to 'files/zh-tw/web/api/document')
19 files changed, 2418 insertions, 0 deletions
diff --git a/files/zh-tw/web/api/document/body/index.html b/files/zh-tw/web/api/document/body/index.html new file mode 100644 index 0000000000..a33d2a7901 --- /dev/null +++ b/files/zh-tw/web/api/document/body/index.html @@ -0,0 +1,128 @@ +--- +title: Document.body +slug: Web/API/Document/body +translation_of: Web/API/Document/body +--- +<div>{{APIRef("DOM")}}</div> + +<p>回傳目前文件的 {{HTMLElement("body")}} 或 {{HTMLElement("frameset")}} 節點，如元素不存在則回傳 <code>null</code>。</p> + +<h2 id="Syntax" name="Syntax">語法</h2> + +<pre class="syntaxbox"><em>var objRef</em> = document.body; +document.body = <em>objRef;</em></pre> + +<h2 id="Example" name="Example">範例</h2> + +<pre class="brush:js">// in HTML: <body id="oldBodyElement"></body> +alert(document.body.id); // "oldBodyElement" + +var aNewBodyElement = document.createElement("body"); + +aNewBodyElement.id = "newBodyElement"; +document.body = aNewBodyElement; +alert(document.body.id); // "newBodyElement" +</pre> + +<h2 id="Notes" name="Notes">備註</h2> + +<p><code>document.body</code> is the element that contains the content for the document. In documents with <code><body></code> contents, returns the <code><body></code> element, and in frameset documents, this returns the outermost <code><frameset></code> element.</p> + +<p>Though <code>body</code> is settable, setting a new body on a document will effectively remove all the current children of the existing <code><body></code> element.</p> + +<h2 id="Specification" name="Specification">規範</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('HTML WHATWG','dom.html#dom-document-body','Document.body')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1','dom.html#dom-document-body','Document.body')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','dom.html#dom-document-body','Document.body')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML','html.html#ID-56360201','Document.body')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM1','level-one-html.html#attribute-body','Document.body')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</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>{{CompatVersionUnknown}}</td> + <td>2</td> + <td>6</td> + <td>9.6 (possibly earlier)</td> + <td>4 (possibly earlier)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>5 (probably earlier)</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{domxref("document.head")}}</li> +</ul> diff --git a/files/zh-tw/web/api/document/createdocumentfragment/index.html b/files/zh-tw/web/api/document/createdocumentfragment/index.html new file mode 100644 index 0000000000..efdd4c31e6 --- /dev/null +++ b/files/zh-tw/web/api/document/createdocumentfragment/index.html @@ -0,0 +1,136 @@ +--- +title: Document.createDocumentFragment() +slug: Web/API/Document/createDocumentFragment +tags: + - API + - DOM + - 參考 + - 文本片段 + - 方法 +translation_of: Web/API/Document/createDocumentFragment +--- +<div>{{ApiRef("DOM")}}</div> + +<p>建立新的 {{domxref("DocumentFragment")}}.</p> + +<h2 id="語法">語法</h2> + +<pre class="syntaxbox">var <var>fragment</var> = document.createDocumentFragment(); +</pre> + +<p><code>fragment </code>是 {{domxref("DocumentFragment")}} 的一個參考物件。</p> + +<h2 id="描述">描述</h2> + +<p><code>DocumentFragment</code>s 是 DOM 節點(Nodes)。他們不會成為 DOM主幹的一部份。最常見的作法是先建立文本片段 (document fragment)，然後將元素 (element) 加入文本片段中，最後再將文本片段加入 DOM 樹中。在 DOM 樹中，文本片段將會被他所有的子元素取代。</p> + +<p>正因為文本片段是存在<strong>記憶體</strong>中，並且不是 DOM 主幹的一部分，增加子元素並不會導致網頁重刷 (<a href="https://developers.google.com/speed/articles/reflow?csw=1">reflow</a>)(重新計算元素的位置和幾何)。因此採用文本片段通常會有比較好的效能表現 (<a href="http://ejohn.org/blog/dom-documentfragments/">better performance</a>)。</p> + +<h2 id="舉例">舉例</h2> + +<p>這個例子中用清單來呈現主流瀏覽器。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul id="ul"> +</ul></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var element = document.getElementById('ul'); // assuming ul exists +var fragment = document.createDocumentFragment(); +var browsers = ['Firefox', 'Chrome', 'Opera', + 'Safari', 'Internet Explorer']; + +browsers.forEach(function(browser) { + var li = document.createElement('li'); + li.textContent = browser; + fragment.appendChild(li); +}); + +element.appendChild(fragment); +</pre> + +<h3 id="結果">結果</h3> + +<p>在 <a href="https://jsfiddle.net/a0nn690f/">jsfiddle </a>上看範例結果。</p> + +<h2 id="規格">規格</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">規格</th> + <th scope="col">狀態</th> + <th scope="col">註解</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition in the DOM 1 specification.</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>特色</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基礎支援</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>特色</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>Edge</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基礎支援</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="更多參考">更多參考</h2> + +<ul> + <li>{{domxref("DOMImplementation.createDocument", "document.implementation.createDocument()")}}</li> + <li>{{domxref("documentFragment")}}</li> +</ul> diff --git a/files/zh-tw/web/api/document/createelement/index.html b/files/zh-tw/web/api/document/createelement/index.html new file mode 100644 index 0000000000..2d847004cc --- /dev/null +++ b/files/zh-tw/web/api/document/createelement/index.html @@ -0,0 +1,179 @@ +--- +title: Document.createElement() +slug: Web/API/Document/createElement +translation_of: Web/API/Document/createElement +--- +<div>{{APIRef("DOM")}}</div> + +<p>於 <a href="/en-US/docs/Web/HTML">HTML</a> 文件中，<strong><code>Document.createElement()</code></strong> 方法可以依指定的標籤名稱（<code>tagName</code>）建立 HTML 元素，或是在未定義標籤名稱下建立一個 {{domxref("HTMLUnknownElement")}}。在 <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a> 文件中，<code>Document.createElement()</code> 將會建立指定的 XUL 元素。而在其它文件，則會建立一個 namespace URI 為 <code>null</code> 的元素。</p> + +<p>若要明確指定元素的 namespace URI，請使用 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS" title="Creates an element with the specified namespace URI and qualified name."><code>document.createElementNS()</code></a>。</p> + +<h2 id="語法">語法</h2> + +<pre class="brush: js"><var>var <em>element</em></var> = <var>document</var>.createElement(<em><var>tagName[, options]</var></em>); +</pre> + +<h3 id="參數">參數</h3> + +<dl> + <dt><code>tagName</code></dt> + <dd>一個指定類型給所創建的元素的字串。{{domxref("Node.nodeName", "nodeName")}} 創建的元素由 <code>tagName</code> 的值初始，不要使用吻合名稱（例如 "html:a"）。當該方法在 HTML 文件中被調用時，<code>createElement()</code> 會先將 <code>tagName</code> 轉化為小寫後再創建元素。在 Firefox、Opera 和 Chrome，<code>createElement(null)</code> 與 <code>createElement("null")</code> 作用相同。</dd> + <dt><code>options</code>{{optional_inline}}</dt> + <dd>選擇性 <code>ElementCreationOptions</code> 物件包含一個屬性 <code>is</code>，它的值是先前使用<code>customElements.define()</code> 所定義的自定義元素的標籤名稱。為了與以前的 <a href="https://www.w3.org/TR/custom-elements/">自定義元素規範</a> 相容，一些瀏覽器將允許你在此傳遞一個字串而非物件，其字串的值就是自定義元件的標籤名稱。了解更多訊息以及如何使用此參數，可以參閱 <a href="https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml">擴展原生 HTML 元素</a> 。</dd> + <dd>新元素將被賦予一個 <code>is</code> 屬性，其值就是自定義元素的標籤名稱。自定義元素算是實驗中的功能，因此目前只作用於部分瀏覽器中。</dd> +</dl> + +<h3 id="回傳值">回傳值</h3> + +<p>一個新的 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element" title="The Element interface represents an object of a Document. This interface describes methods and properties common to all kinds of elements. Specific behaviors are described in interfaces which inherit from Element but add additional functionality."><code>Element</code></a>.</p> + +<h2 id="範例">範例</h2> + +<p>這邊創建一個新的 <code><div></code> ，並將它插入到 ID <code>div1</code> 之前。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html"><!DOCTYPE html> +<html> +<head> + <title>||Working with elements||</title> +</head> +<body> + <div id="div1">The text above has been created dynamically.</div> +</body> +</html> +</pre> + +<h3 id="JavaScript"><span style="line-height: normal;">JavaScript</span></h3> + +<pre class="brush:js">document.body.onload = addElement; + +function addElement () { + // create a new div element + // and give it some content + var newDiv = document.createElement("div"); + var newContent = document.createTextNode("Hi there and greetings!"); + newDiv.appendChild(newContent); //add the text node to the newly created div. + + // add the newly created element and its content into the DOM + var currentDiv = document.getElementById("div1"); + document.body.insertBefore(newDiv, currentDiv); +}</pre> + +<p>{{EmbedLiveSample("Example", 500, 50)}}</p> + +<h2 id="規範">規範</h2> + +<table class="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-document-createelement", "Document.createElement")}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1][2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>options</code> argument</td> + <td>{{CompatVersionUnknown}}<sup>[3]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(50)}}<sup>[4][5]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>options</code> argument</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[3]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[3]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Starting with Gecko 22.0 {{geckoRelease("22.0")}} <code>createElement()</code> no longer uses the {{domxref("HTMLSpanElement")}} interface when the argument is "bgsounds", "multicol", or "image". Instead, <code>HTMLUnknownElement</code> is used for "bgsound" and "multicol" and {{domxref("HTMLElement")}} <code>HTMLElement</code> is used for "image".</p> + +<p>[2] The Gecko implementation of <code>createElement</code> doesn't conform to the DOM spec for XUL and XHTML documents: <code>localName</code> and <code>namespaceURI</code> are not set to <code>null</code> on the created element. See {{ Bug(280692) }} for details.</p> + +<p>[3] In previous versions of the specification, this argument was just a string whose value was the custom element's tag name. For example: <code>document.createElement("button", "custom-button")</code> rather than <code>document.createElement("button", {id: "custom-button"})</code>. For the sake of backwards compatibility, Chrome accepts both forms.</p> + +<p>[4] See [3] above: like Chrome, Firefox accepts a string instead of an object here, but only from version 51 onwards. In version 50, <code>options</code> must be an object.</p> + +<p>[5] To experiment with custom elements in Firefox, you must set the <code>dom.webcomponents.enabled</code> and <code>dom.webcomponents.customelements.enabled</code> preferences to <code>true</code>.</p> + +<h2 id="See_also" name="See_also">參見</h2> + +<ul> + <li>{{domxref("Node.removeChild()")}}</li> + <li>{{domxref("Node.replaceChild()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> + <li>{{domxref("Node.hasChildNodes()")}}</li> +</ul> diff --git a/files/zh-tw/web/api/document/createrange/index.html b/files/zh-tw/web/api/document/createrange/index.html new file mode 100644 index 0000000000..93703c54bb --- /dev/null +++ b/files/zh-tw/web/api/document/createrange/index.html @@ -0,0 +1,33 @@ +--- +title: Document.createRange() +slug: Web/API/Document/createRange +translation_of: Web/API/Document/createRange +--- +<div>{{APIRef("DOM")}}</div> + +<p>回傳一 {{domxref("Range")}} 物件。</p> + +<h2 id="Syntax" name="Syntax">語法</h2> + +<pre class="syntaxbox">range = document.createRange(); +</pre> + +<p><code>創造 range</code> 為 {{domxref("Range")}} 物件.</p> + +<h2 id="Example" name="Example">示例</h2> + +<pre class="brush:js">var range = document.createRange(); + +range.setStart(startNode, startOffset); +range.setEnd(endNode, endOffset); +</pre> + +<h2 id="Notes" name="Notes">註意</h2> + +<p>當 <code>Range</code> 被創建之後，必須先設定其範圍初始點及結束點， 才能使用大部分 {{domxref("Range")}} 所提供的方法。</p> + +<h2 id="Specification" name="Specification">規範</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level2-DocumentRange-method-createRange">DOM Level 2 Range: DocumentRange.createRange</a></li> +</ul> diff --git a/files/zh-tw/web/api/document/createtextnode/index.html b/files/zh-tw/web/api/document/createtextnode/index.html new file mode 100644 index 0000000000..80d3d562b9 --- /dev/null +++ b/files/zh-tw/web/api/document/createtextnode/index.html @@ -0,0 +1,120 @@ +--- +title: Document.createTextNode() +slug: Web/API/Document/createTextNode +translation_of: Web/API/Document/createTextNode +--- +<div>{{APIRef("DOM")}}</div> + +<p>創建一個新的文字節點.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>var text</var> = document.createTextNode(<var>data</var>); +</pre> + +<ul> + <li><font face="Consolas, Liberation Mono, Courier, monospace">文字屬於一個文字節點</font>.</li> + <li><font face="Consolas, Liberation Mono, Courier, monospace">將含有數據的串加入文字節點中</font>.</li> +</ul> + +<h2 id="Example">Example</h2> + +<pre class="brush:js"><!DOCTYPE html> +<html lang="en"> +<head> +<title>createTextNode example</title> +<script> +function addTextNode(text) { + var newtext = document.createTextNode(text), + p1 = document.getElementById("p1"); + + p1.appendChild(newtext); +} +</script> +</head> + +<body> + <button onclick="addTextNode('YES! ');">YES!</button> + <button onclick="addTextNode('NO! ');">NO!</button> + <button onclick="addTextNode('WE CAN! ');">WE CAN!</button> + + <hr /> + + <p id="p1">First line of paragraph.</p> +</body> +</html> +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM3 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</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 Phone</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> diff --git a/files/zh-tw/web/api/document/defaultview/index.html b/files/zh-tw/web/api/document/defaultview/index.html new file mode 100644 index 0000000000..58905ebdeb --- /dev/null +++ b/files/zh-tw/web/api/document/defaultview/index.html @@ -0,0 +1,94 @@ +--- +title: Document.defaultView +slug: Web/API/Document/defaultView +translation_of: Web/API/Document/defaultView +--- +<div>{{ApiRef}}</div> + +<p>在瀏覽器中，<strong><code>document.defaultView</code></strong> 屬性會指向一個目前 {{Glossary("Browsing_context", "document")}} 所屬的 {{domxref("Window", "window")}} 物件，若無則為 <code>null</code>。</p> + +<h2 id="語法">語法</h2> + +<pre class="syntaxbox">var <var>win</var> = document.defaultView;</pre> + +<p>此為唯讀屬性。</p> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-document-defaultview', 'Document.defaultView')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-document-defaultview', 'Document.defaultView')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatIE("9.0")}}</td> + <td>0.10</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>Edge</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> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/zh-tw/web/api/document/designmode/index.html b/files/zh-tw/web/api/document/designmode/index.html new file mode 100644 index 0000000000..9f04db7952 --- /dev/null +++ b/files/zh-tw/web/api/document/designmode/index.html @@ -0,0 +1,114 @@ +--- +title: Document.designMode +slug: Web/API/Document/designMode +tags: + - API + - Document + - HTML DOM + - NeedsBrowserCompatibility + - Property +translation_of: Web/API/Document/designMode +--- +<div>{{ ApiRef() }}</div> + +<div> </div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p><code>document.designMode</code> 控制整個文件是否能夠編輯。可用的數值是 <code>"on"</code> 和 <code>"off"</code>。根據規範，這個屬性預設值為 <code>"off"</code>。Firefox 遵從這個標準。較早以前的 Chrome 和 IE 預設值是 <code>"inherit"</code>。從 Chrome 43 起，預設值是 「<code>off</code>」；不再支援「<code>inherit</code>」。在 IE6-10 中，數值為大寫英文字母。</p> + +<h2 id="語法">語法</h2> + +<pre class="brush: js">var mode = document.designMode; +document.designMode = "on"; +document.designMode = "off";</pre> + +<h2 id="Example" name="Example">範例</h2> + +<p>讓 {{HTMLElement("iframe")}} 的文件可以給使用者編輯：</p> + +<pre>iframeNode.contentDocument.designMode = "on"; +</pre> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">規範</th> + <th scope="col">狀態</th> + <th scope="col">註解</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性" style="font-size: 2.14285714285714rem;">瀏覽器相容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th style="line-height: 16px;">功能</th> + <th style="line-height: 16px;">Chrome</th> + <th style="line-height: 16px;">Edge</th> + <th style="line-height: 16px;">Firefox (Gecko)</th> + <th style="line-height: 16px;">Internet Explorer</th> + <th style="line-height: 16px;">Opera</th> + <th style="line-height: 16px;">Safari</th> + </tr> + <tr> + <td>基本支援</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th style="line-height: 16px;">功能</th> + <th style="line-height: 16px;">Android</th> + <th style="line-height: 16px;">Android Webview</th> + <th style="line-height: 16px;">Edge</th> + <th style="line-height: 16px;">Firefox Mobile (Gecko)</th> + <th style="line-height: 16px;">IE Mobile</th> + <th style="line-height: 16px;">Opera Mobile</th> + <th style="line-height: 16px;">Safari Mobile</th> + <th style="line-height: 16px;">Chrome for Android</th> + </tr> + <tr> + <td>基本支援</td> + <td>{{CompatNo}}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">參考</h2> + +<ul> + <li><a href="/zh-TW/docs/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a></li> + <li>{{domxref("HTMLElement.contentEditable")}}</li> + <li><a href="https://msdn.microsoft.com/en-us/library/ms533720(v=vs.85).aspx">designMode property</a> on MSDN</li> +</ul> diff --git a/files/zh-tw/web/api/document/documentelement/index.html b/files/zh-tw/web/api/document/documentelement/index.html new file mode 100644 index 0000000000..aa3f5db82d --- /dev/null +++ b/files/zh-tw/web/api/document/documentelement/index.html @@ -0,0 +1,60 @@ +--- +title: Document.documentElement +slug: Web/API/Document/documentElement +translation_of: Web/API/Document/documentElement +--- +<p>{{ ApiRef("DOM") }}</p> + +<p><code><strong>Document.documentElement</strong></code> 會回傳目前文件（{{domxref("document")}}）中的根元素（{{domxref("Element")}}），如：HTML 文件中的 <code><html></code> 元素。</p> + +<h2 id="Syntax" name="Syntax">語法</h2> + +<pre class="syntaxbox">var <em>element</em> = document.documentElement; +</pre> + +<h2 id="Example" name="Example">範例</h2> + +<pre class="brush:js">var rootElement = document.documentElement; +var firstTier = rootElement.childNodes; + +// firstTier is the NodeList of the direct children of the root element +for (var i = 0; i < firstTier.length; i++) { + // do something with each direct kid of the root element + // as firstTier[i] +}</pre> + +<h2 id="Notes" name="Notes">備註</h2> + +<p>對於所有非空的 HTML 文件， <code>document.documentElement</code> 將會是一個 {{HTMLElement("html")}} 元素 ; 對於所有非空的 XML 文件，<code>document.documentElement</code> 則會是文件的根元素。</p> + +<h2 id="Specification" name="Specification">規範</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">規範</th> + <th scope="col">狀態</th> + <th scope="col"> 備註</th> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','core.html#ID-87CD092','Document.documentElement')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','core.html#ID-87CD092','Document.documentElement')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM4','#dom-document-documentelement','Document.documentElement')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-document-documentelement','Document.documentElement')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> diff --git a/files/zh-tw/web/api/document/execcommand/index.html b/files/zh-tw/web/api/document/execcommand/index.html new file mode 100644 index 0000000000..c06cd0d89c --- /dev/null +++ b/files/zh-tw/web/api/document/execcommand/index.html @@ -0,0 +1,172 @@ +--- +title: Document.execCommand() +slug: Web/API/Document/execCommand +translation_of: Web/API/Document/execCommand +--- +<div>{{ApiRef("DOM")}}{{Obsolete_header}}</div> + +<p><span class="seoSummary">當 HTML 文件（document）被切換到 <code><a href="/en-US/docs/Web/API/Document/designMode">designMode</a></code> 時，它的 <code>document</code> 物件就會對外暴露 <strong><code>execCommand</code></strong> 方法作為操控目前可編輯區域的指令，譬如 <a href="/en-US/docs/Web/HTML/Element/input">form inputs</a> 或 <code><a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">contentEditable</a></code> 元素。</span></p> + +<p>多數的指令會作用在文件的<a href="/en-US/docs/Web/API/Selection">選取</a> （粗體、斜體等），而其他則像是插入新的元素（新增一個連結）或是影響一整列的文字（縮排）。當使用 <code>contentEditable</code> 時， <code>execCommand()</code> 會作用在目前活躍的可編輯元素上。</p> + +<h2 id="語法">語法</h2> + +<pre class="syntaxbox"><em>document</em>.execCommand(<em>aCommandName</em>, <em>aShowDefaultUI</em>, <em>aValueArgument</em>) +</pre> + +<h3 id="回傳值">回傳值</h3> + +<p>如果該指令不被支援或停用將回傳一個 <code>false</code> 的 {{jsxref('Boolean')}} 值。</p> + +<div class="note"> +<p><strong>備註</strong>：只有在使用者互動的部分回傳 <code>true</code> 。請不要嘗試在呼叫指令前使用回傳值來確認瀏覽器是否支援。</p> +</div> + +<h3 id="參數">參數</h3> + +<dl> + <dt><code>aCommandName</code></dt> + <dd>一個 {{domxref("DOMString")}} 作為指定要執行的指令。所有可用的指令列表請見 {{anch("Commands")}} 。</dd> + <dt><code>aShowDefaultUI</code></dt> + <dd>一個 {{jsxref("Boolean")}} 作為指示是否顯示預設的使用者介面。 Mozilla 並未實作這項功能。</dd> + <dt><code>aValueArgument</code></dt> + <dd>針對需要提供輸入引數的指令，藉由 {{domxref("DOMString")}} 提供相關的資訊。譬如， <code>insertImage</code> 需要提供圖片的 URL 。若沒有引數的需求則可指定為 <code>null</code> 。</dd> +</dl> + +<h3 id="指令">指令</h3> + +<dl> + <dt><code>backColor</code></dt> + <dd>變更文件的背景色彩。在 <code>styleWithCss</code> 模式中，它作用於涵蓋區域的背景色彩。這個指令需要提供一個 {{cssxref("<color>")}} 值字串作為引數值。請留意， Internet Explorer 使用這個指令作為設定文字的背景色彩。</dd> + <dt><code>bold</code></dt> + <dd>切換選取區域插入點的粗體與否。 Internet Explorer 使用 {{HTMLElement("strong")}} 標籤而不是 {{HTMLElement("b")}}.</dd> + <dt><code>ClearAuthenticationCache</code></dt> + <dd>清除所有快取中的驗證憑證。</dd> + <dt><code>contentReadOnly</code></dt> + <dd>使內容文件成為唯讀或可編輯。此指令需要提供布林值 true/false 作為引數值。（Internet Explorer 不支援）。</dd> + <dt><code>copy</code></dt> + <dd>複製目前選取的區域到剪貼簿。各個瀏覽器對於這個指令的行為可能有所差異且不斷變更。如果你有使用這個指令的情境，請先查閱相容性表格來決定如何使用。</dd> + <dt><code>createLink</code></dt> + <dd>對選取的區域建立超連結，僅限於有選取內容。需要提供一個 <a href="/en-US/docs/Archive/Mozilla/URIs_and_URLs">URI</a> 字串值作為超連結的 <code>href</code> 。 URI 必須最少包含一個字元且可以是空白字元（Internet Explorer 會建立一個 <code>null</code> 值的連結）。</dd> + <dt><code>cut</code></dt> + <dd>移除目前選取的區域並複製到剪貼簿。各個瀏覽器對於這個指令的行為可能有所差異且不斷變更。使用細節請查閱<a href="#Browser_compatibility">相容性表格</a>。</dd> + <dt><code>decreaseFontSize</code></dt> + <dd>在選取區域或插入點的前後加入一個 {{HTMLElement("small")}} 標籤（ Internet Explorer 不支援）</dd> + <dt><code>defaultParagraphSeparator</code></dt> + <dd>變更可編輯文字區域於新增段落時的段落分隔器。更多細節請查閱 <a href="/zh-TW/docs/Web/Guide/HTML/Editable_content#Differences_in_markup_generation">產生 markup 的區別</a>。</dd> + <dt><code>delete</code></dt> + <dd>刪除目前選取的區域。</dd> + <dt><code>enableAbsolutePositionEditor</code></dt> + <dd>啟用或停用用於移動絕對定位元素的抓取器。這個指令在 Firefox 63 Beta/Dev 版本中預設停用（{{bug(1449564)}}）。</dd> + <dt><code>enableInlineTableEditing</code></dt> + <dd>啟用或停用表格的列 / 欄的插入及刪除。此指令在 Firefox 63 Beta/Dev 版本中預設停用 ({{bug(1449564)}})。</dd> + <dt><code>enableObjectResizing</code></dt> + <dd>啟用或停用圖片、表格、絕對定位元素、其他可重設大小物件的重設大小處理。此指令在 Firefox 63 Beta/Dev 版本中預設停用 ({{bug(1449564)}})。</dd> + <dt><code>fontName</code></dt> + <dd>變更選取區域或插入點的字型名稱。此指令需要字型名稱字串（如「Arial」）作為引數值。</dd> + <dt><code>fontSize</code></dt> + <dd>變更選取區域或插入點的字型大小。此指令需要 <code>1</code>-<code>7</code> 的整數作為引數值。</dd> + <dt><code>foreColor</code></dt> + <dd>變更選取區域或插入點的字型色彩。此指令需要十六進位的色彩字串作為引數值。</dd> + <dt><code>formatBlock</code></dt> + <dd>在目前選取區域的前後加入一個 HTML 區塊層級元素，若選取區域已經存在區塊元素則取代之。（在 Firefox 中， {{HTMLElement("blockquote")}} 是個例外——它會包裹住任何所包含的區塊元素）。 此指令需要一個標籤名稱字串作為引數值。幾乎所有區塊層級元素都可以使用（Internet Explorer and Edge 僅支援標題標籤 <code>H1</code>–<code>H6</code> 、 <code>ADDRESS</code> 、 <code>PRE</code> 且必須由角括號包裹起來，譬如 <code>"<H1>"</code> ）。</dd> + <dt><code>forwardDelete</code></dt> + <dd>刪除游標位置後的字元，等同於在 Windows 按下 Delete 鍵盤按鍵。</dd> + <dt><code>heading</code></dt> + <dd>在選取區域或插入點前後加入一個標題元素。此指令需要標籤名稱字串作為引數值（例：<code>"H1"</code>, <code>"H6"</code> ）（Internet Explorer 及 Safari 不支援）。</dd> + <dt><code>hiliteColor</code></dt> + <dd>變更選取區域或插入點的背景色彩。此指令需要一個色彩字串作為引數值。 <code>useCSS</code> 必須為 <code>true</code> 才能有作用（Internet Explorer 不支援）。</dd> + <dt><code>increaseFontSize</code></dt> + <dd>在選取區域或插入點前後加入一個 {{HTMLElement("big")}} 標題（Internet Explorer 不支援）。</dd> + <dt><code>indent</code></dt> + <dd>縮排選取區域或插入點所包含的列。在 Firefox ，如果選取的範圍跨越多列且不同的縮排層級，只有選取中最淺層縮排列的才會被縮排。</dd> + <dt><code>insertBrOnReturn</code></dt> + <dd>控制 Enter 按鍵按下時在目前區塊元素中插入 {{HTMLElement("br")}} 元素或分割成為兩個元素（Internet Explorer 不支援）。</dd> + <dt><code>insertHorizontalRule</code></dt> + <dd>在插入點插入一個 {{HTMLElement("hr")}} 元素或以它取代選取的內容。</dd> + <dt><code>insertHTML</code></dt> + <dd>在插入點插入一個 HTML 字串（會刪除選取內容）需要一個有效的 HTML 字串作為引數值（Internet Explorer 不支援）。</dd> + <dt><code>insertImage</code></dt> + <dd>在插入點插入一個圖片（會刪除選取內容）。需要一個 URL 字串作為圖片的 <code>src</code> 引數值。這個需求跟 <code>createLink</code> 的字串是一樣的。</dd> + <dt><code>insertOrderedList</code></dt> + <dd>在選取區域或插入點建立一個<a href="/zh-TW/docs/Web/HTML/Element/ol">有序的清單</a>。</dd> + <dt><code>insertUnorderedList</code></dt> + <dd>在選取區域或插入點建立一個<a href="/zh-TW/docs/Web/HTML/Element/ul">無序的清單</a>。</dd> + <dt><code>insertParagraph</code></dt> + <dd>在選取區域或目前列的前後插入<a href="/zh-TW/docs/Web/HTML/Element/p">段落</a>（Internet Explorer 會在插入點插入段落並刪除選取的內容）。</dd> + <dt><code>insertText</code></dt> + <dd>在插入點處插入給予的純文字（選取內容將被刪除）。</dd> + <dt><code>italic</code></dt> + <dd>切換選取區域或插入點的斜體開關（Internet Explorer 使用 {{HTMLElement("em")}} 元素而不是 {{HTMLElement("i")}} ）。</dd> + <dt><code>justifyCenter</code></dt> + <dd>置中對齊選取區域或插入點的內容。</dd> + <dt><code>justifyFull</code></dt> + <dd>左右對齊選取區域或插入點的內容。</dd> + <dt><code>justifyLeft</code></dt> + <dd>靠左對齊選取區域或插入點的內容。</dd> + <dt><code>justifyRight</code></dt> + <dd>靠右對齊選取區域或插入點的內容。</dd> + <dt><code>outdent</code></dt> + <dd>凸排選取區域或插入點所包含的列。</dd> + <dt><code>paste</code></dt> + <dd>在目前的插入點貼上剪貼簿的內容（取代目前選取的項目）。網頁內容無法使用。詳閱 [1]。</dd> + <dt><code>redo</code></dt> + <dd>復原上一個取消的指令。</dd> + <dt><code>removeFormat</code></dt> + <dd>移除目前選取區域所有的格式。</dd> + <dt><code>selectAll</code></dt> + <dd>選取可編輯區域的所有內容。</dd> + <dt><code>strikeThrough</code></dt> + <dd>切換選取區域或插入點的刪除線開關。</dd> + <dt><code>subscript</code></dt> + <dd>切換選取區域或插入點的 <a href="/zh-TW/docs/Web/HTML/Element/sub">subscript</a> 開關。</dd> + <dt><code>superscript</code></dt> + <dd>切換選取區域或插入點的 <a href="/zh-TW/docs/Web/HTML/Element/sup">superscript</a> 開關。</dd> + <dt><code>underline</code></dt> + <dd>切換選取區域或插入點的<a href="/zh-TW/docs/Web/HTML/Element/u">底線</a>開關。</dd> + <dt><code>undo</code></dt> + <dd>取消上一個執行的指令。</dd> + <dt><code>unlink</code></dt> + <dd>從選取的超連結刪除<a href="/zh-TW/docs/Web/HTML/Element/a">錨點元素</a>。</dd> + <dt><code>useCSS</code> {{Deprecated_inline}}</dt> + <dd>針對產生的 markup 使用 HTML 標籤或 CSS。此指令需要一個布林值 true/false 作為引數值。</dd> + <dd>注意：這個引述在邏輯上是反向的（舉例：使用 <code>false</code> 會使用 CSS ，反之使用 <code>true</code> 則使用 HTML 且 Internet Explorer 不支援。這個指令已經被棄用並由 <code>styleWithCSS</code> 取而代之。</dd> + <dt><code>styleWithCSS</code></dt> + <dd>取代 <code>useCSS</code> 的指令。 <code>true</code> 會在 markup 修改 / 產生 <code>style</code> 屬性， false 會產生展示用的元素。</dd> +</dl> + +<h2 id="範例">範例</h2> + +<p>一個在 CodePen 上展示<a href="https://codepen.io/chrisdavidmills/full/gzYjag/">如果使用</a>的範例。</p> + +<h2 id="規格">規格</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">規格</th> + <th scope="col">狀態</th> + <th scope="col">備註</th> + </tr> + <tr> + <td><a href="https://w3c.github.io/editing/execCommand.html#execcommand()">execCommand</a></td> + <td></td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + + + +<p>{{Compat("api.Document.execCommand")}}</p> + +<h2 id="相關資訊">相關資訊</h2> + +<ul> + <li>{{domxref("HTMLElement.contentEditable")}}</li> + <li>{{domxref("document.designMode")}}</li> + <li><a href="/zh-TW/docs/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a></li> + <li><a href="https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md">Scribe's "Browser Inconsistencies" documentation</a> with bugs related to <code>document.execCommand</code>.</li> +</ul> diff --git a/files/zh-tw/web/api/document/forms/index.html b/files/zh-tw/web/api/document/forms/index.html new file mode 100644 index 0000000000..769d80871c --- /dev/null +++ b/files/zh-tw/web/api/document/forms/index.html @@ -0,0 +1,75 @@ +--- +title: Document.forms +slug: Web/API/Document/forms +translation_of: Web/API/Document/forms +--- +<div>{{APIRef("DOM")}}</div> + +<p><code>forms</code> 屬性會回傳一個包含目前頁面中所有 {{HTMLElement("form")}} 元素的集合物件（型別為 {{domxref("HTMLCollection")}}）。</p> + +<h2 id="Syntax" name="Syntax">語法</h2> + +<pre class="syntaxbox"><var>collection</var> = document.forms;</pre> + +<h2 id="Example" name="Example">範例：取得表單資訊</h2> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> + +<head> +<title>document.forms example</title> +</head> + +<body> + +<form id="robby"> + <input type="button" onclick="alert(document.forms[0].id);" value="robby's form" /> +</form> + +<form id="dave"> + <input type="button" onclick="alert(document.forms[1].id);" value="dave's form" /> +</form> + +<form id="paul"> + <input type="button" onclick="alert(document.forms[2].id);" value="paul's form" /> +</form> + +</body> +</html> +</pre> + +<h2 id="範例_2：取得表單內的元素">範例 2：取得表單內的元素</h2> + +<pre class="brush: js">var selectForm = document.forms[index]; +var selectFormElement = document.forms[index].elements[index]; +</pre> + +<h2 id="Specifications" name="Specifications">規範</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-document-forms', 'Document.forms')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-1689064', 'Document.forms')}}</td> + <td>{{ Spec2('DOM2 Events') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="See_Also" name="See_Also">參見</h2> + +<ul> + <li>{{domxref("HTMLFormElement")}}</li> +</ul> diff --git a/files/zh-tw/web/api/document/getelementsbyclassname/index.html b/files/zh-tw/web/api/document/getelementsbyclassname/index.html new file mode 100644 index 0000000000..b66647c82d --- /dev/null +++ b/files/zh-tw/web/api/document/getelementsbyclassname/index.html @@ -0,0 +1,127 @@ +--- +title: Document.getElementsByClassName() +slug: Web/API/Document/getElementsByClassName +tags: + - 待翻譯 +translation_of: Web/API/Document/getElementsByClassName +--- +<p id="Summary">{{APIRef("DOM")}}</p> + +<p>針對所有給定的 class 子元素，回傳類似陣列的物件。當呼叫 document 物件時，它會搜尋整個文件，包括根節點在內。你也可以在所有元素呼叫 {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}}，那它就只會回傳含有給定 class 的特定根元素的後代元素。</p> + +<h2 id="Syntax" name="Syntax">表達式</h2> + +<pre class="syntaxbox"><var>var elements</var> = document.getElementsByClassName(<em>names</em>); // or: +<var>var elements</var> = rootElement.getElementsByClassName(<em>names</em>);</pre> + +<ul> + <li><var>elements</var> 為符合 class 名稱的 {{ domxref("HTMLCollection") }}。</li> + <li><var>names</var> 為符合 class 名稱的字串；class 名稱可以用空白分隔。</li> + <li>getElementsByClassName 可以被任何不只在 document 的元素呼叫。呼叫這個方法的元素將會成為搜尋 class 的根元素。</li> +</ul> + +<h2 id="Examples" name="Examples">範例</h2> + +<p>取得所有 class 為 “test” 的元素：</p> + +<pre class="brush: js">document.getElementsByClassName('test');</pre> + +<p>取得所有 class 為 “test” 和 “red” 的元素：</p> + +<pre class="brush: js">document.getElementsByClassName('red test');</pre> + +<p>取得所有在 id 為 '“main” 的元素裡 class 為 “test” 的元素：</p> + +<pre class="brush: js">document.getElementById('main').getElementsByClassName('test');</pre> + +<p>我們也可以藉由傳遞 {{ domxref("HTMLCollection") }} 為 <var>this </var>來使用 <code>Array.prototype</code> 的方法。下面的例子將會找到所有 class 為 “test” 的 div 元素：</p> + +<pre class="brush: js">var testElements = document.getElementsByClassName('test'); +var testDivs = Array.prototype.filter.call(testElements, function(testElement){ + return testElement.nodeName === 'DIV'; +});</pre> + +<h2 id="取得_class_是_test_的元素">取得 class 是 test 的元素</h2> + +<p>這是最常用的操作方法：</p> + +<pre><!doctype html> +<html> +<head> + <meta charset="UTF-8"> + <title>Document</title> +</head> +<body> + <div id="parent-id"> + <p>hello word1</p> + <p class="test">hello word2</p> + <p>hello word3</p> + <p>hello word4</p> + </div> + <script> + var parentDOM = document.getElementById("parent-id"); + + var test=parentDOM.getElementsByClassName("test");//test is not target element + console.log(test);//HTMLCollection[1] + + var testTarget=parentDOM.getElementsByClassName("test")[0];//year , this element is target + console.log(testTarget);//<p class="test">hello word2</p> + </script> +</body> +</html></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>{{ CompatVersionUnknown() }}</td> + <td>3.0</td> + <td>9.0</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</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="Specification" name="Specification">規範</h2> + +<ul> + <li><a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname" title="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname"><span class="external">W3C: getElementsByClassName</span></a></li> +</ul> diff --git a/files/zh-tw/web/api/document/head/index.html b/files/zh-tw/web/api/document/head/index.html new file mode 100644 index 0000000000..7ecde675ea --- /dev/null +++ b/files/zh-tw/web/api/document/head/index.html @@ -0,0 +1,114 @@ +--- +title: Document.head +slug: Web/API/Document/head +translation_of: Web/API/Document/head +--- +<p>{{APIRef("DOM")}}</p> + +<p>回傳當前文件的 {{HTMLElement("head")}} 元素。如果該文件有超過一個 <code><head></code> 元素，那只會回傳第一個 <code><head></code> 元素。</p> + +<h2 id="Syntax" name="Syntax">語法</h2> + +<pre class="syntaxbox"><em>var objRef</em> = document.head; +</pre> + +<h2 id="Example" name="Example">範例</h2> + +<pre class="brush: js">// in HTML: <head id="my-document-head"> +var aHead = document.head; + +alert(aHead.id); // "my-document-head"; + +alert( document.head === document.querySelector("head") ); // true +</pre> + +<h2 id="備註">備註</h2> + +<p><code>document.head</code> 是「唯讀」。若是想要將 <code>document.head</code> 改成別的值會失敗，這時有些瀏覽器不會告知任何錯誤訊息；有些，例如在 <a href="/zh-TW/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">ECMAScript Strict 模式下</a> 的 Gecko 瀏覽器，會給出 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/TypeError">TypeError</a></code> 異常。</p> + +<h2 id="規範">規範</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('HTML WHATWG','dom.html#dom-document-head','Document.head')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1','dom.html#dom-document-head','Document.head')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','dom.html#dom-document-head','Document.head')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2")}}</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{domxref("document.body")}}</li> +</ul> diff --git a/files/zh-tw/web/api/document/index.html b/files/zh-tw/web/api/document/index.html new file mode 100644 index 0000000000..ca1c9830b7 --- /dev/null +++ b/files/zh-tw/web/api/document/index.html @@ -0,0 +1,446 @@ +--- +title: Document +slug: Web/API/Document +tags: + - API + - DOM + - Gecko + - MakeBrowserAgnostic + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/Document +--- +<div>{{APIRef}}</div> + +<div></div> + +<p><span class="seoSummary"><strong><code>Document</code></strong> 介面代表所有在瀏覽器中載入的網頁，也是作為網頁內容 <a href="/en-US/docs/Using_the_W3C_DOM_Level_1_Core" title="Using_the_W3C_DOM_Level_1_Core">DOM 樹</a></span>（包含如 {{HTMLElement("body")}}、{{HTMLElement("table")}} 與其它的{{domxref("Element", "元素")}}）的進入點。<code>Document</code> 提供了網頁文件所需的通用函式，例如取得頁面 URL 或是建立網頁文件中新的元素節點等。</p> + +<p>{{inheritanceDiagram}}</p> + +<p><code>Document</code> 介面描述了各種類型文件的共同屬性與方法。根據文件的類型（如 <a href="/zh-TW/docs/HTML" title="HTML">HTML</a>、<a href="/zh-TW/docs/XML" title="XML">XML</a>、SVG 等），也會擁有各自的 API：HTML 文件（content type 為 <code>text/html</code>）實作了 {{domxref("HTMLDocument")}} 介面，而 XML 及 SVG 文件實作了 {{domxref("XMLDocument")}} 介面。</p> + +<p>請注意 <code>window.document</code> 物件為 <code>HTMLDocument</code> 所建構。</p> + +<h2 id="Properties" name="Properties">屬性</h2> + +<p><em>這個介面繼承了 {{domxref("Node")}} 以及 {{domxref("EventTarget")}} 介面。</em></p> + +<dl> + <dt>{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}</dt> + <dd>Provides access to all elements with an <code>id</code>. This is a legacy, non-standard interface and you should use the {{domxref("document.getElementById()")}} method instead.</dd> + <dt>{{domxref("Document.async")}} {{Deprecated_inline}}</dt> + <dd>Used with {{domxref("Document.load")}} to indicate an asynchronous request.</dd> + <dt>{{domxref("Document.characterSet")}} {{readonlyinline}}</dt> + <dd>Returns the character set being used by the document.</dd> + <dt>{{domxref("Document.charset")}} {{readonlyinline}} {{Deprecated_inline}}</dt> + <dd>Alias of {{domxref("Document.characterSet")}}. Use this property instead.</dd> + <dt>{{domxref("Document.compatMode")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>Indicates whether the document is rendered in <em>quirks</em> or <em>strict</em> mode.</dd> + <dt>{{domxref("Document.contentType")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>Returns the Content-Type from the MIME Header of the current document.</dd> + <dt>{{domxref("Document.doctype")}} {{readonlyinline}}</dt> + <dd>回傳目前文件的 Document Type Definition（DTD）。</dd> + <dt>{{domxref("Document.documentElement")}} {{readonlyinline}}</dt> + <dd>回傳當前文件 {{domxref("Document")}} 的根元素。以 HTML documents為例：它會回傳 {{HTMLElement("html")}} 這項元素。</dd> + <dt>{{domxref("Document.documentURI")}} {{readonlyinline}}</dt> + <dd>Returns the document location as a string.</dd> + <dt>{{domxref("Document.domConfig")}} {{Deprecated_inline}}</dt> + <dd>Should return a {{domxref("DOMConfiguration")}} object.</dd> + <dt>{{domxref("Document.fullscreen")}} {{obsolete_inline}}</dt> + <dd><code>true</code> when the document is in {{domxref("Using_full-screen_mode","full-screen mode")}}.</dd> + <dt>{{domxref("Document.hidden")}} {{readonlyinline}}</dt> + <dd>…</dd> + <dt>{{domxref("Document.implementation")}} {{readonlyinline}}</dt> + <dd>Returns the DOM implementation associated with the current document.</dd> + <dt>{{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}}</dt> + <dd>Alias of {{domxref("Document.characterSet")}}. Use this property instead.</dd> + <dt>{{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}}</dt> + <dd>Returns the name of the style sheet set that was last enabled. Has the value <code>null</code> until the style sheet is changed by setting the value of {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}.</dd> + <dt>{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} that is <code>true</code> only if this document is synthetic, such as a standalone image, video, audio file, or the like.</dd> + <dt>{{domxref("Document.mozFullScreenElement")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> + <dd>The element that's currently in full screen mode for this document.</dd> + <dt>{{domxref("Document.mozFullScreenEnabled")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> + <dd><code>true</code> if calling {{domxref("Element.mozRequestFullscreen()")}} would succeed in the curent document.</dd> + <dt>{{domxref("Document.pointerLockElement")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>Returns the element set as the target for mouse events while the pointer is locked. <code>null</code> if lock is pending, pointer is unlocked, or if the target is in another document.</dd> + <dt>{{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}}</dt> + <dd>Returns the preferred style sheet set as specified by the page author.</dd> + <dt>{{domxref("Document.scrollingElement")}} {{experimental_inline}} {{readonlyinline}}</dt> + <dd>Returns a reference to the {{domxref("Element")}} that scrolls the document.</dd> + <dt>{{domxref("Document.selectedStyleSheetSet")}}</dt> + <dd>Returns which style sheet set is currently in use.</dd> + <dt>{{domxref("Document.styleSheets")}} {{readonlyinline}}</dt> + <dd>Returns a list of the style sheet objects on the current document.</dd> + <dt>{{domxref("Document.styleSheetSets")}} {{readonlyinline}}</dt> + <dd>Returns a list of the style sheet sets available on the document.</dd> + <dt>{{domxref("Document.timeline")}} {{readonlyinline}}</dt> + <dd>…</dd> + <dt>{{domxref("Document.undoManager")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>…</dd> + <dt>{{domxref("Document.visibilityState")}} {{readonlyinline}}</dt> + <dd> + <p>Returns a <code>string</code> denoting the visibility state of the document. Possible values are <code>visible</code>, <code>hidden</code>, <code>prerender</code>, and <code>unloaded</code>.</p> + </dd> + <dt>{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}</dt> + <dd>Returns the encoding as determined by the XML declaration.</dd> + <dt>{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}</dt> + <dd>Returns <code>true</code> if the XML declaration specifies the document to be standalone (<em>e.g.,</em> An external part of the DTD affects the document's content), else <code>false</code>.</dd> + <dt>{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}</dt> + <dd>Returns the version number as specified in the XML declaration or <code>"1.0"</code> if the declaration is absent.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p> + +<p>{{page("/en-US/docs/Web/API/ParentNode","Properties")}}</p> + +<h3 id="HTML_文件擴充">HTML 文件擴充</h3> + +<p><em><strong><code>window.document</code></strong> 物件的部分屬性繼承自 HTML 文件的 {{domxref("HTMLDocument")}} 介面，或是來自 <code>Document</code> 從 HTML5 之後擴充的屬性。</em></p> + +<dl> + <dt>{{domxref("Document.activeElement")}} {{readonlyinline}}</dt> + <dd>Returns the currently focused element.</dd> + <dt>{{domxref("Document.alinkColor")}} {{Deprecated_inline}}</dt> + <dd>Returns or sets the color of active links in the document body.</dd> + <dt>{{domxref("Document.anchors")}}</dt> + <dd>Returns a list of all of the anchors in the document.</dd> + <dt>{{domxref("Document.applets")}} {{Deprecated_inline}}</dt> + <dd>Returns an ordered list of the applets within a document.</dd> + <dt>{{domxref("Document.bgColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the background color of the current document.</dd> + <dt>{{domxref("Document.body")}}</dt> + <dd>Returns the {{HTMLElement("body")}} element of the current document.</dd> + <dt>{{domxref("Document.cookie")}}</dt> + <dd>Returns a semicolon-separated list of the cookies for that document or sets a single cookie.</dd> + <dt>{{domxref("Document.defaultView")}} {{readonlyinline}}</dt> + <dd>Returns a reference to the window object.</dd> + <dt>{{domxref("Document.designMode")}}</dt> + <dd>Gets/sets the ability to edit the whole document.</dd> + <dt>{{domxref("Document.dir")}} {{readonlyinline}}</dt> + <dd>Gets/sets directionality (rtl/ltr) of the document.</dd> + <dt>{{domxref("Document.domain")}} {{readonlyinline}}</dt> + <dd>Returns the domain of the current document.</dd> + <dt>{{domxref("Document.embeds")}} {{readonlyinline}}</dt> + <dd>Returns a list of the embedded {{HTMLElement('embed')}} elements within the current document.</dd> + <dt>{{domxref("document.fgColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the foreground color, or text color, of the current document.</dd> + <dt>{{domxref("Document.forms")}} {{readonlyinline}}</dt> + <dd>Returns a list of the {{HTMLElement("form")}} elements within the current document.</dd> + <dt>{{domxref("Document.head")}} {{readonlyinline}}</dt> + <dd>Returns the {{HTMLElement("head")}} element of the current document.</dd> + <dt>{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Gets/sets the height of the current document.</dd> + <dt>{{domxref("Document.images")}} {{readonlyinline}}</dt> + <dd>Returns a list of the images in the current document.</dd> + <dt>{{domxref("Document.lastModified")}} {{readonlyinline}}</dt> + <dd>Returns the date on which the document was last modified.</dd> + <dt>{{domxref("Document.linkColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the color of hyperlinks in the document.</dd> + <dt>{{domxref("Document.links")}} {{readonlyinline}}</dt> + <dd>Returns a list of all the hyperlinks in the document.</dd> + <dt>{{domxref("Document.location")}} {{readonlyinline}}</dt> + <dd>Returns the URI of the current document.</dd> + <dt>{{domxref("Document.plugins")}} {{readonlyinline}}</dt> + <dd>Returns a list of the available plugins.</dd> + <dt>{{domxref("Document.readyState")}} {{readonlyinline}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns loading status of the document.</dd> + <dt>{{domxref("Document.referrer")}} {{readonlyinline}}</dt> + <dd>Returns the URI of the page that linked to this page.</dd> + <dt>{{domxref("Document.scripts")}} {{readonlyinline}}</dt> + <dd>Returns all the {{HTMLElement("script")}} elements on the document.</dd> + <dt>{{domxref("Document.title")}}</dt> + <dd>Sets or gets title of the current document.</dd> + <dt>{{domxref("Document.URL")}} {{readonlyInline}}</dt> + <dd>Returns<span style="line-height: 19.0909080505371px;"> the document location as a string.</span></dd> + <dt>{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the color of visited hyperlinks.</dd> + <dt>{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Returns the width of the current document.</dd> +</dl> + +<h3 id="Event_handlers" name="Event_handlers">事件處理器</h3> + +<dl> + <dt>{{domxref("Document.onafterscriptexecute")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("afterscriptexecute")}} event.</dd> + <dt>{{domxref("Document.onbeforescriptexecute")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("beforescriptexecute")}} event.</dd> + <dt>{{domxref("Document.oncopy")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("copy")}} event.</dd> + <dt>{{domxref("Document.oncut")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("cut")}} event.</dd> + <dt>{{domxref("Document.onfullscreenchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenchange")}} event is raised.</dd> + <dt>{{domxref("Document.onfullscreenerror")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenerror")}} event is raised.</dd> + <dt>{{domxref("Document.onpaste")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("paste")}} event.</dd> + <dt>{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}</dt> + <dd>Represents the event handling code for the {{event("pointerlockchange")}} event.</dd> + <dt>{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}</dt> + <dd>Represetnts the event handling code for the {{event("pointerlockerror")}} event.</dd> + <dt>{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Represents the event handling code for the {{event("readystatechange")}} event.</dd> + <dt>{{domxref("Document.onselectionchange")}} {{experimental_inline}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd> + <dt>{{domxref("Document.onwheel")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("wheel")}} event.</dd> +</dl> + +<p><em>此介面繼承了 {{domxref("GlobalEventHandlers")}} 的事件處理器：</em></p> + +<p>{{Page("/zh-TW/docs/Web/API/GlobalEventHandlers", "屬性")}}</p> + +<h2 id="Methods" name="Methods">方法</h2> + +<p><em>This interface also inherits from the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces.</em></p> + +<dl> + <dt>{{domxref("Document.adoptNode()")}}</dt> + <dd>Adopt node from an external document.</dd> + <dt>{{domxref("Document.captureEvents()")}} {{Deprecated_inline}}</dt> + <dd>See {{domxref("Window.captureEvents")}}.</dd> + <dt>{{domxref("Document.caretPositionFromPoint()")}}{{experimental_inline}}</dt> + <dd>Gets the {{domxref("CaretPosition")}} at or near the specified coordinates.</dd> + <dt>{{domxref("Document.caretRangeFromPoint()")}}{{non-standard_inline}}</dt> + <dd>Gets a {{Domxref("Range")}} object for the document fragment under the specified coordinates.</dd> + <dt>{{domxref("Document.createAttribute()")}}</dt> + <dd>Creates a new {{domxref("Attr")}} object and returns it.</dd> + <dt>{{domxref("Document.createAttributeNS()")}}</dt> + <dd>Creates a new attribute node in a given namespace and returns it.</dd> + <dt>{{domxref("Document.createCDATASection()")}}</dt> + <dd>Creates a new CDATA node and returns it.</dd> + <dt>{{domxref("Document.createComment()")}}</dt> + <dd>Creates a new comment node and returns it.</dd> + <dt>{{domxref("Document.createDocumentFragment()")}}</dt> + <dd>Creates a new document fragment.</dd> + <dt>{{domxref("Document.createElement()")}}</dt> + <dd>Creates a new element with the given tag name.</dd> + <dt>{{domxref("Document.createElementNS()")}}</dt> + <dd>Creates a new element with the given tag name and namespace URI.</dd> + <dt>{{domxref("Document.createEntityReference()")}} {{obsolete_inline}}</dt> + <dd>Creates a new entity reference object and returns it.</dd> + <dt>{{domxref("Document.createEvent()")}}</dt> + <dd>Creates an event object.</dd> + <dt>{{domxref("Document.createNodeIterator()")}}</dt> + <dd>Creates a {{domxref("NodeIterator")}} object.</dd> + <dt>{{domxref("Document.createProcessingInstruction()")}}</dt> + <dd>Creates a new {{domxref("ProcessingInstruction")}} object.</dd> + <dt>{{domxref("Document.createRange()")}}</dt> + <dd>Creates a {{domxref("Range")}} object.</dd> + <dt>{{domxref("Document.createTextNode()")}}</dt> + <dd>Creates a text node.</dd> + <dt>{{domxref("Document.createTouch()")}}</dt> + <dd>Creates a {{domxref("Touch")}} object.</dd> + <dt>{{domxref("Document.createTouchList()")}}</dt> + <dd>Creates a {{domxref("TouchList")}} object.</dd> + <dt>{{domxref("Document.createTreeWalker()")}}</dt> + <dd>Creates a {{domxref("TreeWalker")}} object.</dd> + <dt>{{domxref("Document.elementFromPoint()")}}{{experimental_inline}}</dt> + <dd>Returns the topmost element at the specified coordinates.</dd> + <dt>{{domxref("Document.elementsFromPoint()")}}{{experimental_inline}}</dt> + <dd>Returns an array of all elements at the specified coordinates.</dd> + <dt>{{domxref("Document.enableStyleSheetsForSet()")}}</dt> + <dd>Enables the style sheets for the specified style sheet set.</dd> + <dt>{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}</dt> + <dd>Release the pointer lock.</dd> + <dt>{{domxref("Document.getAnimations()")}} {{experimental_inline}}</dt> + <dd>Returns an array of all {{domxref("Animation")}} objects currently in effect, whose target elements are descendants of the <code>document</code>.</dd> + <dt>{{domxref("Document.getElementsByClassName()")}}</dt> + <dd>Returns a list of elements with the given class name.</dd> + <dt>{{domxref("Document.getElementsByTagName()")}}</dt> + <dd>Returns a list of elements with the given tag name.</dd> + <dt>{{domxref("Document.getElementsByTagNameNS()")}}</dt> + <dd>Returns a list of elements with the given tag name and namespace.</dd> + <dt>{{domxref("Document.importNode()")}}</dt> + <dd>Returns a clone of a node from an external document.</dd> + <dt>{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}</dt> + <dd>Replaces entities, normalizes text nodes, etc.</dd> + <dt>{{domxref("Document.registerElement()")}} {{experimental_inline}}</dt> + <dd>Registers a web component.</dd> + <dt>{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Releases the current mouse capture if it's on an element in this document.</dd> + <dt>{{domxref("Document.releaseEvents()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt> + <dd>See {{domxref("Window.releaseEvents()")}}.</dd> + <dt>{{domxref("Document.routeEvent()")}} {{non-standard_inline}} {{obsolete_inline(24)}}</dt> + <dd>See {{domxref("Window.routeEvent()")}}.</dd> + <dt>{{domxref("Document.mozSetImageElement()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Allows you to change the element being used as the background image for a specified element ID.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p> + +<dl> + <dt>{{domxref("document.getElementById","document.getElementById(String id)")}}</dt> + <dd>Returns an object reference to the identified element.</dd> + <dt>{{domxref("document.querySelector","document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt> + <dd>Returns the first Element node within the document, in document order, that matches the specified selectors.</dd> + <dt>{{domxref("document.querySelectorAll","document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt> + <dd>Returns a list of all the Element nodes within the document that match the specified selectors.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("XPathEvaluator")}} interface:</p> + +<dl> + <dt>{{domxref("document.createExpression","document.createExpression(String expression, XPathNSResolver resolver)")}}</dt> + <dd>Compiles an <code><a href="/en-US/docs/XPathExpression" title="XPathExpression">XPathExpression</a></code> which can then be used for (repeated) evaluations.</dd> + <dt>{{domxref("document.createNSResolver","document.createNSResolver(Node resolver)")}}</dt> + <dd>Creates an {{domxref("XPathNSResolver")}} object.</dd> + <dt>{{domxref("document.evaluate","document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}</dt> + <dd>Evaluates an XPath expression.</dd> +</dl> + +<h3 id="HTML_文件擴充_2">HTML 文件擴充</h3> + +<p><code>Document</code> 物件的部分方法繼承自 HTML 文件的 {{domxref("HTMLDocument")}} 介面，或是來自 <code>Document</code> 從 HTML5 之後擴充的方法：</p> + +<dl> + <dt>{{domxref("document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt> + <dd>In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.</dd> + <dt>{{domxref("document.close()")}}</dt> + <dd>Closes a document stream for writing.</dd> + <dt>{{domxref("document.execCommand","document.execCommand(String command[, Boolean showUI[, String value]])")}}</dt> + <dd>On an editable document, executes a formating command.</dd> + <dt>{{domxref("document.getElementsByName","document.getElementsByName(String name)")}}</dt> + <dd>Returns a list of elements with the given name.</dd> + <dt>{{domxref("document.getSelection()")}}</dt> + <dd>Returns a {{domxref("Selection")}} object related to text selected in the document.</dd> + <dt>{{domxref("document.hasFocus()")}}</dt> + <dd>Returns <code>true</code> if the focus is currently located anywhere inside the specified document.</dd> + <dt>{{domxref("document.open()")}}</dt> + <dd>Opens a document stream for writing.</dd> + <dt>{{domxref("document.queryCommandEnabled","document.queryCommandEnabled(String command)")}}</dt> + <dd>Returns true if the formating command can be executed on the current range.</dd> + <dt>{{domxref("document.queryCommandIndeterm","document.queryCommandIndeterm(String command)")}}</dt> + <dd>Returns true if the formating command is in an indeterminate state on the current range.</dd> + <dt>{{domxref("document.queryCommandState","document.queryCommandState(String command)")}}</dt> + <dd>Returns true if the formating command has been executed on the current range.</dd> + <dt>{{domxref("document.queryCommandSupported","document.queryCommandSupported(String command)")}}</dt> + <dd>Returns true if the formating command is supported on the current range.</dd> + <dt>{{domxref("document.queryCommandValue","document.queryCommandValue(String command)")}}</dt> + <dd>Returns the current value of the current range for a formating command.</dd> + <dt>{{domxref("document.write","document.write(String text)")}}</dt> + <dd>Writes text in a document.</dd> + <dt>{{domxref("document.writeln","document.writeln(String text)")}}</dt> + <dd>Writes a line of text in a document.</dd> +</dl> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Selection API', '', 'Extend Document and GlobalEventHandlers')}}</td> + <td>{{Spec2('Selection API')}}</td> + <td>Adds <code>onselectstart</code> and <code>onselectionchange</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM1','#i-Document','Document')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition for the interface</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','#i-Document','Document')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Supersede DOM 1</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','#i-Document','Document')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Supersede DOM 2</td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#interface-document','Document')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Intend to supersede DOM 3</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Turn the {{domxref("HTMLDocument")}} interface into a <code>Document</code> extension.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}</td> + <td>{{Spec2('DOM3 XPath')}}</td> + <td>Define the {{domxref("XPathEvaluator")}} interface which extend document.</td> + </tr> + <tr> + <td>{{SpecName('Page Visibility API', '#sec-document-interface', 'Document')}}</td> + <td>{{Spec2('Page Visibility API')}}</td> + <td>Extend the <code>Document</code> interface with the <code>visibilityState</code> and <code>hidden</code> attributes</td> + </tr> + <tr> + <td>{{SpecName('HTML Editing','#dom-document-getselection','Document')}}</td> + <td>{{Spec2('HTML Editing')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('CSSOM')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性備註">瀏覽器相容性備註</h2> + +<h3 id="Firefox_notes">Firefox notes</h3> + +<p>Mozilla defines a set of non-standard properties made only for XUL content:</p> + +<dl> + <dt>{{domxref("document.currentScript")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Returns the {{HTMLElement("script")}} element that is currently executing.</dd> + <dt>{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}</dt> + <dd>(<strong>Mozilla add-ons only!</strong>) Returns the {{Interface("nsIURI")}} object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).</dd> + <dt>{{domxref("document.popupNode")}}</dt> + <dd>Returns the node upon which a popup was invoked.</dd> + <dt>{{domxref("document.tooltipNode")}}</dt> + <dd>Returns the node which is the target of the current tooltip.</dd> +</dl> + +<p>Mozilla also define some non-standard methods:</p> + +<dl> + <dt>{{domxref("document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}</dt> + <dd>This method never did anything and always threw an exception, so it was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd> + <dt>{{domxref("document.getBoxObjectFor")}} {{obsolete_inline}}</dt> + <dd>Use the {{domxref("Element.getBoundingClientRect()")}} method instead.</dd> + <dt>{{domxref("document.loadOverlay")}} {{Fx_minversion_inline("1.5")}}</dt> + <dd>Loads a <a href="/en-US/docs/XUL_Overlays" title="XUL_Overlays">XUL overlay</a> dynamically. This only works in XUL documents.</dd> + <dt>{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}</dt> + <dd>This method never did anything but throw an exception, and was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd> +</dl> + +<h3 id="Internet_Explorer_notes">Internet Explorer notes</h3> + +<p>Microsoft defines some non-standard properties:</p> + +<dl> + <dt>{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See <a href="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx">MSDN</a>.</dd> + <dt><span style="font-weight: normal; line-height: 1.5;">Internet Explorer does not support all methods from the <code>Node</code> interface in the <code>Document</code> interface:</span></dt> +</dl> + +<dl> + <dt>{{domxref("document.contains")}}</dt> + <dd>As a work-around, <code>document.body.contains()</code> can be used.</dd> +</dl> diff --git a/files/zh-tw/web/api/document/keyup_event/index.html b/files/zh-tw/web/api/document/keyup_event/index.html new file mode 100644 index 0000000000..3568b30c18 --- /dev/null +++ b/files/zh-tw/web/api/document/keyup_event/index.html @@ -0,0 +1,149 @@ +--- +title: keyup +slug: Web/API/Document/keyup_event +translation_of: Web/API/Document/keyup_event +--- +<p>當鍵盤上的手指離開按鍵時，<code>keyup事件會被觸發。</code></p> + +<h2 id="基本資料">基本資料</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">詳述</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keyup">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">介面</dt> + <dd style="margin: 0 0 0 120px;"><a href="http://developer.mozilla.org/en-US/docs/DOM/KeyboardEvent" title="http://en-US/docs/DOM/KeyboardEvent">KeyboardEvent</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">網頁文件, 網頁元素</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">None</dd> +</dl> + +<h2 id="屬性">屬性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>DOMString</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>Boolean</td> + <td>Whether the event normally bubbles or not</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>Boolean</td> + <td>Whether the event is cancellable or not?</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td>WindowProxy</td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>EventTarget (DOM element)</td> + <td>Focused element processing the key event, root element if no suitable input element focused.</td> + </tr> + <tr> + <td><code>char</code> {{readonlyInline}}</td> + <td>DOMString (string)</td> + <td>The character value of the key. If the key corresponds to a printable character, this value is a non-empty Unicode string containing that character. If the key doesn't have a printable representation, this is an empty string. See <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> for the detail. + <div class="note"><strong>Note:</strong> If the key is used as a macro that inserts multiple characters, this attribute's value is the entire string, not just the first character.</div> + </td> + </tr> + <tr> + <td><code>key</code> {{readonlyInline}}</td> + <td>DOMString (string)</td> + <td>The key value of the key represented by the event. If the value has a printed representation, this attribute's value is the same as the <code>char</code> attribute. Otherwise, it's one of the key value strings specified in {{ anch("Key values") }}. If the key can't be identified, this is the string "Unidentified". See <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> for the detail. Read Only.</td> + </tr> + <tr> + <td><code>charCode</code> {{readonlyInline}}</td> + <td>Unsigned long (int)</td> + <td>The Unicode reference number of the key; this attribute is used only by the <a href="/en-US/docs/Mozilla_event_reference/keypress"><code>keypress</code></a> event. For keys whose <code>char</code> attribute contains multiple characters, this is the Unicode value of the first character in that attribute. + <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>char</code> instead, if available.</div> + </td> + </tr> + <tr> + <td><code>keyCode</code> {{readonlyInline}}</td> + <td>Unsigned long (int)</td> + <td>A system and implementation dependent numerical code identifying the unmodified value of the pressed key. This is usually the decimal ASCII ({{ RFC(20) }}) or Windows 1252 code corresponding to the key; see {{ anch("Virtual key codes") }} for a list of common values. If the key can't be identified, this value is 0. + <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>key</code> instead, if available.</div> + </td> + </tr> + <tr> + <td><code>which</code> {{readonlyInline}}</td> + <td>Unsigned long (int)</td> + <td>A system and implementation dependent numeric code identifying the unmodified value of the pressed key; this is usually the same as <code>keyCode</code>. + <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>key</code> instead, if available.</div> + </td> + </tr> + <tr> + <td><code>location</code> {{readonlyInline}}</td> + <td>long (float)</td> + <td>The location of the key on the device.</td> + </tr> + <tr> + <td><code>repeat</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if a key has been depressed long enough to trigger key repetition, otherwise <code>false</code>.</td> + </tr> + <tr> + <td><code>locale</code> {{readonlyInline}}</td> + <td>string</td> + <td>The language code for the key event, if available; otherwise, the empty string.</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + </tbody> +</table> + +<h2 id="Related_Events">Related Events</h2> + +<ul> + <li>{{event("keydown")}}</li> + <li>{{event("keyup")}}</li> + <li>{{event("keypress")}}</li> + <li>{{event("input")}}</li> +</ul> diff --git a/files/zh-tw/web/api/document/queryselector/index.html b/files/zh-tw/web/api/document/queryselector/index.html new file mode 100644 index 0000000000..a79edb1c1f --- /dev/null +++ b/files/zh-tw/web/api/document/queryselector/index.html @@ -0,0 +1,102 @@ +--- +title: document.querySelector +slug: Web/API/Document/querySelector +tags: + - DOM + - Fixit + - Gecko DOM Reference + - Gecko DOM 參考 + - Selectors + - 選擇器 +translation_of: Web/API/Document/querySelector +--- +<div> + {{ApiRef()}}</div> +<h2 id="Summary" name="Summary">摘要</h2> +<p>回傳 document 第一個符合特定選擇器群組的元素（採用深度優先，前序追蹤 document 節點）。</p> +<h2 id="Syntax" name="Syntax">語法</h2> +<pre><em>element</em> = document.querySelector(<em>selectors</em>);</pre> +<p>其中</p> +<ul> + <li><code>element</code> 是<a href="/en-US/docs/DOM/element" title="en-US/docs/DOM/element">元素</a>物件。</li> + <li><code>selectors</code> 是以逗號分隔，包含一個或多個 CSS 選擇器的字串。</li> +</ul> +<h2 id="Example" name="Example">範例</h2> +<p>這個範例會回傳 document 選到的第一個 "<code>myclass</code>" class：</p> +<pre class="brush: js">var el = document.querySelector(".myclass"); +</pre> +<h2 id="Notes" name="Notes">注意事項</h2> +<p>若找不到相應元素就會回傳 <code>null</code>，否則回傳第一個符合的元素。</p> +<p>若選擇器符合某 ID，且該 ID 在 document 中誤用數次，就會回傳第一個符合的元素。</p> +<p>當特定選擇器群組無效，會擲回 <code>SYNTAX_ERR</code> 例外狀況。</p> +<p><code>querySelector()</code> 是由 Selectors API 引入的選擇器。</p> +<p>傳入 <code>querySelector</code> 的字串參數必須遵循 CSS 語法。若要選取未遵循 CSS 語法的 ID 或選擇器（例如不當使用冒號或空格），必須強制加上兩個反斜線來跳脫錯誤的字元：</p> +<pre class="brush: html"><div id="foo\bar"></div> +<div id="foo:bar"></div> + +<script> +document.querySelector('#foo\bar') // 甚麼都沒選到 +document.querySelector('#foo\\\\bar') // 選到第一個 div +document.querySelector('#foo:bar') // 甚麼都沒選到 +document.querySelector('#foo\\:bar') // 選到第二個 div +</script> +</pre> +<h2 id="Browser_Compatibility" name="Browser_Compatibility">瀏覽器相容性</h2> +<p>{{CompatibilityTable()}}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>功能特色</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>基本支援</td> + <td>1</td> + <td>3.5 (1.9.1)<br> + {{bug(416317)}}</td> + <td>8</td> + <td>10</td> + <td>3.2 (525.3)<br> + {{Webkitbug("16587")}}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>功能特色</th> + <th>Android</th> + <th>Firefox 行動版 (Gecko)</th> + <th>IE 行動版</th> + <th>Opera 行動版</th> + <th>Safari 行動版</th> + </tr> + <tr> + <td>基本支援</td> + <td>2.1</td> + <td>有</td> + <td>9</td> + <td>10.0</td> + <td>3.2</td> + </tr> + </tbody> + </table> +</div> +<h2 id="Specification" name="Specification">規格文件</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/selectors-api/" title="http://www.w3.org/TR/selectors-api/">Selectors API</a></li> +</ul> +<h2 id="See_also" name="See_also">詳見</h2> +<ul> + <li>{{domxref("document.querySelectorAll()")}}</li> + <li>{{domxref("element.querySelector()")}}</li> + <li>{{domxref("element.querySelectorAll()")}}</li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">querySelector 代碼片段</a></li> +</ul> diff --git a/files/zh-tw/web/api/document/readystate/index.html b/files/zh-tw/web/api/document/readystate/index.html new file mode 100644 index 0000000000..13cf835aa7 --- /dev/null +++ b/files/zh-tw/web/api/document/readystate/index.html @@ -0,0 +1,108 @@ +--- +title: Document.readyState +slug: Web/API/Document/readyState +tags: + - API + - HTML DOM + - Reference +translation_of: Web/API/Document/readyState +--- +<div>{{APIRef("DOM")}} {{ gecko_minversion_header("1.9.2") }}</div> + +<h2 id="Summary" name="Summary">總覽</h2> + +<p>{{ domxref("document") }} 的 <strong>Document.readyState</strong> 屬性描述文件的讀取狀態。</p> + +<h3 id="數值">數值</h3> + +<p>文件的 <strong>readyState</strong> 數值如下：</p> + +<dl> + <dt>loading</dt> + <dd>{{ domxref("document") }} 正在讀取中。</dd> + <dt>interactive</dt> + <dd>文件已經完成讀取和解析，但是其他的子資源，如「圖片樣式層次表」，仍然在讀取。這個狀態表示 {{event("DOMContentLoaded")}} 事件已經被觸發。</dd> + <dt>complete</dt> + <dd>文件及子資源都完成讀取。這個狀態表示 {{event("load")}} 事件即將被觸發。</dd> +</dl> + +<p>當這個屬性的數值改變時， {{event("readystatechange")}} 事件在 {{ domxref("document") }} 上觸發。</p> + +<h2 id="表達式">表達式</h2> + +<pre class="brush: js"><em>var string</em> = document.readyState; +</pre> + +<h2 id="範例"><span>範例</span></h2> + +<h3 id="不同的狀態">不同的狀態</h3> + +<pre class="brush: js"><span>switch (document.readyState) { + case "loading": + // 文件讀取中。 + break; + case "interactive": + // 文件已經完成讀取。可以使用 DOM 元素。 + var span = document.createElement("span"); + span.textContent = "A <span> element."; + document.body.appendChild(span); + break; + case "complete": + // 頁面已經完成讀取。 + console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText); + break; +}</span> +</pre> + +<h3 id="readystatechange_替代_DOMContentLoaded">readystatechange 替代 DOMContentLoaded</h3> + +<pre class="brush:js">// alternative to DOMContentLoaded event +document.onreadystatechange = function () { + if (document.readyState == "interactive") { + initApplication(); + } +}</pre> + +<h3 id="readystatechange_替代_load">readystatechange 替代 load</h3> + +<pre class="brush: js">// alternative to load event +document.onreadystatechange = function () { + if (document.readyState == "complete") { + initApplication(); + } +}</pre> + +<h2 id="規範">規範</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">規範</th> + <th scope="col">狀態</th> + <th scope="col">註</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "#current-document-readiness", "Document readiness")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{event("readystatechange")}} event</li> + <li>{{event("DOMContentLoaded")}} event</li> + <li>{{event("load")}} event</li> +</ul> diff --git a/files/zh-tw/web/api/document/registerelement/index.html b/files/zh-tw/web/api/document/registerelement/index.html new file mode 100644 index 0000000000..66c3330dca --- /dev/null +++ b/files/zh-tw/web/api/document/registerelement/index.html @@ -0,0 +1,113 @@ +--- +title: Document.registerElement() +slug: Web/API/Document/registerElement +tags: + - API + - DOM + - JavaScript + - 自訂標籤 +translation_of: Web/API/Document/registerElement +--- +<p>{{APIRef("DOM")}}{{Deprecated_header}}</p> + +<div class="warning"> +<p><strong>Warning: </strong>document.registerElement() 已經被棄用，建議使用 <a href="/en-US/docs/Web/API/CustomElementRegistry/define">customElements.define()</a>.</p> +</div> + +<p>{{draft}}</p> + +<p> <code><strong>document.registerElement()</strong></code> 可以在瀏覽器中註冊一個新的自訂標籤(元素)and returns a constructor for the new element.</p> + +<div class="note"> +<p><strong>Note:</strong> This is an experimental technology. The browser you use it in must support Web Components. See <a href="/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Enabling Web Components in Firefox</a>.</p> +</div> + +<h2 id="語法">語法</h2> + +<pre class="syntaxbox">var <em>constructor</em> = document.registerElement(<em>tag-name</em>, <em>options</em>);</pre> + +<h3 id="參數">參數</h3> + +<dl> + <dt><em>標籤名稱</em></dt> + <dd>自訂的標籤名稱需有一個 橫線 ( - ), 例如<code>my-tag</code>.</dd> + <dt><em>options {{optional_inline}}</em></dt> + <dd> + <p>An object with properties <strong>prototype</strong> to base the custom element on, and <strong>extends</strong>, an existing tag to extend. Both of these are optional.</p> + </dd> +</dl> + +<h2 id="例子">例子</h2> + +<p>這是一個非常簡單的例子:</p> + +<pre class="brush: js">var Mytag = document.registerElement('my-tag'); +</pre> + +<p>現在新的標籤已經在瀏覽器中註冊了. The <code>Mytag</code> variable holds a constructor that you can use to create a <code>my-tag</code> element in the document as follows:</p> + +<pre class="brush: js">document.body.appendChild(new Mytag());</pre> + +<p>This inserts an empty <code>my-tag</code> element that will be visible if you use the browser's developer tools. It will not be visible if you use the browser's view source capability. And it won't be visible in the browser unless you add some content to the tag. Here is one way to add content to the new tag:</p> + +<pre class="brush: js">var mytag = document.getElementsByTagName("my-tag")[0]; +mytag.textContent = "I am a my-tag element."; +</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>35</td> + <td>31<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatNo}}</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>4.4.4</td> + <td>31<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] This API is implemented behind a preference.</p> + +<h2 id="也看一下">也看一下</h2> + +<ul> + <li><a dir="ltr" href="/en-US/docs/Web/Web_Components/Custom_Elements">Custom Elements</a></li> +</ul> diff --git a/files/zh-tw/web/api/document/scroll_event/index.html b/files/zh-tw/web/api/document/scroll_event/index.html new file mode 100644 index 0000000000..26dbb7640c --- /dev/null +++ b/files/zh-tw/web/api/document/scroll_event/index.html @@ -0,0 +1,103 @@ +--- +title: scroll +slug: Web/API/Document/scroll_event +translation_of: Web/API/Document/scroll_event +--- +<p>當文件的可視區或元素被滾動(scroll)，<code>scroll</code>事件會被觸發</p> + +<h2 id="一般資訊">一般資訊</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">規範</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-scroll">DOM L3</a>, <a href="http://www.w3.org/TR/cssom-view/#scrolling-0">CSSOM View</a></dd> + <dt style="float: left; text-align: right; width: 120px;">介面</dt> + <dd style="margin: 0 0 0 120px;">UIEvent</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">Not on elements, but bubbles to the default view when fired on the document</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">defaultView, Document, Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">None</dd> +</dl> + +<h2 id="屬性">屬性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + </tbody> +</table> + +<h2 id="Example">Example</h2> + +<p>因為 <code>scroll</code> 事件是高頻觸發，這樣的事件處理程式不該進行運算成本高的程式，像是DOM的修改。所以，建議使用 <a href="/en-US/docs/DOM/window.requestAnimationFrame" title="/en-US/docs/DOM/window.requestAnimationFrame">requestAnimationFrame</a>, <a href="/en-US/docs/Web/API/WindowTimers/setTimeout">setTimeout</a> 或 <a href="/en-US/docs/Web/API/CustomEvent">customEvent</a> 如下所示</p> + +<h4 id="Scroll_optimization_with_window.requestAnimationFrame">Scroll optimization with window.requestAnimationFrame</h4> + +<pre class="brush: js">// Reference: http://www.html5rocks.com/en/tutorials/speed/animations/ + +var last_known_scroll_position = 0; +var ticking = false; + +function doSomething(scroll_pos) { + // do something with the scroll position +} + +window.addEventListener('scroll', function(e) { + last_known_scroll_position = window.scrollY; + if (!ticking) { + window.requestAnimationFrame(function() { + doSomething(last_known_scroll_position); + ticking = false; + }); + } + ticking = true; +});</pre> + +<p> </p> + +<p>關於<a href="/en-US/docs/Web/Events/resize#Example">resize</a>事件的更多類似例子。</p> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<h3 id="iOS_UIWebView">iOS UIWebView</h3> + +<p>在iOS UIWebViews中，滾動捲軸時 <code>scroll </code>事件不會觸發；它們要等到滾動完成時才被觸發。請參閱<a href="https://github.com/twbs/bootstrap/issues/16202">Bootstrap issue #16202</a>。 Safari 和 WKWebViews 不受此bug的影響。</p> diff --git a/files/zh-tw/web/api/document/width/index.html b/files/zh-tw/web/api/document/width/index.html new file mode 100644 index 0000000000..39eef5c184 --- /dev/null +++ b/files/zh-tw/web/api/document/width/index.html @@ -0,0 +1,45 @@ +--- +title: Document.width +slug: Web/API/Document/width +translation_of: Web/API/Document/width +--- +<div>{{APIRef("DOM")}} {{Obsolete_header}}</div> + +<div class="note"> +<p><strong>注意:</strong> 從 {{Gecko("6.0")}} 開始， <code>document.width 將不再被支援。取而代之的是 </code><code>document.body.clientWidth 。請參照： </code>{{domxref("element.clientWidth")}}.</p> +</div> + +<p>傳回目前文件中，{{HTMLElement("body")}} 元素的寬度有多少像素。</p> + +<p>Internet Explorer 不支援！</p> + +<h2 id="Syntax" name="Syntax">語法</h2> + +<pre class="syntaxbox"><em>pixels</em> = document.width; +</pre> + +<h2 id="Example" name="Example">範例</h2> + +<pre class="brush:js">function init() { + alert("文件的寬度是 " + document.width + " 像素。"); +} +</pre> + +<h2 id="Alternatives" name="Alternatives">其他替代</h2> + +<pre class="syntaxbox">document.body.clientWidth /* <body> 的寬度 */ +document.documentElement.clientWidth /* <html> 的寬度 */ +window.innerWidth /* 視窗的寬度 */ +</pre> + +<h2 id="Specification" name="Specification">規範於</h2> + +<p>HTML5</p> + +<h2 id="See_also" name="See_also">同時參考</h2> + +<ul> + <li>{{domxref("document.height")}}</li> + <li>{{domxref("Element.clientWidth")}}</li> + <li>{{domxref("Element.scrollWidth")}}</li> +</ul> |