initial commit

10 files changed, 1231 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/parentnode/append/index.html b/files/zh-cn/web/api/parentnode/append/index.html
new file mode 100644
index 0000000000..247291f59e
--- /dev/null
+++ b/files/zh-cn/web/api/parentnode/append/index.html
@@ -0,0 +1,146 @@
+---
+title: ParentNode.append()
+slug: Web/API/ParentNode/append
+tags:
+  - API
+  - DOM
+  - Node
+  - ParentNode
+  - Reference
+translation_of: Web/API/ParentNode/append
+---
+<div>{{APIRef("DOM")}}</div>
+
+<div> <strong><code>ParentNode.append</code></strong> 方法在 <code>ParentNode</code>的最后一个子节点之后插入一组 {{domxref("Node")}} 对象或 {{domxref("DOMString")}} 对象。</div>
+
+<div>被插入的 {{domxref("DOMString")}} 对象等价为 {{domxref("Text")}} 节点。</div>
+
+<div></div>
+
+<div>与 {{domxref("Node.appendChild()")}} 的差异：</div>
+
+<div></div>
+
+<ul>
+ <li><code>ParentNode.append()</code>允许追加  {{domxref("DOMString")}} 对象，而<code><font face="Open Sans, Arial, sans-serif"> </font>Node.appendChild()</code> 只接受 {{domxref("Node")}} 对象。</li>
+ <li><code>ParentNode.append()</code> <a href="https://repl.it/FgPh/1">没有返回值</a>，而 <code>Node.appendChild()</code> 返回追加的 {{domxref("Node")}} 对象。</li>
+ <li><code>ParentNode.append()</code> 可以追加多个节点和字符串，而 <code>Node.appendChild()</code> 只能追加一个节点。</li>
+</ul>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">[Throws, Unscopable]
+void ParentNode.append((Node or DOMString)... nodes);
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>nodes</code></dt>
+ <dd>一组要插入的 {{domxref("Node")}} 或 {{domxref("DOMString")}} 对象。</dd>
+</dl>
+
+<h3 id="异常">异常</h3>
+
+<ul>
+ <li>{{domxref("HierarchyRequestError")}}: 在层次结构中的指定点不能插入节点。</li>
+</ul>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="插入一个元素节点">插入一个元素节点</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append(p);
+
+console.log(parent.childNodes); // NodeList [ &lt;p&gt; ]
+</pre>
+
+<h3 id="插入文本">插入文本</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+parent.append("Some text");
+
+console.log(parent.textContent); // "Some text"</pre>
+
+<h3 id="插入一个节点，同时插入一些文本">插入一个节点，同时插入一些文本</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append("Some text", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Some text", &lt;p&gt; ]</pre>
+
+<h3 id="ParentNode.append_方法在_with_语句中不生效"><code>ParentNode.append()</code> 方法在 with 语句中不生效</h3>
+
+<p>为了保证向后兼容，append 方法在 with 语句中会被特殊处理，详情请看 {{jsxref("Symbol.unscopables")}}。</p>
+
+<pre class="brush: js">var parent = document.createElement("div");
+
+with(parent) {
+  append("foo");
+}
+// ReferenceError: append is not defined </pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>下面的 Polyfill 只支持到 IE 9  及以上：</p>
+
+<pre class="brush: js">// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('append')) {
+      return;
+    }
+    Object.defineProperty(item, 'append', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function append() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.appendChild(docFrag);
+      }
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</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('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容">浏览器兼容</h2>
+
+
+
+<p>{{Compat("api.ParentNode.append")}}</p>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li>{{domxref("ParentNode")}} and {{domxref("ChildNode")}}</li>
+ <li>{{domxref("ParentNode.prepend()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("ChildNode.after()")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/parentnode/childelementcount/index.html b/files/zh-cn/web/api/parentnode/childelementcount/index.html
new file mode 100644
index 0000000000..0169eb3ed5
--- /dev/null
+++ b/files/zh-cn/web/api/parentnode/childelementcount/index.html
@@ -0,0 +1,152 @@
+---
+title: ParentNode.childElementCount
+slug: Web/API/ParentNode/childElementCount
+translation_of: Web/API/ParentNode/childElementCount
+---
+<p>{{ APIRef("DOM") }} </p>
+
+<p> <code><strong>ParentNode.childElementCount </strong></code>只读属性返回一个<em><strong>无符号长整型数字</strong></em>，表示给定元素的子元素数。</p>
+
+<div class="note">
+<p>This property was initially defined in the {{domxref("ElementTraversal")}} pure interface. As this interface contained two distinct set of properties, one aimed at {{domxref("Node")}} that have children, one at those that are children, they have been moved into two separate pure interfaces, {{domxref("ParentNode")}} and {{domxref("ChildNode")}}. In this case, <code>childElementCount</code> moved to {{domxref("ParentNode")}}. This is a fairly technical change that shouldn't affect compatibility.</p>
+</div>
+
+<p> </p>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">语法</h2>
+
+<pre>var <var>count</var> = <em>node</em>.childElementCount;</pre>
+
+<pre class="eval">var <em>elCount</em> = elementNodeReference.childElementCount;
+</pre>
+
+<dl>
+ <dt>count</dt>
+ <dd>holds the return value an <code>unsigned long </code>(simply an integer) type.</dd>
+ <dt>node</dt>
+ <dd>is an object representing a <code>Document</code>, <code>DocumentFragment</code> or <code>Element</code>.</dd>
+</dl>
+
+<h2 id="例子">例子</h2>
+
+<pre><code>var foo = document.getElementById("foo");
+if (foo.childElementCount &gt; 0) {
+    // do something
+}</code></pre>
+
+<p>下例演示了一个元素节点的<code>childElementCount</code>属性以及<code>children</code>属性的用法.</p>
+
+<pre class="eval">&lt;head&gt;
+    &lt;script type="text/javascript"&gt;
+        function GetChildCount () {
+            var container = document.getElementById ("container");
+
+            var childCount = 0;
+            //如果支持childElementCount属性
+            if ('childElementCount' in container) {
+                childCount = container.childElementCount;
+            }
+            else {
+            //如果支持children属性,IE6/7/8
+            //译者注:没有判断nodeType是否为1,可能包含注释节点.
+                if (container.children) {
+                    childCount = container.children.length;
+                }
+                else {  //,如果都不支持,Firefox 3.5之前版本
+                    var child = container.firstChild;
+                    while (child) {
+                        if (child.nodeType == 1 /*Node.ELEMENT_NODE*/) {
+                            childCount++;
+                        }
+                        child = child.nextSibling;
+                    }
+                }
+            }
+
+            alert ("The number of child elements is " + childCount);
+        }
+    &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;div id="container" style="width:300px; background-color:#a0d0e0;"&gt;
+        Some text inside the container.
+        &lt;input type="text" size="40" value="a child element of the container" /&gt;
+        &lt;div&gt;
+            &lt;div&gt;a descendant element of the container&lt;/div&gt;
+            &lt;div&gt;another descendant element of the container&lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;br /&gt;&lt;br /&gt;
+    &lt;button onclick="GetChildCount ();"&gt;Get the number of container's child elements&lt;/button&gt;
+&lt;/body&gt;
+</pre>
+
+<div>执行上面的例子:<a class="external" href="http://help.dottoro.com/external/examples/ljsfamht/childElementCount_1.htm" title="http://help.dottoro.com/external/examples/ljsfamht/childElementCount_1.htm">http://help.dottoro.com/external/examples/ljsfamht/childElementCount_1.htm</a></div>
+
+<p> </p>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatGeckoDesktop("3") }}</td>
+   <td>{{ CompatVersionUnknown() }}</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>?</td>
+   <td>?</td>
+   <td>?</td>
+   <td>?</td>
+   <td>?</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">规范</h2>
+
+<p><a href="http://www.w3.org/TR/2008/WD-ElementTraversal-20080303/#attribute-childElementCount" rel="nofollow">childElementCount (W3C)</a></p>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li><a class="internal" href="/zh-cn/DOM/Element.children" title="zh-cn/DOM/Element.children"><code>children</code></a></li>
+ <li><a class="internal" href="/zh-cn/DOM/Element.firstElementChild" title="zh-cn/DOM/Element.firstElementChild"><code>firstElementChild</code></a></li>
+ <li><a class="internal" href="/zh-cn/DOM/Element.lastElementChild" title="zh-cn/DOM/Element.lastElementChild"><code>lastElementChild</code></a></li>
+ <li><a class="internal" href="/zh-cn/DOM/Element.nextElementSibling" title="zh-cn/DOM/Element.nextElementSibling"><code>nextElementSibling</code></a></li>
+ <li><a class="internal" href="/zh-cn/DOM/element.previousElementSibling" title="zh-cn/DOM/Element.previousElementSibling"><code>previousElementSibling</code></a></li>
+</ul>
+
+<p> </p>
diff --git a/files/zh-cn/web/api/parentnode/children/index.html b/files/zh-cn/web/api/parentnode/children/index.html
new file mode 100644
index 0000000000..35419a52b6
--- /dev/null
+++ b/files/zh-cn/web/api/parentnode/children/index.html
@@ -0,0 +1,117 @@
+---
+title: ParentNode.children
+slug: Web/API/ParentNode/children
+tags:
+  - Property
+translation_of: Web/API/ParentNode/children
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code><strong>ParentNode.children </strong></code>是一个只读属性，返回 一个Node的子{{domxref("Element","elements")}} ，是一个动态更新的 {{domxref("HTMLCollection")}}。</p>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">语法</h2>
+
+<pre>var <em>children</em> = <em>node</em>.children;</pre>
+
+<pre class="eval">var <em>elList</em> = elementNodeReference.children;
+</pre>
+
+<h2 id="Notes" name="Notes">备注</h2>
+
+<p><code>children</code> 属性为只读属性，对象类型为 {{ domxref("HTMLCollection") }}，你可以使用 <code>elementNodeReference.children[1].nodeName</code> 来获取某个子元素的标签名称。</p>
+
+<h2 id="Example" name="Example">例子</h2>
+
+<pre class="brush: js">// parg是一个指向&lt;p&gt;元素的对象引用
+if (parg.childElementCount)
+// 检查这个&lt;p&gt;元素是否有子元素
+// 译者注:childElementCount有兼容性问题
+ {
+   var children = parg.children;
+   for (var i = 0; i &lt; children.length; i++)
+   {
+   // 通过children[i]来获取每个子元素
+   // 注意:List是一个live的HTMLCollection对象,在这里添加或删除parg的子元素节点,都会立即改变List的值.
+   };
+ };
+</pre>
+
+<h2 id="规范" style="margin-bottom: 20px; line-height: 30px;">规范</h2>
+
+<p> </p>
+
+<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-parentnode-children', 'ParentNode.children')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</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>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>3.5</td>
+   <td>9 (IE6-8 incl commend nodes)</td>
+   <td>10</td>
+   <td>4</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>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}<span style="font-size: 14px; line-height: 1.5;">​</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p style="margin-bottom: 20px; line-height: 30px;">[1] Internet Explorer 6 - 8 支持该属性，但是可能会错误地包含注释 {{domxref("Comment")}} 节点。</p>
+
+<h2 id="相关链接" style="margin-bottom: 20px; line-height: 30px;">相关链接</h2>
+
+<ul>
+ <li>The {{domxref("ParentNode")}} and {{domxref("ChildNode")}} pure interfaces.</li>
+ <li>
+  <div class="syntaxbox">Object types implementing this pure interface: {{domxref("Document")}}, {{domxref("Element")}}, and {{domxref("DocumentFragment")}}.</div>
+ </li>
+</ul>
diff --git a/files/zh-cn/web/api/parentnode/firstelementchild/index.html b/files/zh-cn/web/api/parentnode/firstelementchild/index.html
new file mode 100644
index 0000000000..1ff4b6f06f
--- /dev/null
+++ b/files/zh-cn/web/api/parentnode/firstelementchild/index.html
@@ -0,0 +1,95 @@
+---
+title: Element.firstElementChild
+slug: Web/API/ParentNode/firstElementChild
+translation_of: Web/API/ParentNode/firstElementChild
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><strong><code>ParentNode.firstElementChild</code></strong> 只读属性，返回对象的第一个子 {{domxref("元素")}}, 如果没有子元素，则为null。</p>
+
+<div class="note">
+<p><span>他的属性最初是在{{domxref("element遍历")}}纯接口中定义的。由于这个接口包含两组不同的属性，一个针对具有子元素的{{domxref("Node")}}，一个针对子元素的属性，因此它们被移动到两个单独的纯接口中，{{domxref("ParentNode")}}和{{domxref("ChildNode")}}。在本例中，firstElementChild移动到{{domxref("ParentNode")}}。这是一个相当技术性的更改，不应该影响兼容性。</span></p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var <em>element</em> = node.firstElementChild;
+</pre>
+
+<h2 id="例子">例子</h2>
+
+<pre class="brush: html">&lt;ul id="foo"&gt;
+  &lt;li&gt;First  (1)&lt;/li&gt;
+  &lt;li&gt;Second (2)&lt;/li&gt;
+  &lt;li&gt;Third  (3)&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;script&gt;
+var foo = document.getElementById('foo');
+// yields: First  (1)
+console.log(foo.firstElementChild.textContent);
+&lt;/script&gt;
+</pre>
+
+<h2 id="适用于_IE8、IE9_和_Safari_的_Polyfill">适用于 IE8、IE9 和 Safari 的 Polyfill</h2>
+
+<pre><code>// Overwrites native 'firstElementChild' prototype.
+// Adds Document &amp; DocumentFragment support for IE9 &amp; Safari.
+// Returns array instead of HTMLCollection.
+;(function(constructor) {
+    if (constructor &amp;&amp;
+        constructor.prototype &amp;&amp;
+        constructor.prototype.firstElementChild == null) {
+        Object.defineProperty(constructor.prototype, 'firstElementChild', {
+            get: function() {
+                var node, nodes = this.childNodes, i = 0;
+                while (node = nodes[i++]) {
+                    if (node.nodeType === 1) {
+                        return node;
+                    }
+                }
+                return null;
+            }
+        });
+    }
+})(window.Node || window.Element);</code></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('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Splitted the <code>ElementTraversal</code>interface in {{domxref("ChildNode")}} and <code>ParentNode</code>. This method is now defined on the latter.<br>
+    The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#attribute-firstElementChild', 'ElementTraversal.firstElementChild')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Added its initial definition to the<code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.ParentNode.firstElementChild")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<h2 id="Ed"><a class="button section-edit only-icon" href="https://developer.mozilla.org/zh-CN/docs/Web/API/ParentNode/lastElementChild$edit#参见" rel="nofollow, noindex"><span>Ed</span></a></h2>
+
+<ul>
+ <li>纯接口 {{domxref("ParentNode")}} 和 {{domxref("ChildNode")}}。</li>
+ <li>
+  <div class="syntaxbox">实现了此纯接口的对象类型：{{domxref("Document")}}、{{domxref("Element")}}，和 {{domxref("DocumentFragment")}}。</div>
+ </li>
+</ul>
diff --git a/files/zh-cn/web/api/parentnode/index.html b/files/zh-cn/web/api/parentnode/index.html
new file mode 100644
index 0000000000..8248512594
--- /dev/null
+++ b/files/zh-cn/web/api/parentnode/index.html
@@ -0,0 +1,81 @@
+---
+title: ParentNode
+slug: Web/API/ParentNode
+tags:
+  - API
+  - DOM
+  - Mixin
+  - Node
+  - 参考
+  - 接口
+  - 节点
+translation_of: Web/API/ParentNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>ParentNode</strong></code> 混合了所有(拥有子元素的) {{domxref("Node")}} 对象包含的共有方法和属性。</p>
+
+<p><code>ParentNode</code> 是一个原始接口，不能够创建这种类型的对象；它在 {{domxref("Element")}}、{{domxref("Document")}} 和 {{domxref("DocumentFragment")}} 对象上被实现。</p>
+
+<h2 id="属性">属性</h2>
+
+<dl>
+ <dt>{{domxref("ParentNode.childElementCount")}} {{readonlyInline}}</dt>
+ <dd>返回一个当前 <code>ParentNode</code> 所含有的后代数量。</dd>
+ <dt>{{domxref("ParentNode.children")}} {{readonlyInline}}</dt>
+ <dd>返回一个包含 <code>ParentNode</code> 所有后代 {{domxref("Element")}} 对象的动态 {{domxref("HTMLCollection")}} 对象，忽略所有非元素子节点。</dd>
+ <dt>{{domxref("ParentNode.firstElementChild")}} {{readonlyInline}}</dt>
+ <dd>返回父节点的第一个 {{domxref("Element")}} 后代，没有时返回 <code>null</code>。</dd>
+ <dt>{{domxref("ParentNode.lastElementChild")}} {{readonlyInline}}</dt>
+ <dd>返回父节点的最后一个 {{domxref("Element")}} 后代，没有时返回 <code>null</code>。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{domxref("ParentNode.append()")}} {{experimental_inline}}</dt>
+ <dd>在父节点 <code>ParentNode</code> 的最后一个后代后面插入一组 {{domxref("Node")}} 对象或 {{domxref("DOMString")}} 对象。{{domxref("DOMString")}} 对象会以同等的 {{domxref("Text")}} 节点插入。</dd>
+ <dt>{{domxref("ParentNode.prepend()")}} {{experimental_inline}}</dt>
+ <dd>在父节点 <code>ParentNode</code> 第一个后代前插入一组 {{domxref("Node")}} 对象或者 {{domxref("DOMString")}} 对象。{{domxref("DOMString")}} 对象会以同等的 {{domxref("Text")}} 节点插入。</dd>
+ <dt>{{domxref("ParentNode.querySelector()")}}</dt>
+ <dd>返回以当前元素为根元素，匹配给定选择器的第一个元素 {{domxref("Element")}}。</dd>
+ <dt>{{domxref("ParentNode.querySelectorAll()")}}</dt>
+ <dd>返回一个 {{domxref("NodeList")}}，表示以当前元素为根元素的匹配给定选择器组的元素列表。</dd>
+</dl>
+
+<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('DOM WHATWG', '#parentnode', 'ParentNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Split the <code>ElementTraversal</code> interface into {{domxref("ChildNode")}} and {{domxref("ParentNode")}}. The {{domxref("ParentNode.firstElementChild")}}, {{domxref("ParentNode.lastElementChild")}}, and {{domxref("ParentNode.childElementCount")}} properties are now defined on the latter. Added the {{domxref("ParentNode.children")}} property, and the {{domxref("ParentNode.querySelector()")}}, {{domxref("ParentNode.querySelectorAll()")}}, {{domxref("ParentNode.append()")}}, and {{domxref("ParentNode.prepend()")}} methods.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and used it on {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.ParentNode")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li>{{domxref("ChildNode")}} 纯接口。</li>
+ <li>
+  <div class="syntaxbox">实现此 mixin 的对象类型：{{domxref("Document")}}、{{domxref("Element")}}，和 {{domxref("DocumentFragment")}}。</div>
+ </li>
+</ul>
diff --git a/files/zh-cn/web/api/parentnode/lastelementchild/index.html b/files/zh-cn/web/api/parentnode/lastelementchild/index.html
new file mode 100644
index 0000000000..57481ff762
--- /dev/null
+++ b/files/zh-cn/web/api/parentnode/lastelementchild/index.html
@@ -0,0 +1,93 @@
+---
+title: Element.lastElementChild
+slug: Web/API/ParentNode/lastElementChild
+translation_of: Web/API/ParentNode/lastElementChild
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>只读属性 <code><strong>ParentNode.lastElementChild</strong></code> 返回对象的最后一个子{{domxref("Element", "元素")}}，如果没有子元素，则返回 <code>null</code>。</p>
+
+<div class="note">
+<p>This property was initially defined in the {{domxref("ElementTraversal")}} pure interface. As this interface contained two distinct set of properties, one aimed at {{domxref("Node")}} that have children, one at those that are children, they have been moved into two separate pure interfaces, {{domxref("ParentNode")}} and {{domxref("ChildNode")}}. In this case, <code>lastElementChild</code> moved to {{domxref("ParentNode")}}. This is a fairly technical change that shouldn't affect compatibility.</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var <em>element</em> = node.lastElementChild; </pre>
+
+<h2 id="例子">例子</h2>
+
+<pre class="brush: html">&lt;ul id="foo"&gt;
+  &lt;li&gt;First  (1)&lt;/li&gt;
+  &lt;li&gt;Second (2)&lt;/li&gt;
+  &lt;li&gt;Third  (3)&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;script&gt;
+var foo = document.getElementById('foo');
+// yields: Third  (3)
+console.log(foo.lastElementChild.textContent);
+&lt;/script&gt;
+</pre>
+
+<h2 id="适用于_IE8、IE9_和_Safari_的_Polyfill">适用于 IE8、IE9 和 Safari 的 Polyfill</h2>
+
+<pre class="brush: js">// Overwrites native 'lastElementChild' prototype.
+// Adds Document &amp; DocumentFragment support for IE9 &amp; Safari.
+// Returns array instead of HTMLCollection.
+;(function(constructor) {
+    if (constructor &amp;&amp;
+        constructor.prototype &amp;&amp;
+        constructor.prototype.lastElementChild == null) {
+        Object.defineProperty(constructor.prototype, 'lastElementChild', {
+            get: function() {
+                var node, nodes = this.childNodes, i = nodes.length - 1;
+                while (node = nodes[i--]) {
+                    if (node.nodeType === 1) {
+                        return node;
+                    }
+                }
+                return null;
+            }
+        });
+    }
+})(window.Node || window.Element);
+</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('DOM WHATWG', '#dom-parentnode-lastelementchild', 'ParentNode.lastElementChild')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Splitted the <code>ElementTraversal</code> interface in {{domxref("ChildNode")}} and <code>ParentNode</code>. This method is now defined on the latter.<br>
+    The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#attribute-lastElementChild', 'ElementTraversal.lastElementChild')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Added its initial definition to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.ParentNode.lastElementChild")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li>纯接口 {{domxref("ParentNode")}} 和 {{domxref("ChildNode")}}。</li>
+ <li>
+  <div class="syntaxbox">实现了此纯接口的对象类型：{{domxref("Document")}}、{{domxref("Element")}}，和 {{domxref("DocumentFragment")}}。</div>
+ </li>
+</ul>
diff --git a/files/zh-cn/web/api/parentnode/prepend/index.html b/files/zh-cn/web/api/parentnode/prepend/index.html
new file mode 100644
index 0000000000..f5e1a9fb55
--- /dev/null
+++ b/files/zh-cn/web/api/parentnode/prepend/index.html
@@ -0,0 +1,134 @@
+---
+title: ParentNode.prepend()
+slug: Web/API/ParentNode/prepend
+tags:
+  - API
+  - DOM
+  - Method
+  - Node
+  - ParentNode
+  - Reference
+  - prepend
+  - 方法
+translation_of: Web/API/ParentNode/prepend
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>ParentNode.prepend</code></strong> 方法可以在父节点的第一个子节点之前插入一系列{{domxref("Node")}}对象或者{{domxref("DOMString")}}对象。{{domxref("DOMString")}}会被当作{{domxref("Text")}}节点对待（也就是说插入的不是HTML代码）。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">ParentNode.prepend((Node or DOMString)... nodes);
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>nodes</code></dt>
+ <dd>要插入的一系列{{domxref("Node")}}或者{{domxref("DOMString")}}。</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p><code>undefined</code>.</p>
+
+<h3 id="错误">错误</h3>
+
+<ul>
+ <li>{{domxref("HierarchyRequestError")}}：节点不能插入当前层级内。</li>
+</ul>
+
+<h2 id="例子">例子</h2>
+
+<h3 id="Prepending_an_element">Prepending an element</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var p = document.createElement("p");
+var span = document.createElement("span");
+parent.append(p);
+parent.prepend(span);
+
+console.log(parent.childNodes); // NodeList [ &lt;span&gt;, &lt;p&gt; ]
+</pre>
+
+<h3 id="Prepending_text">Prepending text</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+parent.append("Some text");
+parent.prepend("Headline: ");
+
+console.log(parent.textContent); // "Headline: Some text"</pre>
+
+<h3 id="Appending_an_element_and_text">Appending an element and text</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.prepend("Some text", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Some text", &lt;p&gt; ]</pre>
+
+<h3 id="ParentNode.prepend_is_unscopable"><code>ParentNode.prepend()</code> is unscopable</h3>
+
+<p><code>prepend()不能在with语句内使用，详情参考</code>{{jsxref("Symbol.unscopables")}}。</p>
+
+<pre class="brush: js">var parent = document.createElement("div");
+
+with(parent) {
+  prepend("foo");
+}
+// ReferenceError: prepend is not defined </pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>使用下面的代码在IE9或更高版本中模拟<code>prepend()</code>方法：</p>
+
+<pre class="brush: js">// from: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md
+(function (arr) {
+    arr.forEach(function (item) {
+        item.prepend = item.prepend || function () {
+            var argArr = Array.prototype.slice.call(arguments),
+                docFrag = document.createDocumentFragment();
+
+            argArr.forEach(function (argItem) {
+                var isNode = argItem instanceof Node;
+                docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+            });
+
+            this.insertBefore(docFrag, this.firstChild);
+        };
+    });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</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('DOM WHATWG', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="兼容性">兼容性</h2>
+
+
+
+<p>{{Compat("api.ParentNode.prepend")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("ParentNode")}} and {{domxref("ChildNode")}}</li>
+ <li>{{domxref("ParentNode.append()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+ <li>{{domxref("ChildNode.before()")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/parentnode/queryselector/index.html b/files/zh-cn/web/api/parentnode/queryselector/index.html
new file mode 100644
index 0000000000..e5e994c845
--- /dev/null
+++ b/files/zh-cn/web/api/parentnode/queryselector/index.html
@@ -0,0 +1,95 @@
+---
+title: ParentNode.querySelector()
+slug: Web/API/ParentNode/querySelector
+translation_of: Web/API/ParentNode/querySelector
+---
+<p>{{APIRef("DOM")}}{{Draft}}</p>
+
+<p>{{DOMxRef("ParentNode")}} mixin 将 <code><strong>querySelector()</strong></code> 方法定义为返回一个 {{DOMxRef("Element")}} 表示与指定的选择器组匹配的第一个元素，这些选择器是调用该方法的对象的后代。</p>
+
+<p>如果您需要与选择器列表匹配的所有元素，使用 {{DOMxRef("ParentNode.querySelectorAll", "querySelectorAll()")}} 。</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> 该方法的实现为 {{DOMxRef("Document.querySelector()")}}, {{DOMxRef("DocumentFragment.querySelector()")}} 和 {{DOMxRef("Element.querySelector()")}}.</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><var>element</var> = <em>parentNode</em>.querySelector(<var>selectors</var>);
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>selectors</code></dt>
+ <dd>{{DOMxRef("DOMString")}} 包含一个或多个要匹配的选择器。该字符串必须是浏览器支持的<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors">compound selector list</a> ；如果不是， 会抛出 <code>SyntaxError</code> 异常. 查阅 <a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a> 获取有关选择器使用的更多信息. 可以通过使用逗号分隔多个选择器来指定它们。</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> 必须使用反斜杠字符转义不属于CSS语法的字符。由于JavaScript也使用退格转义，因此在使用这些字符编写字符串文字是必须特别小心。查阅 {{anch("Escaping special characters")}} 获取更多信息。</p>
+</div>
+
+<h3 id="返回值">返回值</h3>
+
+<p>第一个 {{DOMxRef("Element")}} 匹配至少一个指定的选择器，如果没有找到这样的元素，返回 <code>null</code> 。</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> 如果指定的选择器包含 <a href="/en-US/docs/Web/CSS/Pseudo-elements">CSS pseudo-element</a>, 则返回值始终为 <code>null</code>.</p>
+</div>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>指定的 <code>selectors</code> 字符串语法无效。</dd>
+</dl>
+
+<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("DOM WHATWG", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Living standard</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 2")}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 1")}}</td>
+   <td>Original definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.ParentNode.querySelector")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a></li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector">Code snippets for <code>querySelector()</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selectors</a> in the CSS Guide</li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Attribute selectors</a> in the MDN Learning Area</li>
+ <li>This method is available as {{DOMxRef("Element.querySelector()")}}, {{DOMxRef("Document.querySelector()")}}, and {{DOMxRef("DocumentFragment.querySelector()")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/parentnode/queryselectorall/index.html b/files/zh-cn/web/api/parentnode/queryselectorall/index.html
new file mode 100644
index 0000000000..1664ec5559
--- /dev/null
+++ b/files/zh-cn/web/api/parentnode/queryselectorall/index.html
@@ -0,0 +1,157 @@
+---
+title: ParentNode.querySelectorAll()
+slug: Web/API/ParentNode/querySelectorAll
+tags:
+  - API
+  - DOM
+  - Document
+  - ParentNode
+  - 参考
+  - 方法
+  - 查找
+  - 选择器
+translation_of: Web/API/ParentNode/querySelectorAll
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>The {{domxref("ParentNode")}} mixin defines the <code><strong>querySelectorAll()</strong></code> method 返回一个 {{domxref("NodeList")}} 表示元素的列表，把当前的元素作为根与指定的选择器组相匹配。</p>
+
+<p>If you need only a single result, consider the {{domxref("ParentNode.querySelector", "querySelector()")}} method instead.</p>
+
+<div class="note">
+<p><strong>Note:</strong> This method is implemented as {{domxref("Element.querySelectorAll()")}}, {{domxref("Document.querySelectorAll()")}}, and {{domxref("DocumentFragment.querySelectorAll()")}}</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>);
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>selectors</code></dt>
+ <dd>一个或多个<a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS选择器</a>，这些选择器由逗号隔开。</dd>
+ <dd>A {{domxref("DOMString")}} containing one or more selectors to match against. This string must be a valid <a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS selector</a> string; if it's not, a <code>SyntaxError</code> exception is thrown. See <a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a> for more information about using selectors to identify elements. Multiple selectors may be specified by separating them using commas.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> Characters which are not part of standard CSS syntax must be escaped using a backslash character. Since JavaScript also uses backslash escaping, special care must be taken when writing string literals using these characters. See {{anch("Escaping special characters")}} for more information.</p>
+</div>
+
+<h3 id="返回值">返回值</h3>
+
+<p>A non-live {{domxref("NodeList")}} containing one {{domxref("Element")}} object for each descendant node that matches at least one of the specified selectors.</p>
+
+<div class="note">
+<p><strong>Note:</strong> If the specified <code>selectors</code> include a <a href="/en-US/docs/Web/CSS/Pseudo-elements">CSS pseudo-element</a>, the returned list is always empty.</p>
+</div>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>The syntax of the specified <code>selectors</code> string is not valid.</dd>
+</dl>
+
+<h2 id="例子">例子</h2>
+
+<p>To obtain a {{domxref("NodeList")}} of all of the {{HTMLElement("p")}} elements in the document:</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll("p");</pre>
+
+<p>这个例子返回了所有 class 为 "note" 或者 "alert" 的 div 元素的一个列表:</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll("div.note, div.alert");</pre>
+
+<p>Here, we get a list of <code>&lt;p&gt;</code> elements whose immediate parent element is a {{domxref("div")}} with the class <code>"highlighted"</code> and which are located inside a container whose ID is <code>"test"</code>.</p>
+
+<pre class="brush: js">var container = document.querySelector("#test");
+var matches = container.querySelectorAll("div.highlighted &gt; p");</pre>
+
+<p>This example uses an <a href="/en-US/docs/Web/CSS/Attribute_selectors">attribute selector</a> to return a list of the {{domxref("iframe")}} elements in the document that contain an attribute named <code>"data-src"</code>:</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre>
+
+<p>Here, an attribute selector is used to return a list of the list items contained within a list whose ID is <code>"userlist"</code> which have a <code>"data-active"</code> attribute whose value is <code>"1"</code>:</p>
+
+<pre class="brush: js">var container = document.querySelector("#userlist");
+var matches = container.querySelectorAll("li[data-active=1]");</pre>
+
+<h2 id="User_notes">User notes</h2>
+
+<p><code>querySelectorAll()</code> behaves differently than most common JavaScript DOM libraries, which might lead to unexpected results.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Consider this HTML, with its three nested {{HTMLElement("div")}} blocks.</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>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var select = document.querySelector('.select');
+var inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, not 0!
+</pre>
+
+<p>In this example, when selecting <code>".outer .inner"</code> in the context the <code>&lt;div&gt;</code> with the class <code>"select"</code>, the element with the class <code>".inner"</code> is still found, even though <code>.outer</code> is not a descendant of the base element on which the search is performed (<code>".select"</code>). By default, <code>querySelectorAll()</code> only verifies that the last element in the selector is within the search scope.</p>
+
+<p>The {{cssxref(":scope")}} pseudo-class restores the expected behavior, only matching selectors on descendants of the base element:</p>
+
+<pre class="brush: js">var select = document.querySelector('.select');
+var inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0</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("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Living standard</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("Selectors API Level 2")}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 1")}}</td>
+   <td>Original definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.ParentNode.querySelectorAll")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a></li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector">Code snippets for <code>querySelector()</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selectors</a> in the CSS Guide</li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Attribute selectors</a> in the MDN Learning Area</li>
+ <li>This method is available as {{domxref("Element.querySelectorAll()")}}, {{domxref("Document.querySelectorAll()")}}, and {{domxref("DocumentFragment.querySelectorAll()")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/parentnode/replacechildren/index.html b/files/zh-cn/web/api/parentnode/replacechildren/index.html
new file mode 100644
index 0000000000..4f1a67ac1b
--- /dev/null
+++ b/files/zh-cn/web/api/parentnode/replacechildren/index.html
@@ -0,0 +1,161 @@
+---
+title: ParentNode.replaceChildren()
+slug: Web/API/ParentNode/replaceChildren
+translation_of: Web/API/ParentNode/replaceChildren
+---
+<div>{{APIRef("DOM")}}{{seecompattable}}</div>
+
+<p><strong><code>ParentNode.replaceChildren()</code></strong> 方法将一个 {{domxref("Node")}} 的后代替换为指定的后代集合。这些新的后代可以为 {{domxref("DOMString")}} 或 {{domxref("Node")}} 对象。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox notranslate">// [Throws, Unscopable]
+ParentNode.replaceChildren(...<var>nodesOrDOMStrings</var>) // 返回 undefined
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code><var>nodesOrDOMStrings</var></code></dt>
+ <dd>一组用于替换 <code>ParentNode</code> 现有后代的 {{domxref("Node")}} 或 {{domxref("DOMString")}} 对象。若没有指定替代对象时，<code>ParentNode</code> 的所有后代都将被清空。</dd>
+</dl>
+
+<h3 id="异常">异常</h3>
+
+<ul>
+ <li>{{domxref("HierarchyRequestError")}}: 当违反了<a href="https://dom.spec.whatwg.org/#concept-node-tree">节点树的约束条件</a>时抛出。</li>
+</ul>
+
+<h2 id="例子">例子</h2>
+
+<h3 id="清空一个节点">清空一个节点</h3>
+
+<p><code>replaceChildren()</code> 为清空一个节点的后代提供了非常方便的机制，您只需在父节点不指定任何实参调用该方法即可。</p>
+
+<pre class="brush: js notranslate">myNode.replaceChildren();</pre>
+
+<h3 id="在父节点之间转移节点">在父节点之间转移节点</h3>
+
+<p><code>replaceChildren()</code> 允许您更轻松地在父节点之间转移节点，而无需依赖冗余的循环代码。例如，有一个简单的应用程序让您选择您派对上的食物。它的 HTML 可能如下：</p>
+
+<pre class="brush: html notranslate">&lt;h2&gt;派对食物列表&lt;/h2&gt;
+
+&lt;main&gt;
+  &lt;div&gt;
+    &lt;label for="no"&gt;不，谢谢了！&lt;/label&gt;
+
+    &lt;select id="no" multiple size="10"&gt;
+      &lt;option&gt;苹果&lt;/option&gt;
+      &lt;option&gt;橘子&lt;/option&gt;
+      &lt;option&gt;葡萄&lt;/option&gt;
+      &lt;option&gt;香蕉&lt;/option&gt;
+      &lt;option&gt;奇异果&lt;/option&gt;
+      &lt;option&gt;巧克力饼干&lt;/option&gt;
+      &lt;option&gt;花生饼干&lt;/option&gt;
+      &lt;option&gt;巧克力棒&lt;/option&gt;
+      &lt;option&gt;火腿三明治&lt;/option&gt;
+      &lt;option&gt;乳酪三明治&lt;/option&gt;
+      &lt;option&gt;沙拉三明治&lt;/option&gt;
+      &lt;option&gt;冰淇淋&lt;/option&gt;
+      &lt;option&gt;果冻&lt;/option&gt;
+      &lt;option&gt;胡萝卜和鹰嘴豆泥&lt;/option&gt;
+      &lt;option&gt;玛格丽特披萨&lt;/option&gt;
+      &lt;option&gt;腊肠比萨&lt;/option&gt;
+      &lt;option&gt;素比萨&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/div&gt;
+
+  &lt;div class="buttons"&gt;
+    &lt;button id="to-yes"&gt;转移到"是" --&amp;gt;&lt;/button&gt;
+    &lt;button id="to-no"&gt;&amp;lt;-- 转移到 "否"&lt;/button&gt;
+  &lt;/div&gt;
+
+  &lt;div&gt;
+    &lt;label for="yes"&gt;是的，请！&lt;/label&gt;
+
+    &lt;select id="yes" multiple size="10"&gt;
+
+    &lt;/select&gt;
+  &lt;/div&gt;
+&lt;/main&gt;</pre>
+
+<p>使用一些简单的 CSS 将两个选择列表排成一行，并将控制按钮放置在它们之间是很有意义的：</p>
+
+<pre class="brush: css notranslate">main {
+  display: flex;
+}
+
+div {
+  margin-right: 20px;
+}
+
+label, button {
+  display: block;
+}
+
+.buttons {
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+}
+
+select {
+  width: 200px;
+}</pre>
+
+<p>我们要做的是，当按下 “是” 按钮时，将 “否” 列表中的所有选定选项都转移到 “是” 列表中，然后当按下“否”按钮时，将 “是” 列表中的所有选定选项都转移到 “否” 列表中。</p>
+
+<p>为此，我们为每个按钮提供一个 click 事件处理句柄，该事件句柄将所选选项赋值到第一个常量中，将要转移到的列表中的现有的选项赋值到第二个常量中。然后，它会调用列表的 <code>replaceChildren()</code> 方法，使用延展运算符传入两个常量，进而将两个常量中包含的所有选项转移到目标列表。</p>
+
+<pre class="brush: js notranslate">const noSelect = document.getElementById('no');
+const yesSelect = document.getElementById('yes');
+const noBtn = document.getElementById('to-no');
+const yesBtn = document.getElementById('to-yes');
+
+yesBtn.addEventListener('click', () =&gt; {
+  const selectedTransferOptions = document.querySelectorAll('#no option:checked');
+  const existingYesOptions = document.querySelectorAll('#yes option');
+  yesSelect.replaceChildren(...selectedTransferOptions, ...existingYesOptions);
+});
+
+noBtn.addEventListener('click', () =&gt; {
+  const selectedTransferOptions = document.querySelectorAll('#yes option:checked');
+  const existingNoOptions = document.querySelectorAll('#no option');
+  noSelect.replaceChildren(...selectedTransferOptions, ...existingNoOptions);
+});</pre>
+
+<p>最终结果如下：</p>
+
+<p>{{EmbedLiveSample('Transferring_nodes_between_parents', '100%', '350')}}</p>
+
+<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('DOM WHATWG', '#dom-parentnode-replacechildren', 'ParentNode.replaceChildren()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.ParentNode.replaceChildren")}}</p>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li>{{domxref("ParentNode")}} and {{domxref("ChildNode")}}</li>
+ <li>{{domxref("ParentNode.prepend()")}}</li>
+ <li>{{domxref("ParentNode.append()")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>