diff options
Diffstat (limited to 'files/zh-cn/orphaned/web/api/parentnode')
9 files changed, 0 insertions, 1088 deletions
diff --git a/files/zh-cn/orphaned/web/api/parentnode/append/index.html b/files/zh-cn/orphaned/web/api/parentnode/append/index.html deleted file mode 100644 index 6f06f7a420..0000000000 --- a/files/zh-cn/orphaned/web/api/parentnode/append/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: ParentNode.append() -slug: orphaned/Web/API/ParentNode/append -tags: - - API - - DOM - - Node - - ParentNode - - Reference -translation_of: Web/API/ParentNode/append -original_slug: 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 [ <p> ] -</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", <p> ]</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/orphaned/web/api/parentnode/children/index.html b/files/zh-cn/orphaned/web/api/parentnode/children/index.html deleted file mode 100644 index 70a02ddcca..0000000000 --- a/files/zh-cn/orphaned/web/api/parentnode/children/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: ParentNode.children -slug: orphaned/Web/API/ParentNode/children -tags: - - Property -translation_of: Web/API/ParentNode/children -original_slug: 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是一个指向<p>元素的对象引用 -if (parg.childElementCount) -// 检查这个<p>元素是否有子元素 -// 译者注:childElementCount有兼容性问题 - { - var children = parg.children; - for (var i = 0; i < 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/orphaned/web/api/parentnode/firstelementchild/index.html b/files/zh-cn/orphaned/web/api/parentnode/firstelementchild/index.html deleted file mode 100644 index 8e658b4adc..0000000000 --- a/files/zh-cn/orphaned/web/api/parentnode/firstelementchild/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Element.firstElementChild -slug: orphaned/Web/API/ParentNode/firstElementChild -translation_of: Web/API/ParentNode/firstElementChild -original_slug: 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"><ul id="foo"> - <li>First (1)</li> - <li>Second (2)</li> - <li>Third (3)</li> -</ul> - -<script> -var foo = document.getElementById('foo'); -// yields: First (1) -console.log(foo.firstElementChild.textContent); -</script> -</pre> - -<h2 id="适用于_IE8、IE9_和_Safari_的_Polyfill">适用于 IE8、IE9 和 Safari 的 Polyfill</h2> - -<pre><code>// Overwrites native 'firstElementChild' prototype. -// Adds Document & DocumentFragment support for IE9 & Safari. -// Returns array instead of HTMLCollection. -;(function(constructor) { - if (constructor && - constructor.prototype && - 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/orphaned/web/api/parentnode/index.html b/files/zh-cn/orphaned/web/api/parentnode/index.html deleted file mode 100644 index c6b9a42c69..0000000000 --- a/files/zh-cn/orphaned/web/api/parentnode/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: ParentNode -slug: orphaned/Web/API/ParentNode -tags: - - API - - DOM - - Mixin - - Node - - 参考 - - 接口 - - 节点 -translation_of: Web/API/ParentNode -original_slug: 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/orphaned/web/api/parentnode/lastelementchild/index.html b/files/zh-cn/orphaned/web/api/parentnode/lastelementchild/index.html deleted file mode 100644 index 566d3a1976..0000000000 --- a/files/zh-cn/orphaned/web/api/parentnode/lastelementchild/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Element.lastElementChild -slug: orphaned/Web/API/ParentNode/lastElementChild -translation_of: Web/API/ParentNode/lastElementChild -original_slug: 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"><ul id="foo"> - <li>First (1)</li> - <li>Second (2)</li> - <li>Third (3)</li> -</ul> - -<script> -var foo = document.getElementById('foo'); -// yields: Third (3) -console.log(foo.lastElementChild.textContent); -</script> -</pre> - -<h2 id="适用于_IE8、IE9_和_Safari_的_Polyfill">适用于 IE8、IE9 和 Safari 的 Polyfill</h2> - -<pre class="brush: js">// Overwrites native 'lastElementChild' prototype. -// Adds Document & DocumentFragment support for IE9 & Safari. -// Returns array instead of HTMLCollection. -;(function(constructor) { - if (constructor && - constructor.prototype && - 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/orphaned/web/api/parentnode/prepend/index.html b/files/zh-cn/orphaned/web/api/parentnode/prepend/index.html deleted file mode 100644 index c2779973b0..0000000000 --- a/files/zh-cn/orphaned/web/api/parentnode/prepend/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: ParentNode.prepend() -slug: orphaned/Web/API/ParentNode/prepend -tags: - - API - - DOM - - Method - - Node - - ParentNode - - Reference - - prepend - - 方法 -translation_of: Web/API/ParentNode/prepend -original_slug: 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 [ <span>, <p> ] -</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", <p> ]</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/orphaned/web/api/parentnode/queryselector/index.html b/files/zh-cn/orphaned/web/api/parentnode/queryselector/index.html deleted file mode 100644 index 7623caa0ba..0000000000 --- a/files/zh-cn/orphaned/web/api/parentnode/queryselector/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: ParentNode.querySelector() -slug: orphaned/Web/API/ParentNode/querySelector -translation_of: Web/API/ParentNode/querySelector -original_slug: 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/orphaned/web/api/parentnode/queryselectorall/index.html b/files/zh-cn/orphaned/web/api/parentnode/queryselectorall/index.html deleted file mode 100644 index 10936dd5d2..0000000000 --- a/files/zh-cn/orphaned/web/api/parentnode/queryselectorall/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: ParentNode.querySelectorAll() -slug: orphaned/Web/API/ParentNode/querySelectorAll -tags: - - API - - DOM - - Document - - ParentNode - - 参考 - - 方法 - - 查找 - - 选择器 -translation_of: Web/API/ParentNode/querySelectorAll -original_slug: 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>如果你只需要一个结果，可以考虑使用{{domxref("ParentNode.querySelector", "querySelector()")}}方法来代替。</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 notranslate"><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>一个不存活的 {{domxref("NodeList")}} ，每个子节点拥有一个 {{domxref("Element")}} 对象，其中每个子节点至少与一个选择器相匹配。</p> - -<div class="note"> -<p><strong>Note:</strong> 如果指定的 <code>selectors</code> 包含<a href="/en-US/docs/Web/CSS/Pseudo-elements">CSS pseudo-element</a>，那么返回的列表始终为空。</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 notranslate">var matches = document.querySelectorAll("p");</pre> - -<p>这个例子返回了所有 class 为 "note" 或者 "alert" 的 div 元素的一个列表:</p> - -<pre class="brush: js notranslate">var matches = document.querySelectorAll("div.note, div.alert");</pre> - -<p>Here, we get a list of <code><p></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 notranslate">var container = document.querySelector("#test"); -var matches = container.querySelectorAll("div.highlighted > 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 notranslate">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 notranslate">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 notranslate"><div class="outer"> - <div class="select"> - <div class="inner"> - </div> - </div> -</div></pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js notranslate">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><div></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 notranslate">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/orphaned/web/api/parentnode/replacechildren/index.html b/files/zh-cn/orphaned/web/api/parentnode/replacechildren/index.html deleted file mode 100644 index d01a334fd7..0000000000 --- a/files/zh-cn/orphaned/web/api/parentnode/replacechildren/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: ParentNode.replaceChildren() -slug: orphaned/Web/API/ParentNode/replaceChildren -translation_of: Web/API/ParentNode/replaceChildren -original_slug: 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"><h2>派对食物列表</h2> - -<main> - <div> - <label for="no">不，谢谢了！</label> - - <select id="no" multiple size="10"> - <option>苹果</option> - <option>橘子</option> - <option>葡萄</option> - <option>香蕉</option> - <option>奇异果</option> - <option>巧克力饼干</option> - <option>花生饼干</option> - <option>巧克力棒</option> - <option>火腿三明治</option> - <option>乳酪三明治</option> - <option>沙拉三明治</option> - <option>冰淇淋</option> - <option>果冻</option> - <option>胡萝卜和鹰嘴豆泥</option> - <option>玛格丽特披萨</option> - <option>腊肠比萨</option> - <option>素比萨</option> - </select> - </div> - - <div class="buttons"> - <button id="to-yes">转移到"是" --&gt;</button> - <button id="to-no">&lt;-- 转移到 "否"</button> - </div> - - <div> - <label for="yes">是的，请！</label> - - <select id="yes" multiple size="10"> - - </select> - </div> -</main></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', () => { - const selectedTransferOptions = document.querySelectorAll('#no option:checked'); - const existingYesOptions = document.querySelectorAll('#yes option'); - yesSelect.replaceChildren(...selectedTransferOptions, ...existingYesOptions); -}); - -noBtn.addEventListener('click', () => { - 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> |