initial commit

4 files changed, 364 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/documentfragment/documentfragment/index.html b/files/zh-cn/web/api/documentfragment/documentfragment/index.html
new file mode 100644
index 0000000000..9aef8b1e82
--- /dev/null
+++ b/files/zh-cn/web/api/documentfragment/documentfragment/index.html
@@ -0,0 +1,89 @@
+---
+title: DocumentFragment()
+slug: Web/API/DocumentFragment/DocumentFragment
+translation_of: Web/API/DocumentFragment/DocumentFragment
+---
+<p>{{ApiRef("DOM")}}{{seeCompatTable}}</p>
+
+<p><code><strong>DocumentFragment()</strong></code> 构造函数返回一个新创建的 {{domxref("DocumentFragment")}} 对象。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><em>fragment</em> = new DocumentFragment()</pre>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush: js  language-js"><code class="language-js">fragment <span class="operator token">=</span> new DocumentFragment<span class="function token"><span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Specification" name="Specification">标准</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">标准</th>
+   <th scope="col">状态</th>
+   <th scope="col">注释</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-documentfragment', 'DocumentFragment.DocumentFragment()')}}</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>功能</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>31.0</td>
+   <td>{{CompatGeckoDesktop("24.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</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>{{CompatGeckoMobile("24.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM 接口索引</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/documentfragment/index.html b/files/zh-cn/web/api/documentfragment/index.html
new file mode 100644
index 0000000000..1e220d6ea3
--- /dev/null
+++ b/files/zh-cn/web/api/documentfragment/index.html
@@ -0,0 +1,133 @@
+---
+title: DocumentFragment
+slug: Web/API/DocumentFragment
+tags:
+  - API
+  - DOM
+  - DocumentFragment
+  - 参考
+  - 接口
+translation_of: Web/API/DocumentFragment
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<p><strong><code>DocumentFragment</code>，文档片段</strong>接口，一个没有父对象的最小文档对象。它被作为一个轻量版的 {{domxref("Document")}} 使用，就像标准的document一样，存储由节点（nodes）组成的文档结构。与document相比，最大的区别是DocumentFragment 不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的{{Glossary("reflow", "重新渲染")}}，且不会导致性能等问题。</p>
+
+<p>最常用的方法是使用文档片段作为参数（例如，任何 {{domxref("Node")}} 接口类似 {{domxref("Node.appendChild")}} 和 {{domxref("Node.insertBefore")}} 的方法），这种情况下被添加（append）或被插入（inserted）的是片段的所有子节点, 而非片段本身。因为所有的节点会被一次插入到文档中，而这个操作仅发生一个重渲染的操作，而不是每个节点分别被插入到文档中，因为后者会发生多次重渲染的操作。</p>
+
+<p>该接口在 Web 组件（Web components）中也非常有用：{{HTMLElement("template")}} 元素在其 {{domxref("HTMLTemplateElement.content")}} 属性中包含了一个 <code>DocumentFragment</code>。</p>
+
+<p>可以使用{{domxref("document.createDocumentFragment")}} 方法或者构造函数来创建一个空的 <code>DocumentFragment</code>。</p>
+
+<h2 id="Specification" name="Specification">属性</h2>
+
+<p><em>该接口没有特殊的属性，其属性都继承自 {{domxref("Node")}} ，并补充了 {{domxref("ParentNode")}} 接口中的属性。</em></p>
+
+<dl>
+ <dt>{{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>返回一个实时（live） {{domxref("HTMLCollection")}} ，包含所有属于 <code>DocumentFragment</code> 的{{domxref("Element","元素")}}类型的子对象。</dd>
+ <dt>{{ domxref("ParentNode.firstElementChild") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>返回 <code>DocumentFragment</code> 的第一个 {{domxref("Element")}} 类型的子对象，如果没有则返回 <code>null</code> 。</dd>
+ <dt>{{ domxref("ParentNode.lastElementChild") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>返回 <code>DocumentFragment</code> 的最后一个 {{domxref("Element")}} 类型的子对象，如果没有则返回 <code>null</code> 。</dd>
+ <dt>{{ domxref("ParentNode.childElementCount") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>返回一个 <code>unsigned long</code> 给出 <code>DocumentFragment</code> 拥有的子项数量。</dd>
+</dl>
+
+<h2 id="构造函数">构造函数</h2>
+
+<dl>
+ <dt>{{ domxref("DocumentFragment.DocumentFragment()", "DocumentFragment()") }} {{experimental_inline}}</dt>
+ <dd>返回一个空的 <code>DocumentFragment</code> 对象。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>该接口继承 {{domxref("Node")}} 的全部方法，<em>并实现了 {{domxref("ParentNode")}} 接口中的方法。</em></em></p>
+
+<dl>
+ <dt>{{domxref("DocumentFragment.querySelector()")}}</dt>
+ <dd>返回在<code>DocumentFragment</code>中以文档顺序排列的第一个符合指定选择器的<code>Element</code>节点。</dd>
+ <dt>{{domxref("DocumentFragment.querySelectorAll()")}}</dt>
+ <dd>返回在<code>DocumentFragment</code>中所有的符合指定选择器的<code>Element</code>节点组成的<code>NodeList</code>数组。</dd>
+ <dt>{{domxref("DocumentFragment.getElementById()")}}</dt>
+ <dd>返回在<code>DocumentFragment</code>中以文档顺序排列的第一个符合指定ID选择器的<code>Element</code>节点。与<code>Document.getElementById()</code>作用相同。</dd>
+</dl>
+
+<h2 id="例子">例子</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;ul id="list"&gt;&lt;/ul&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">const list = document.querySelector('#list');
+const fruits = ['Apple', 'Orange', 'Banana', 'Melon'];
+
+const fragment = document.createDocumentFragment();
+
+fruits.forEach(fruit =&gt; {
+  const li = document.createElement('li');
+  li.innerHTML = fruit;
+  fragment.appendChild(li);
+});
+
+list.appendChild(fragment);
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Example')}}</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>
+ </tbody>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-documentfragment', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>添加了构建函数和对 {{domxref("ParentNode")}} 的实现。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1', '#the-apis', 'DocumentFragment')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td>添加 <code>querySelector()</code> 和 <code>querySelectorAll()</code> 方法。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>和 {{SpecName('DOM2 Core')}} 一样</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>和 {{SpecName('DOM1')}} 一样</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>最初的定义。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.DocumentFragment")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model">The DOM interfaces index.</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/documentfragment/queryselector/index.html b/files/zh-cn/web/api/documentfragment/queryselector/index.html
new file mode 100644
index 0000000000..33d38501d6
--- /dev/null
+++ b/files/zh-cn/web/api/documentfragment/queryselector/index.html
@@ -0,0 +1,81 @@
+---
+title: DocumentFragment.querySelector()
+slug: Web/API/DocumentFragment/querySelector
+translation_of: Web/API/DocumentFragment/querySelector
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p><strong><code>DocumentFragment.querySelector()</code></strong> 方法返回第一个在 {{domxref("DocumentFragment")}} 中的、符合选择器的元素。其使用深度优先，前序遍历规则遍历文档中的节点。如果没有匹配结果，返回 <code>null</code> 。</p>
+
+<p>如果选择器中指定了 ID 而这个 ID 在当前文档（document）被错误地使用了多次，则返回第一个匹配的元素。</p>
+
+<p>如果选择器无效，将抛出一个带有 <code>SYNTAX_ERR</code> 值的 {{domxref("DOMException")}} 异常。</p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="syntaxbox"><em>element</em> = <em>documentfragment</em>.querySelector(<em>selectors</em>);</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><em>selectors </em></dt>
+ <dd>为一个 {{domxref("DOMString")}} ，其包含一个或多个CSS选择器，多个选择器用逗号隔开。</dd>
+</dl>
+
+<h2 id="Example" name="Example">例子</h2>
+
+<h3 id="基本示例">基本示例</h3>
+
+<p>在该示例中，将返回第一个位于 {{domxref("DocumentFragment")}} 的带有 "<code>myclass</code>" 类的元素。</p>
+
+<pre class="brush: js">var el = documentfragment.querySelector(".myclass");
+</pre>
+
+<h3 id="CSS_语法和方法的参数问题">CSS 语法和方法的参数问题</h3>
+
+<p>传递给 <code>querySelector</code> 的字符串参数遵循 CSS 语法。如果 ID 或选择器不符合 CSS 语法(比如使用了半角分号和空格)，必须使用双反斜杠对字符做转义。</p>
+
+<pre class="brush: html">&lt;div id="foo\bar"&gt;&lt;/div&gt;
+&lt;div id="foo:bar"&gt;&lt;/div&gt;
+
+&lt;script&gt;
+document.querySelector('#foo\bar')    // 啥也不匹配
+document.querySelector('#foo\\\\bar') // 第一个DIV
+document.querySelector('#foo:bar')     // 啥也不匹配
+document.querySelector('#foo\\:bar')   // 第二个DIV
+&lt;/script&gt;
+</pre>
+
+<h2 id="Specification" name="Specification">标准</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">标准</th>
+   <th scope="col">状态</th>
+   <th scope="col">注释</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 2', '#queryselector', 'DocumentFragment.querySelector')}}</td>
+   <td>{{Spec2('Selectors API Level 2')}}</td>
+   <td>无修改，与 {{SpecName('Selectors API Level 1')}} 相同</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1', '#queryselector', 'DocumentFragment.querySelector')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td>最初的定义。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.DocumentFragment.querySelector")}}</p>
+
+<h2 id="See_also" name="See_also">参考</h2>
+
+<ul>
+ <li>{{domxref("DocumentFragment")}} 接口</li>
+</ul>
diff --git a/files/zh-cn/web/api/documentfragment/queryselectorall/index.html b/files/zh-cn/web/api/documentfragment/queryselectorall/index.html
new file mode 100644
index 0000000000..d90c170022
--- /dev/null
+++ b/files/zh-cn/web/api/documentfragment/queryselectorall/index.html
@@ -0,0 +1,61 @@
+---
+title: DocumentFragment.querySelectorAll()
+slug: Web/API/DocumentFragment/querySelectorAll
+translation_of: Web/API/DocumentFragment/querySelectorAll
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>DocumentFragment.queryselectorall()方法返回{{domxref("NodeList")}}中的元素{{domxref("DocumentFragment")}}(使用文档节点的深度优先顺序遍历)匹配指定的选择器组。</p>
+
+<p>如果参数中指定的选择器无效，则会引发一个带SYNTAX_ERR值的{{domxref("DOMException")}}。</p>
+
+<div class="note">
+<p><strong>注意:这个API的定义被移动到{{domxref("ParentNode")}}接口。</strong></p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><em>elementList</em> = <em>documentframgment</em>.querySelectorAll(<em>selectors</em>);</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><em>selectors</em></dt>
+ <dd>是一个{{domxref("DOMString")}}包含一个或多个用逗号分隔的CSS选择器。</dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<p>此示例返回DocumentFragment中所有div元素的列表，其中包含一个类“note”或“alert”:</p>
+
+<pre class="brush: js">var matches = documentfrag.querySelectorAll("div.note, div.alert");
+</pre>
+
+<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('Selectors API Level 1', '#queryselector', 'DocumentFragment.querySelectorAll')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div class="hidden">此页中的兼容性表由结构化数据生成。如果您想对数据做出贡献，请查看https://github.com/mdn/browser-compat-data，并向我们发送一个pull request。</div>
+
+<p>{{Compat("api.DocumentFragment.querySelectorAll")}}</p>
+
+<h2 id="参阅">参阅</h2>
+
+<ul>
+ <li>它所属的{{domxref("DocumentFragment")}}接口。</li>
+</ul>