initial commit

1 files changed, 140 insertions, 0 deletions

diff --git a/files/zh-tw/web/api/element/queryselectorall/index.html b/files/zh-tw/web/api/element/queryselectorall/index.html
new file mode 100644
index 0000000000..6f777763bf
--- /dev/null
+++ b/files/zh-tw/web/api/element/queryselectorall/index.html
@@ -0,0 +1,140 @@
+---
+title: Element.querySelectorAll()
+slug: Web/API/Element/querySelectorAll
+translation_of: Web/API/Element/querySelectorAll
+---
+<div>{{APIRef("DOM")}}</div>
+
+<h2 id="Summary" name="Summary">總覽</h2>
+
+<p>Returns a non-live <a href="/en-US/docs/DOM/NodeList" title="DOM/NodeList"><code>NodeList</code></a> of all elements descended from the element on which it is invoked that matches the specified group of CSS selectors. (The base element itself is not included, even if it matches.)</p>
+
+<h2 id="Syntax" name="Syntax">表達式</h2>
+
+<pre class="syntaxbox"><em>elementList</em> = baseElement.querySelectorAll(<em>selectors</em>);</pre>
+
+<dl>
+ <dt><code>elementList</code></dt>
+ <dd>is a non-live node list [<code> NodeList[elements]</code> <code>] </code>of <a href="/en-US/docs/DOM/element" title="DOM/Element">element</a> objects.</dd>
+ <dt><code>baseElement</code></dt>
+ <dd>is an <a href="/en-US/docs/DOM/element" title="DOM/element">element</a> object.</dd>
+ <dt><code>selectors</code></dt>
+ <dd>is a group of <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">selectors</a> to match on or elements of the DOM. </dd>
+</dl>
+
+<h2 id="Example" name="Example">範例</h2>
+
+<p>下例是從整個網頁的 body 中，取得所有 <code>p</code> 元素：</p>
+
+<pre class="brush: js">let matches = document.body.querySelectorAll('p');
+</pre>
+
+<p>This example returns a list of <code>p</code> children elements under a container, whose parent is a <code>div</code> that has the class 'highlighted':</p>
+
+<pre class="brush:js">let el = document.querySelector('#test');    //return an element with id='test'
+let matches = el.querySelectorAll('div.highlighted &gt; p'); // return a NodeList of p wrapped in a div with attribute class "highlighted"
+</pre>
+
+<p>下例是取得所有有 attribute <code>data-src</code> 的 <code>iframe</code> 元素：</p>
+
+<pre class="brush: js">let matches = el.querySelectorAll('iframe[data-src]');
+</pre>
+
+<h2 id="Notes" name="Notes">註</h2>
+
+<p>If the specified “selectors” are not found inside the DOM of the page, the method <code>queryselectorAll</code> returns an empty NodeList as specified below:</p>
+
+<pre class="brush: js">&gt; let x = document.body.querySelectorAll('.highlighted'); //case: if the class highlighted doesn't exist in any attribute "class" of the DOM the result is
+&gt; [] //empty NodeList</pre>
+
+<p><code>querySelectorAll()</code> was introduced in the WebApps API.</p>
+
+<p>The string argument pass to <code>querySelectorAll</code> must follow the CSS syntax. See {{domxref("document.querySelector")}} for a concrete example.</p>
+
+<p>We could access a single item inside the NodeList in the following way:</p>
+
+<pre class="brush: js">let x = document.body.querySelectorAll('.highlighted');
+x.length; //return the size of x
+x[i_item]; //where i_item has a value between 0 and x.length-1. The operator "[]" return as in an array the element at index "i_item"
+</pre>
+
+<p>We could iterate inside a NodeList with the construct <code>for(....) {...} </code>as in the following code:</p>
+
+<pre class="brush: js"> let x = document.body.querySelectorAll('.highlighted');
+ let index = 0;
+ for( index=0; index &lt; x.length; index++ ) {
+       console.log(x[index]);
+ }</pre>
+
+<p>So in the above way, it is possible to manage and modify the behaviour of the page.</p>
+
+<h2 id="Quirks">Quirks</h2>
+
+<p><code>querySelectorAll()</code> behaves differently than most common JavaScript DOM libraries, which might lead to unexpected results:</p>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+  &lt;div class="select"&gt;
+    &lt;div class="inner"&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: js">let select = document.querySelector('.select');
+let inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, not 0!
+</pre>
+
+<p>In this example, when selecting <code>.outer .inner</code> in the context of <code>.select</code>, .<code>inner</code> is still found, even though <code>.outer</code> is not a descendant of the baseElement (<code>.select</code>).<br>
+ <code>querySelectorAll() </code>only verifies that the last element in the selector is within the baseElement.</p>
+
+<p>The <code><a href="/en-US/docs/Web/CSS/:scope">:scope</a></code> pseudo-class restores the expected behavior, only matching selectors on descendants of the baseElement:</p>
+
+<pre class="brush: js">let select = document.querySelector('.select');
+let inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0
+</pre>
+
+<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('DOM4','#dom-parentnode-queryselectorallselectors','querySelectorAll')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll')}}</td>
+   <td>{{Spec2('Selectors API Level 2')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<div>{{Compat("api.Element.querySelectorAll")}}</div>
+
+<p>[1] Supported in Opera 15+ by enabling the "<strong>Enable &lt;style scoped&gt;</strong>" or "<strong>Enable experimental Web Platform features</strong>" flag in <code>chrome://flags</code>.</p>
+
+<h2 id="See_also" name="See_also">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/Document.querySelectorAll" title="DOM/document.querySelectorAll"><code>document.querySelectorAll</code></a></li>
+ <li><a href="/en-US/docs/DOM/Document.querySelector" title="DOM/document.querySelector"><code>document.querySelector</code></a></li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector">Code snippets for <code>querySelector</code></a></li>
+</ul>