initial commit

1 files changed, 180 insertions, 0 deletions

diff --git a/files/pl/web/api/element/queryselector/index.html b/files/pl/web/api/element/queryselector/index.html
new file mode 100644
index 0000000000..62c6fe2561
--- /dev/null
+++ b/files/pl/web/api/element/queryselector/index.html
@@ -0,0 +1,180 @@
+---
+title: Element.querySelector()
+slug: Web/API/Element/querySelector
+translation_of: Web/API/Element/querySelector
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>element</var> = <em>baseElement</em>.querySelector(<em>selector</em>s);
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>selectors</code></dt>
+ <dd>A group of <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">selectors</a> to match the descendant elements of the {{domxref("Element")}} <code>baseElement</code> against; this must be valid CSS syntax, or a <code>SyntaxError</code> exception will occur. The first element found which matches this group of selectors is returned.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>The first descendant element of <code>baseElement</code> which matches the specified group of <code>selectors</code>. The entire hierarchy of elements is considered when matching, including those outside the set of elements including <code>baseElement</code> and its descendants; in other words, <code>selectors</code> is first applied to the whole document, not the <code>baseElement</code>, to generate an initial list of potential elements. The resulting elements are then examined to see if they are descendants of <code>baseElement</code>. The first match of those remaining elements is returned by the <code>querySelector()</code> method.</p>
+
+<p>If no matches are found, the returned value is <code>null</code>.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>The specified <code>selectors</code> are invalid.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Let's consider a few examples.</p>
+
+<h3 id="Find_a_specific_element_with_specific_values_of_an_attribute">Find a specific element with specific values of an attribute</h3>
+
+<p>In this first example, the first {{HTMLElement("style")}} element which either has no type or has type "text/css" in the HTML document body is returned:</p>
+
+<pre class="brush:js">var el = document.body.querySelector("style[type='text/css'], style:not([type])");
+</pre>
+
+<h3 id="The_entire_hierarchy_counts">The entire hierarchy counts</h3>
+
+<p>The next example, below, demonstrates that the hierarchy of the entire document is considered when applying <code>selectors</code>, so that levels which are outside the specified <code>baseElement</code> are still considered when locating matches.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;h5&gt;Original content&lt;/h5&gt;
+  &lt;p&gt;
+    inside paragraph
+    &lt;span&gt;inside span&lt;/span&gt;
+    inside paragraph
+  &lt;/p&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;h5&gt;Output&lt;/h5&gt;
+  &lt;div id="output"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var baseElement = document.querySelector("p");
+document.getElementById("output").innerHTML =
+         (baseElement.querySelector("div span").innerHTML);</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>The result looks like this:</p>
+
+<p>{{ EmbedLiveSample('The_entire_hierarchy_counts', 600, 160) }}</p>
+
+<p>Notice how the <code>"div span"</code> selector still matches the {{HTMLElement("span")}} element, even though the <code>baseElement</code> excludes the {{domxref("div")}} element which is part of the specified selector.</p>
+
+<p>The :scope pseudo-class restores the expected behavior, only matching selectors on descendants of the baseElement.</p>
+
+<h3 id="More_examples">More examples</h3>
+
+<p>See {{domxref("Document.querySelector()")}} for additional examples of the proper format for the <code>selectors</code>.</p>
+
+<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('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="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>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>12</td>
+   <td>{{CompatGeckoDesktop(1.9.1)}}</td>
+   <td>9<sup>[1][2]</sup></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>Firefox OS (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>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>querySelector()</code> is supported in IE8, but only for CSS 2.1 selectors.<br>
+ [2] in IE8 and iE9 document must be in HTML5 mode (HTML5 doctype declaration present)</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("element.querySelectorAll()")}}</li>
+ <li>{{domxref("document.querySelector()")}}</li>
+ <li>{{domxref("document.querySelectorAll()")}}</li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector">Code snippets for querySelector</a></li>
+</ul>