diff options
Diffstat (limited to 'files/zh-cn/web/api/node')
41 files changed, 3637 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/node/appendchild/index.html b/files/zh-cn/web/api/node/appendchild/index.html new file mode 100644 index 0000000000..b20068ef62 --- /dev/null +++ b/files/zh-cn/web/api/node/appendchild/index.html @@ -0,0 +1,109 @@ +--- +title: Node.appendChild +slug: Web/API/Node/appendChild +tags: + - API + - DOM + - Node + - 参考 + - 方法 + - 节点 +translation_of: Web/API/Node/appendChild +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><strong>Node.appendChild()</strong></code> 方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中，那么 <code>appendChild()</code> 只会将它从原先的位置移动到新的位置（不需要事先移除要移动的节点）。</p> + +<p>这意味着，一个节点不可能同时出现在文档的不同位置。所以，如果某个节点已经拥有父节点，在被传递给此方法后，它首先会被移除，再被插入到新的位置。若要保留已在文档中的节点，可以先使用 {{domxref("Node.cloneNode()")}} 方法来为它创建一个副本，再将副本附加到目标父节点下。请注意，用 <code>cloneNode</code> 制作的副本不会自动保持同步。</p> + +<p>如果给定的子节点是 {{domxref("DocumentFragment")}}，那么 {{domxref("DocumentFragment")}} 的全部内容将转移到指定父节点的子节点列表中。</p> + +<div class="blockIndicator note"> +<p><strong>有更加新的 API 可供使用！</strong><br> + {{domxref("ParentNode.append()")}} 方法支持多个参数，接受字符串作为参数，会将字符串转换为文本节点再附加。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var>element</var>.appendChild(<var>aChild</var>)</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code><var>aChild</var></code></dt> + <dd>要追加给父节点（通常为一个元素）的节点。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>返回追加后的子节点 （<code><var>aChild</var></code>），除非 <code><var>aChild</var></code> 是一个文档片段（{{domxref("DocumentFragment")}}），这种情况下将返回空文档片段（{{domxref("DocumentFragment")}}）。</p> + +<h2 id="附注">附注</h2> + +<p>如果你需要保留这个子节点在原先位置的显示,则你需要先用{{domxref("Node.cloneNode")}}方法复制出一个节点的副本,然后在插入到新位置.</p> + +<p>这个方法只能将某个子节点插入到同一个文档的其他位置,如果你想跨文档插入,你需要先调用{{domxref("document.importNode")}}方法.</p> + +<h2 id="备注">备注</h2> + +<p>由于 <code>appendChild()</code> 返回的是被附加的子元素，所以链式调用可能无法按照你的预期去执行：</p> + +<pre class="brush: js">let aBlock = document.createElement('block').appendChild( document.createElement('b') );</pre> + +<p>（上述代码）只会将 <code><var>aBlock</var></code> 设置为 <code><b></b></code> ，这可能不是你所想要的。</p> + +<h2 id="示例">示例</h2> + +<pre class="brush:js">// 创建一个新的段落元素 <p>，然后添加到 <body> 的最尾部 +var p = document.createElement("p"); +document.body.appendChild(p); +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> 未对{{SpecName("DOM3 Core")}}进行更改</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td> 未对{{SpecName("DOM2 Core")}}进行更改</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td> 未对{{SpecName("DOM1")}}进行更改</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Node.appendChild")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("Node.removeChild")}}</li> + <li>{{domxref("Node.replaceChild")}}</li> + <li>{{domxref("Node.insertBefore")}}</li> + <li>{{domxref("Node.hasChildNodes")}}</li> +</ul> diff --git a/files/zh-cn/web/api/node/baseuri/index.html b/files/zh-cn/web/api/node/baseuri/index.html new file mode 100644 index 0000000000..aa6b22ab99 --- /dev/null +++ b/files/zh-cn/web/api/node/baseuri/index.html @@ -0,0 +1,69 @@ +--- +title: Node.baseURI +slug: Web/API/Node/baseURI +tags: + - <base> + - API + - HTML + - Node.baseURI + - Property + - base +translation_of: Web/API/Node/baseURI +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p><code><strong>Node.baseURI</strong></code> 是只读属性，返回一个节点的绝对基址 URL。</p> + +<p>当浏览器要获取绝对 URL 时，就需要用基 URL 去解析相对 URL。例如，解析 HTML {{HTMLElement("img")}} 元素的 <code>src </code>属性时，或者 处理 XML <code><a href="https://developer.mozilla.org/en-US/docs/XLink">xlink</a>:href</code> 属性时—。</p> + +<p>一般情况下，基 URL 是 document 的 location ，但是它受诸多方面因素的影响，例如 HTML 的 {{HTMLElement("base")}} 元素和 XML <code><a href="https://developer.mozilla.org/en-US/docs/XML/xml:base">xml:base</a></code> 属性。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>baseURI</em> = <em>node</em>.baseURI; +</pre> + +<ul> + <li><code>baseURI</code> 是一个 {{ domxref("DOMString") }} 代表当前 {{domxref("Node", "节点")}} 所在文档的基 URI 。如果无法获取则可能返回 <code>null</code> 。</li> + <li><code><em>node</em>.baseURI</code> 是只读的。</li> + <li><code><em>node</em>.baseURI</code> 可能会随时间发生变化。</li> +</ul> + +<h2 id="Details" name="Details">概述</h2> + +<h3 id="文档的基_URL">文档的基 URL</h3> + +<p><em>document</em> 的默认基 URL 是文档的地址（浏览器显示的地址，可以通过{{domxref("window.location")}} 获取），但是可以通过如下方法修改：</p> + +<ul> + <li>当在文档中找到一个 {{HTMLElement("base")}} 标签时；</li> + <li>当一个文档被动态创建时。</li> +</ul> + +<p>详细信息请参阅 <a href="http://developers.whatwg.org/urls.html#base-urls">HTML Living standard 中关于基 URL 的章节</a> 。</p> + +<p>可以通过 <code><em>{{domxref("document")}}</em>.baseURI</code> 获取文档的基 URL 。注意检查文档的基 URL 可能会每次请求返回不同的结果，因为 {{HTMLElement("base")}} 标签或文档的 location 可能被改变了。</p> + +<h3 id="Example" name="Example">元素的基 URL</h3> + +<p>元素的基 URL 一般和其所在的文档相同。</p> + +<p>如果文档中有 <code><a href="https://developer.mozilla.org/en-US/docs/XML/xml:base">xml:base</a></code> 属性（不要在 HTML 文档中这样做），在 <code><em>node</em>.baseURI </code>计算基 URL 时，会把 <code>xml:base</code> 属性考虑进去。参考 <a href="https://developer.mozilla.org/en-US/docs/XML/xml:base">xml:base</a> 来了解更多。</p> + +<p>可以通过 <code><em>{{domxref("element")}}</em>.baseURI</code> 获取某个元素的基 URL。</p> + +<h2 id="Specification" name="Specification">规范</h2> + +<p>{{ spec("http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-baseURI","DOM Level 3 Core: baseURI","REC") }}</p> + +<h2 id="参考">参考</h2> + +<ul> + <li>{{HTMLElement("base")}} 元素（HTML）</li> + <li><code><a href="https://developer.mozilla.org/en-US/docs/XML/xml:base">xml:base</a></code> 属性（XML 文档）</li> + <li>{{domxref("Node.baseURIObject")}} - a variant of this API for Mozilla add-ons and internal code. Returns the base URL as an {{interface("nsIURI")}}.</li> +</ul> + +<p>{{ languages( {"en": "en/DOM/Node.baseURI" } ) }}</p> diff --git a/files/zh-cn/web/api/node/baseuriobject/index.html b/files/zh-cn/web/api/node/baseuriobject/index.html new file mode 100644 index 0000000000..759f97eb6a --- /dev/null +++ b/files/zh-cn/web/api/node/baseuriobject/index.html @@ -0,0 +1,18 @@ +--- +title: Node.baseURIObject +slug: Web/API/Node/baseURIObject +translation_of: Web/API/Node +--- +<div> + {{ApiRef}} {{Fx_minversion_header("3")}} {{Non-standard_header}}</div> +<h2 id="Summary" name="Summary">概述</h2> +<p><code>baseURIObject</code>属性返回一个代表当前节点(通常是文档节点或元素节点)的基URL的{{Interface("nsIURI")}}对象.该属性类似与{{domxref("Node.baseURI")}},只是它返回的是一个包含更多信息的nsIURI对象,而不只是一个URL字符串.</p> +<p>该属性在所有类型的节点上都可用(HTML,XUL,SVG,MathML等),但脚本本身必须要有 UniversalXPConnect权限(XUL默认有这个权限,HTML没有).</p> +<p>查看{{domxref("Node.baseURI")}}了解基URL(base URL)是什么.</p> +<h2 id="Syntax" name="Syntax">语法</h2> +<pre class="syntaxbox"><var>uriObj</var> = <em>node</em>.baseURIObject +</pre> +<h2 id="Notes" name="Notes">附注</h2> +<p>该属性只读,尝试为它赋值会抛出异常. 此外,这个属性只能从特权代码中访问.</p> +<h2 id="Specification" name="Specification">规范</h2> +<p>不属于任何规范,mozilla私有属性.</p> diff --git a/files/zh-cn/web/api/node/childnodes/index.html b/files/zh-cn/web/api/node/childnodes/index.html new file mode 100644 index 0000000000..182e6b177b --- /dev/null +++ b/files/zh-cn/web/api/node/childnodes/index.html @@ -0,0 +1,52 @@ +--- +title: Node.childNodes +slug: Web/API/Node/childNodes +tags: + - Gecko DOM Reference + - Property +translation_of: Web/API/Node/childNodes +--- +<p>{{ APIRef() }}</p> +<h2 id=".E6.91.98.E8.A6.81" name=".E6.91.98.E8.A6.81">概述</h2> +<p><strong>Node.childNodes </strong> 返回包含指定节点的子节点的集合，该集合为即时更新的集合（live collection）。</p> +<h2 id=".E8.AF.AD.E6.B3.95.E5.92.8C.E5.80.BC" name=".E8.AF.AD.E6.B3.95.E5.92.8C.E5.80.BC">语法</h2> +<pre class="eval">var <var>ndList</var> = elementNodeReference.childNodes; +</pre> +<p>ndList变量为 {{domxref("NodeList")}} 类型，且为只读。</p> +<h2 id=".E8.8C.83.E4.BE.8B" name=".E8.8C.83.E4.BE.8B">例子</h2> +<pre>// parg 是一个到 <p> 元素的引用 +if (parg.hasChildNodes()) +// 首先我们检查它是否包含子节点 + { + var children = parg.childNodes; + for (var i = 0; i < children.length; i++) + { + // children[i]就是遍历到的每个子节点. + // 注意:该NodeList对象为LIVE类型的NodeList, 添加或删除子节点都会实时的改变整个NodeList对象. + }; + }; +</pre> +<pre>//下面的方法可以删除节点box的所有子节点 +while (box.firstChild) + { + //box为LIVE类型的NodeList,所以firstChild属性每次会指向不同的子节点 + box.removeChild(box.firstChild); + }; +</pre> +<h2 id=".E6.B3.A8.E6.84.8F" name=".E6.B3.A8.E6.84.8F">备注</h2> +<p>集合的元素是一个节点而不是字符串。要从集合的元素获取数据，你必须使用它们的属性（例如：用 <code>elementNodeReference.childNodes{{ mediawiki.external("1") }}.nodeName</code> 获取它们的名称，等等）。</p> +<p><code>document</code>节点(文档节点)包含两个子节点： Doctype 声明和根节点。根节点通常为 <code>documentElement</code> 引用，且在 (X)HTML 文档中为 HTML 元素。</p> +<h2 id=".E8.A7.84.E8.8C.83" name=".E8.A7.84.E8.8C.83">规范</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1451460987">W3C DOM 2 Core: childNodes</a></li> + <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-1451460987">W3C DOM 3 Core: childNodes</a></li> + <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-536297177">W3C DOM 3 NodeList interface</a></li> +</ul> +<h2 id="See_also" name="See_also" style="line-height: 30px;">相关链接</h2> +<ul> + <li>{{ domxref("Node.firstChild") }}</li> + <li>{{ domxref("Node.lastChild") }}</li> + <li>{{ domxref("Node.nextSibling") }}</li> + <li>{{ domxref("Node.previousSibling") }}</li> + <li>{{ domxref("ParentNode.children") }}</li> +</ul> diff --git a/files/zh-cn/web/api/node/clonenode/index.html b/files/zh-cn/web/api/node/clonenode/index.html new file mode 100644 index 0000000000..0b87e0f1c2 --- /dev/null +++ b/files/zh-cn/web/api/node/clonenode/index.html @@ -0,0 +1,165 @@ +--- +title: Node.cloneNode +slug: Web/API/Node/cloneNode +tags: + - API + - DOM + - Method + - 参考 +translation_of: Web/API/Node/cloneNode +--- +<div>{{ApiRef("DOM")}}</div> + +<p><strong><code>Node.cloneNode() </code></strong>方法返回调用该方法的节点的一个副本.</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">var <var>dupNode</var> = <var>node</var>.cloneNode(<var>deep</var>); +</pre> + +<dl> + <dt><code>node</code></dt> + <dd>将要被克隆的节点</dd> + <dt><code>dupNode</code></dt> + <dd>克隆生成的副本节点</dd> + <dt><code>deep</code> {{optional_inline}}</dt> + <dd>是否采用深度克隆<code>,如果为true,</code>则该节点的所有后代节点也都会被克隆,如果为<code>false,则只克隆该节点本身.</code></dd> +</dl> + +<div class="note"> +<p><strong>注意:</strong> 在 DOM4 规范中(实现于Gecko 13.0{{geckoRelease("13.0")}})，<code>deep</code>是一个可选参数。如果省略的话，<font face="consolas, Liberation Mono, courier, monospace">参数的</font>默认值为 <code>true，</code>也就是说默认是深度克隆。如果想使用浅克隆, 你需要将该参数设置为 <code>false。</code></p> + +<p>在最新的规范里，该方法的行为已经改变了，其默认值变成了 false。虽然该参数仍旧是可选的，但是你必须要为该方法设置 deep 参数，无论是为了向前还是向后兼容考虑。假如开发者没设置参数的话，Gecko 28.0 {{geckoRelease(28)}}) 版本的控制台会发出警告。从 Gecko 29.0 {{geckoRelease(29)}}) 开始该方法默认为浅复制而不是深度复制。</p> +</div> + +<h2 id="Example" name="Example">示例</h2> + +<pre class="brush: js">var p = document.getElementById("para1"), +var p_prime = p.cloneNode(true); +</pre> + +<h2 id="Notes" name="Notes">附注</h2> + +<p>克隆一个元素节点会拷贝它所有的属性以及属性值,当然也就包括了属性上绑定的事件(比如<code>onclick="alert(1)"</code>),但不会拷贝那些使用<a href="/zh-CN/docs/DOM/element.addEventListener" title="/zh-CN/docs/DOM/element.addEventListener"><code>addEventListener()</code></a>方法或者<code>node.onclick = fn</code>这种用JavaScript动态绑定的事件.</p> + +<p>在使用{{domxref("Node.appendChild()")}}或其他类似的方法将拷贝的节点添加到文档中之前,那个拷贝节点并不属于当前文档树的一部分,也就是说,它没有父节点.</p> + +<p>如果<code>deep</code>参数设为<code>false</code>,则不克隆它的任何子节点.该节点所包含的所有文本也不会被克隆,因为文本本身也是一个或多个的{{domxref("Text")}}节点.</p> + +<p>如果<code>deep</code>参数设为<code>true</code>,则会复制整棵DOM子树(包括那些可能存在的{{domxref("Text")}}子节点).对于空结点(例如{{HTMLElement("img")}}和{{HTMLElement("input")}}元素),<code>则deep</code>参数无论设为<code>true</code>还是设为<code>false,</code>都没有关系,但是仍然需要为它指定一个值.</p> + +<div class="warning">注意:为了防止一个文档中出现两个ID重复的元素,使用<code>cloneNode()方法克隆的节点在需要时应该指定另外一个与原ID值不同的ID</code></div> + +<p>如果原始节点设置了ID，并且克隆节点会被插入到相同的文档中，那么应该更新克隆节点的ID以保证唯一性。name属性可能也需要进行修改，取决于你是否希望有相同名称的节点存在于文档中。</p> + +<p>想要克隆一个节点来添加到另外一个文档中,请使用{{domxref("Document.importNode()")}}代替本方法.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-node-clonenode", "Node.cloneNode()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM3 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>deep</code> as an optional parameter</td> + <td> + <p>{{CompatVersionUnknown}}<sup>[1]</sup></p> + </td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("13.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td> + <p>{{CompatVersionUnknown}}<sup>[1]</sup></p> + </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</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}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>deep</code> as an optional parameter</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("13.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Default value for the <code>deep</code> parameter is <code>false</code>.</p> diff --git a/files/zh-cn/web/api/node/comparedocumentposition/index.html b/files/zh-cn/web/api/node/comparedocumentposition/index.html new file mode 100644 index 0000000000..e1b0adf99b --- /dev/null +++ b/files/zh-cn/web/api/node/comparedocumentposition/index.html @@ -0,0 +1,127 @@ +--- +title: Node.compareDocumentPosition +slug: Web/API/Node/compareDocumentPosition +tags: + - API + - DOM + - Method + - Node + - Position + - Reference + - 比较文档位置 +translation_of: Web/API/Node/compareDocumentPosition +--- +<div>{{ ApiRef("DOM") }}</div> + +<p><code><strong>Node.compareDocumentPosition()</strong></code> 可以比较当前节点与任意文档中的另一个节点的位置关系。</p> + +<p>返回值是一个具有以下值的位掩码：</p> + +<table> + <thead> + <tr> + <th scope="col">常量名</th> + <th scope="col">十进制值</th> + <th scope="col">含义</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>DOCUMENT_POSITION_DISCONNECTED</code></td> + <td>1</td> + <td>不在同一文档中</td> + </tr> + <tr> + <td><code>DOCUMENT_POSITION_PRECEDING</code></td> + <td>2</td> + <td>otherNode在node之前</td> + </tr> + <tr> + <td><code>DOCUMENT_POSITION_FOLLOWING</code></td> + <td>4</td> + <td>otherNode在node之后</td> + </tr> + <tr> + <td><code>DOCUMENT_POSITION_CONTAINS</code></td> + <td>8</td> + <td>otherNode包含node</td> + </tr> + <tr> + <td><code>DOCUMENT_POSITION_CONTAINED_BY</code></td> + <td>16</td> + <td>otherNode被node包含</td> + </tr> + <tr> + <td><code>DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC</code></td> + <td>32</td> + <td>待定</td> + </tr> + </tbody> +</table> + +<h2 id="语法">语法</h2> + +<pre><em>compareMask</em> = node.compareDocumentPosition( otherNode ) +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>otherNode</code></dt> + <dd>用于比较位置的 <code>Node</code> 。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>一个表示 <code>Node</code> 和 <code>otherNode </code>在 {{domxref("Document")}} 中关系的整数值。在一些场景下，可能设置了不止一位比特值。比如 <code>otherNode</code> 在文档中是靠前的且包含了 <code>Node</code>, 那么<code>DOCUMENT_POSITION_CONTAINS</code> 和 <code>DOCUMENT_POSITION_PRECEDING</code> 位都会设置，所以结果会是 0x0A 即十进制下的 10。</p> + +<h2 id="Example" name="Example">例子</h2> + +<pre class="brush:js">var head = document.getElementsByTagName('head').item(0); +if (head.compareDocumentPosition(document.body) & Node.DOCUMENT_POSITION_FOLLOWING) { + console.log("well-formed document"); +} else { + console.log("<head> is not before <body>"); +} +</pre> + +<div class="note"> +<p><strong>注:</strong> 因为<code>compareDocumentPosition</code>返回的是一个位掩码,所以必须再使用<a href="/zh-CN/docs/JavaScript/Reference/Operators/Bitwise_Operators" title="/zh-CN/docs/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators">按位与运算符</a>才能得到有意义的值.</p> +</div> + +<p>注意第一条语句使用了带有参数 0 的 {{domxref("NodeList.item()")}} 方法，它和 getElementsByTagName('head')[0] 是一样的。</p> + +<h2 id="规范">规范</h2> + +<table> + <tbody> + <tr> + <td>规范</td> + <td>状态</td> + <td>注释</td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-node-comparedocumentposition','Node.compareDocumentPosition()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','core.html#Node3-compareDocumentPosition','Node.compareDocumentPosition()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Node.compareDocumentPosition")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><code><a href="/zh-CN/docs/DOM/Node.contains" title="/zh-CN/docs/DOM/Node.contains">Node.contains</a></code></li> + <li><a href="http://ejohn.org/blog/comparing-document-position/" title="http://ejohn.org/blog/comparing-document-position/">John Resig - Comparing Document Position</a></li> +</ul> diff --git a/files/zh-cn/web/api/node/contains/index.html b/files/zh-cn/web/api/node/contains/index.html new file mode 100644 index 0000000000..4f54315c26 --- /dev/null +++ b/files/zh-cn/web/api/node/contains/index.html @@ -0,0 +1,96 @@ +--- +title: Node.contains +slug: Web/API/Node/contains +translation_of: Web/API/Node/contains +--- +<div>{{ApiRef}}</div> + +<h2 id="Summary" name="Summary">概述</h2> + +<p><strong>Node.contains()</strong>返回的是一个布尔值，来表示传入的节点是否为该节点的后代节点。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">node.contains( otherNode ) +</pre> + +<ul> + <li><code>node</code> 是否包含otherNode节点.</li> + <li><code>otherNode</code> 是否是node的后代节点.</li> +</ul> + +<p>如果 <code>otherNode</code> 是 <code>node 的后代节点或是</code> <code>node</code> 节点本身.则返回<code>true</code> , 否则返回 <code>false</code>.</p> + +<h2 id="Example" name="Example">例子</h2> + +<p>下面的函数用来检查一个元素是否是body元素的后代元素且非body元素本身.</p> + +<pre class="brush:js">function isInPage(node) { + return (node === document.body) ? false : document.body.contains(node); +}</pre> + +<ul> + <li><code>node</code> 是我们想要检查的元素节点.</li> +</ul> + +<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>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("9.0")}}</td> + <td>5.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>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("9.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Specification" name="Specification">规范</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/domcore/#dom-node-contains" title="http://www.w3.org/TR/domcore/#dom-node-contains">DOM Level 4: contains</a></li> +</ul> + +<h2 id="See_also" name="See_also">相关链接</h2> + +<ul> + <li>{{domxref("Node.hasChildNodes")}}</li> +</ul> diff --git a/files/zh-cn/web/api/node/firstchild/index.html b/files/zh-cn/web/api/node/firstchild/index.html new file mode 100644 index 0000000000..3b79b77c6f --- /dev/null +++ b/files/zh-cn/web/api/node/firstchild/index.html @@ -0,0 +1,78 @@ +--- +title: Node.firstChild +slug: Web/API/Node/firstChild +tags: + - API + - DOM + - Gecko + - Node + - Node.firstChild + - Property +translation_of: Web/API/Node/firstChild +--- +<div>{{ ApiRef("DOM") }}</div> + +<p><strong>Node.firstChild </strong>只读属性返回树中节点的第一个子节点，如果节点是无子节点，则返回 <code>null。</code></p> + +<h3 id="Syntax" name="Syntax">语法</h3> + +<pre class="syntaxbox"><em>var childNode</em> = <em>node</em>.firstChild; +</pre> + +<h3 id="描述">描述</h3> + +<p>如果有一个子节点, childNode 是节点的第一个子节点的引用，否则为null。</p> + +<h3 id="Example" name="Example">例子</h3> + +<h4 id="Example" name="Example">Example 1</h4> + +<p>这个例子演示了<code>firstChild</code>属性的用法以及空白符节点对该属性的使用可能造成的影响.参见{{ Anch("备注") }}部分了解Gecko DOM中关于处理空白符的更多信息.</p> + +<pre><p id="para-01"> + <span>First span</span> +</p> + +<script type="text/javascript"> + var p01 = document.getElementById('para-01'); + alert(p01.firstChild.nodeName) +</script> +</pre> + +<p>在上面的示例中, 提示框将显示 '#text',因为在<p>标签和<span>标签之前,有一个换行符和多个空格充当了一个文本节点.在Gecko中,任意多个的空白符都将导致文本节点的插入,包括一个到多个空格符,换行符,制表符等等.</p> + +<p></span>和</p>标签之间就是另外一个文本节点.</p> + +<p>如果从源代码移出对应的空白符,则不会有文本节点被插入,span元素就成为了第一个子节点.下面的代码将弹出 'SPAN'.</p> + +<pre><p id="para-01"><span>First span</span></p> + +<script type="text/javascript"> + var p01 = document.getElementById('para-01'); + alert(p01.firstChild.nodeName) +</script> +</pre> + +<h4 id="Example" name="Example">Example 2</h4> + +<p><span id="result_box" lang="zh-CN"><span>假设我们有</span><span>一个HTML文档,如果该文档有一个DTD(文档类型定义),则下面的语句会弹出</span></span><code>[object DocumentType],如果该文档没有一个DTD,</code><span id="result_box" lang="zh-CN"><span>则下面的语句会弹出</span></span><code>[object HTMLHtmlElement]</code>.</p> + +<pre class="eval">alert(document.firstChild); +</pre> + +<h3 id=".E6.B3.A8.E6.84.8F" name=".E6.B3.A8.E6.84.8F">备注</h3> + +<p></p><p>Gecko内核的浏览器会在源代码中标签内部有空白符的地方插入一个文本结点到文档中.因此,使用诸如 + <a href="/zh-CN/docs/Web/API/Node/firstChild" title="Node.firstChild 只读属性返回树中节点的第一个子节点，如果节点是无子节点，则返回 null。"><code>Node.firstChild</code></a> 和 <a href="/zh-CN/docs/Web/API/Node/previousSibling" title="返回当前节点的前一个兄弟节点,没有则返回null."><code>Node.previousSibling</code></a> 之类的方法可能会引用到一个空白符文本节点, + 而不是使用者所预期得到的节点.</p> + + <p>详情请参见 <a class="new" href="/zh-CN/docs/Whitespace_in_the_DOM" rel="nofollow">DOM 中的空白符</a> + 和<a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: 为什么一些文本节点是空的</a>.</p><p></p> + +<h3 id="Specification" name="Specification">规范</h3> + +<p><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-firstChild">DOM Level 1 Core: firstChild</a></p> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-169727388">DOM Level 2 Core: firstChild</a></p> + +<p>{{ languages( { "fr": "fr/DOM/element.firstChild", "ja": "ja/DOM/element.firstChild", "pl": "pl/DOM/element.firstChild", "en": "en/DOM/Node.firstChild" } ) }}</p> diff --git a/files/zh-cn/web/api/node/getrootnode/index.html b/files/zh-cn/web/api/node/getrootnode/index.html new file mode 100644 index 0000000000..97b25f6f8f --- /dev/null +++ b/files/zh-cn/web/api/node/getrootnode/index.html @@ -0,0 +1,96 @@ +--- +title: Node.getRootNode() +slug: Web/API/Node/getRootNode +tags: + - API + - DOM + - Node + - 参考 + - 方法 +translation_of: Web/API/Node/getRootNode +--- +<p>{{APIRef("DOM")}}</p> + +<p>{{domxref("Node")}} 接口的 <strong><code>getRootNode()</code></strong> 方法返回上下文中的根节点，如果 shadow DOM 可用，则对 shadow DOM 同样适用。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <var>root</var> = <var>node</var>.getRootNode(<var>options</var>);</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>options</code> {{optional_inline}}</dt> + <dd>获取根节点时的可选参数对象. 下列值可供选择: + <ul> + <li><code>composed</code>: {{jsxref('Boolean')}} 如果检索到 shadow Root 需要返回，则设置为（<code>false</code>，默认值），如果跳过shadow Root 检索普通Root则设置为（<code>true</code>）。</li> + </ul> + </dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>返回一个继承自 {{domxref('Node')}} 的对象。返回值会因为 <code>getRootNode()</code> 调用的地方不同而不同; 比如说:</p> + +<ul> + <li>在标准的网页中调用将会返回一个 {{domxref("HTMLDocument")}} 对象表示整个网页。</li> + <li>在Shadow DOM里调用将会返回一个与之相关联的 {{domxref("ShadowRoot")}} 。</li> +</ul> + +<h2 id="示例">示例</h2> + +<p>第一个例子很简单，返回一个参照 HTML/document node 位置的一个节点。</p> + +<pre class="brush: js"><code class="language-html">rootNode = node.rootNode;</code></pre> + +<p>我们来看一个稍微复杂的例子。这个例子展示了该属性在普通的 DOM 的 shadow DOM 的差别。 (See the <a href="https://github.com/jserz/js_piece/blob/master/DOM/Node/getRootNode()/demo/getRootNode.html">full source code</a>):</p> + +<pre class="brush: html"><!-- source: https://github.com/jserz/js_piece/blob/master/DOM/Node/getRootNode()/demo/getRootNode.html --> +<div class="js-parent"> + <div class="js-child"></div> +</div> +<div class="js-shadowHost"></div> +<script> + // work on Chrome 54+，Opera41+ + + var parent = document.querySelector('.js-parent'), + child = document.querySelector('.js-child'), + shadowHost = document.querySelector('.js-shadowHost'); + + console.log(parent.getRootNode().nodeName); // #document + console.log(child.getRootNode().nodeName); // #document + + // create a ShadowRoot + var shadowRoot = shadowHost.attachShadow({mode:'open'}); + shadowRoot.innerHTML = '<style>div{background:#2bb8aa;}</style>' + + '<div class="js-shadowChild">content</div>'; + var shadowChild = shadowRoot.querySelector('.js-shadowChild'); + + // The default value of composed is false + console.log(shadowChild.getRootNode() === shadowRoot); // true + console.log(shadowChild.getRootNode({composed:false}) === shadowRoot); // true + console.log(shadowChild.getRootNode({composed:true}).nodeName); // #document +</script></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-node-getrootnode','getRootNode()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Node.getRootNode")}}</p> diff --git a/files/zh-cn/web/api/node/getuserdata/index.html b/files/zh-cn/web/api/node/getuserdata/index.html new file mode 100644 index 0000000000..cc81f8c288 --- /dev/null +++ b/files/zh-cn/web/api/node/getuserdata/index.html @@ -0,0 +1,96 @@ +--- +title: Node.getUserData() +slug: Web/API/Node/getUserData +translation_of: Web/API/Node/getUserData +--- +<p>{{ APIRef }}{{ obsolete_header() }}</p> +<p>The <code><strong>Node.getUserData()</strong></code> method returns any user {{domxref("DOMUserData")}} set previously on the given node by {{domxref("Node.setUserData()")}}.</p> +<div class="note"> + <p>The <code>Node.setUserData</code> and {{domxref("Node.getUserData")}} methods are no longer available from Web content. {{domxref("Element.dataset")}} or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/WeakMap"><code>WeakMap</code></a> can be used instead.</p> +</div> +<h2 id="Syntax">Syntax</h2> +<pre class="syntaxbox"><em>userData</em> = <em>someNode</em>.getUserData(<em>userKey</em>);</pre> +<h3 id="Parameters">Parameters</h3> +<ul> + <li><code>userKey</code> is the key to choose the specific data sought for the given node. More than one key may have been assigned on a given node, containing its own value.</li> +</ul> +<h2 id="Example">Example</h2> +<pre class="brush: js">var d = document.setUserData('key', 15, null); +alert(document.getUserData('key')); // 15</pre> +<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', '#interface-node', 'Node')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Removed from the specification.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#Node3-getUserData', 'Node.getUserData()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> +<h2 id="Browser_compatibility">Browser compatibility</h2> +<p>{{CompatibilityTable}}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br> + Removed in {{CompatGeckoDesktop("22.0")}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</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>{{CompatNo}}</td> + <td>Supported from {{CompatGeckoMobile("1.0")}} to {{CompatGeckoMobile("21.0")}}.<br> + Removed in {{CompatGeckoMobile("22.0")}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> + </table> +</div> +<p>[1] The method is still available from chrome scripts.</p> +<h2 id="See_also">See also</h2> +<ul> + <li>{{domxref("Node.setUserData()")}}</li> + <li>{{domxref("UserDataHandler")}}</li> + <li>{{domxref("DOMUserData")}}</li> +</ul> diff --git a/files/zh-cn/web/api/node/haschildnodes/index.html b/files/zh-cn/web/api/node/haschildnodes/index.html new file mode 100644 index 0000000000..e833c72e84 --- /dev/null +++ b/files/zh-cn/web/api/node/haschildnodes/index.html @@ -0,0 +1,52 @@ +--- +title: Node.hasChildNodes +slug: Web/API/Node/hasChildNodes +translation_of: Web/API/Node/hasChildNodes +--- +<div>{{ApiRef}}</div> + +<h3 id="概述">概述</h3> + +<p><strong>hasChildNodes</strong>方法返回一个<a href="/zh-CN/docs/JavaScript/Reference/Global_Objects/Boolean" title="JavaScript/Reference/Global_Objects/Boolean">布尔值</a>,表明当前<a href="/zh-CN/docs/DOM/Node" title="DOM/Node">节点</a>是否包含有<a href="/zh-CN/docs/DOM/Node.childNodes" title="DOM/Node.childNodes">子节点</a>.</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><code>element.hasChildNodes()</code></pre> + +<h2 id="Example" name="Example">例子</h2> + +<p>下面的例子演示了:如果id为foo的这个元素有子节点,则从dom树中删除它的第一个子节点.</p> + +<pre class="brush:js;highlight:[3];">var foo = document.getElementById("foo"); + +if ( foo.hasChildNodes() ) { + foo.removeChild( foo.childNodes[0] ); +}</pre> + +<div class="note"> +<p>注意:<code>Node.hasChildNodes</code>是个方法,而不是普通属性,使用时必须加括号才能调用.</p> +</div> + +<h2 id="Specification" name="Specification">总结</h2> + +<p>有三种方法可以判断当前节点是否有子节点。</p> + +<ul> + <li>node.firstChild !== null</li> + <li>node.childNodes.length > 0</li> + <li>node.hasChildNodes()</li> +</ul> + +<h2 id="Specification" name="Specification">规范</h2> + +<ul> + <li><a href="https://dom.spec.whatwg.org/#dom-node-haschildnodes">WHATWG: hasChildNodes</a></li> + <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-810594187">hasChildNodes</a></li> +</ul> + +<h2 id="See_also" name="See_also">相关链接</h2> + +<ul> + <li>{{domxref("Node.childNodes")}}</li> + <li>{{domxref("Node.hasAttributes")}}</li> +</ul> diff --git a/files/zh-cn/web/api/node/index.html b/files/zh-cn/web/api/node/index.html new file mode 100644 index 0000000000..d03310cb93 --- /dev/null +++ b/files/zh-cn/web/api/node/index.html @@ -0,0 +1,371 @@ +--- +title: Node +slug: Web/API/Node +tags: + - API + - DOM + - Interface + - Node + - Reference + - 参考 +translation_of: Web/API/Node +--- +<p>{{APIRef("DOM")}}</p> + +<p><span class="seoSummary"><strong><code>Node</code></strong> 是一个接口，各种类型的 DOM API 对象会从这个接口继承。它允许我们使用相似的方式对待这些不同类型的对象；比如, 继承同一组方法，或者用同样的方式测试。</span></p> + +<p>以下接口都从 <code>Node</code> 继承其方法和属性：</p> + +<div>{{DOMxRef("Document")}}, {{DOMxRef("Element")}}, {{DOMxRef("Attr")}}, {{DOMxRef("CharacterData")}} (which {{DOMxRef("Text")}}, {{DOMxRef("Comment")}}, and {{DOMxRef("CDATASection")}} inherit), {{DOMxRef("ProcessingInstruction")}}, {{DOMxRef("DocumentFragment")}}, {{DOMxRef("DocumentType")}}, {{DOMxRef("Notation")}}, {{DOMxRef("Entity")}}, {{DOMxRef("EntityReference")}}</div> + +<p>在方法和属性不相关的特定情况下，这些接口可能返回 <code>null</code>。它们可能会抛出异常 - 例如，当将子节点添加到不允许子节点存在的节点时。</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="属性">属性</h2> + +<p>从其父类型 <em>{{DOMxRef("EventTarget")}}</em><sup>[1]</sup> 继承属性。</p> + +<dl> + <dt>{{DOMxRef("Node.baseURI")}}{{ReadOnlyInline}}</dt> + <dd>返回一个表示base URL的{{DOMxRef("DOMString")}}。不同语言中的base URL的概念都不一样。 在HTML中，base URL表示协议和域名，以及一直到最后一个'/'之前的文件目录。</dd> +</dl> + +<dl> + <dt>{{DOMxRef("Node.baseURIObject")}} {{Non-standard_inline}}{{Fx_MinVersion_Inline("3")}}</dt> + <dd>(不适用于网页内容) 只读的 {{ Interface("nsIURI") }} 对象表示元素的base URI.</dd> + <dt>{{DOMxRef("Node.childNodes")}}{{ReadOnlyInline}}</dt> + <dd>返回一个包含了该节点所有子节点的实时的{{DOMxRef("NodeList")}}。{{DOMxRef("NodeList")}} 是动态变化的。如果该节点的子节点发生了变化，{{DOMxRef("NodeList")}}对象就会自动更新。 </dd> + <dt>{{DOMxRef("Node.firstChild")}} {{ReadonlyInline}}</dt> + <dd>返回该节点的第一个子节点{{DOMxRef("Node")}}，如果该节点没有子节点则返回<code>null</code>。</dd> + <dt>{{DOMxRef("Node.isConnected")}}{{ReadOnlyInline}}</dt> + <dd>返回一个布尔值用来检测该节点是否已连接(直接或者间接)到一个上下文对象上，比如通常DOM情况下的{{DOMxRef("Document")}}对象，或者在shadow DOM情况下的{{DOMxRef("ShadowRoot")}}对象。</dd> + <dt>{{DOMxRef("Node.lastChild")}} {{ReadonlyInline}}</dt> + <dd>返回该节点的最后一个子节点{{DOMxRef("Node")}}，如果该节点没有子节点则返回<code>null</code>。</dd> + <dt>{{DOMxRef("Node.nextSibling")}} {{ReadonlyInline}}</dt> + <dd>返回与该节点同级的下一个节点 {{DOMxRef("Node")}}，如果没有返回<code>null</code>。</dd> + <dt>{{DOMxRef("Node.nodeName")}} {{ReadonlyInline}}</dt> + <dd>返回一个包含该节点名字的{{DOMxRef("DOMString")}}。节点的名字的结构和节点类型不同。比如{{DOMxRef("HTMLElement")}}的名字跟它所关联的标签对应，就比如{{DOMxRef("HTMLAudioElement")}}的就是 <code>'audio'</code> ，{{DOMxRef("Text")}}节点对应的是 <code>'#text'</code> 还有{{DOMxRef("Document")}}节点对应的是 <code>'#document'</code>。</dd> + <dt>{{DOMxRef("Node.nodeType")}}{{ReadonlyInline}}</dt> + <dd>返回一个与该节点类型对应的<code>无符号短整型</code>的值，可能的值如下： + <table class="standard-table"> + <tbody> + <tr> + <th scope="col">Name</th> + <th scope="col">Value</th> + </tr> + <tr> + <td><code>ELEMENT_NODE</code></td> + <td><code>1</code></td> + </tr> + <tr> + <td><code>ATTRIBUTE_NODE</code> {{Deprecated_Inline}}</td> + <td><code>2</code></td> + </tr> + <tr> + <td><code>TEXT_NODE</code></td> + <td><code>3</code></td> + </tr> + <tr> + <td><code>CDATA_SECTION_NODE</code></td> + <td><code>4</code></td> + </tr> + <tr> + <td><code>ENTITY_REFERENCE_NODE</code> {{Deprecated_Inline}}</td> + <td><code>5</code></td> + </tr> + <tr> + <td><code>ENTITY_NODE</code> {{Deprecated_Inline}}</td> + <td><code>6</code></td> + </tr> + <tr> + <td><code>PROCESSING_INSTRUCTION_NODE</code></td> + <td><code>7</code></td> + </tr> + <tr> + <td><code>COMMENT_NODE</code></td> + <td><code>8</code></td> + </tr> + <tr> + <td><code>DOCUMENT_NODE</code></td> + <td><code>9</code></td> + </tr> + <tr> + <td><code>DOCUMENT_TYPE_NODE</code></td> + <td><code>10</code></td> + </tr> + <tr> + <td><code>DOCUMENT_FRAGMENT_NODE</code></td> + <td><code>11</code></td> + </tr> + <tr> + <td><code>NOTATION_NODE</code> {{Deprecated_Inline}}</td> + <td><code>12</code></td> + </tr> + </tbody> + </table> + </dd> + <dt>{{DOMxRef("Node.nodeValue")}}</dt> + <dd>返回或设置当前节点的值。</dd> + <dt>{{DOMxRef("Node.ownerDocument")}} {{readonlyInline}}</dt> + <dd>返回这个元素属于的 {{DOMxRef("Document")}}对象 。 如果没有Document对象与之关联，返回null。</dd> + <dt>{{DOMxRef("Node.parentNode")}} {{readonlyInline}}</dt> + <dd>返回一个当前节点 {{DOMxRef("Node")}}的父节点 。如果没有这样的节点，比如说像这个节点是树结构的顶端或者没有插入一棵树中， 这个属性返回null。</dd> + <dt>{{DOMxRef("Node.parentElement")}} {{readonlyInline}}</dt> + <dd>返回一个当前节点的父节点 {{DOMxRef("Element")}} 。 如果当前节点没有父节点或者说父节点不是一个元素({{DOMxRef("Element")}}), 这个属性返回null。</dd> + <dt>{{DOMxRef("Node.previousSibling")}} {{readonlyInline}}</dt> + <dd>返回一个当前节点同辈的前一个节点( {{DOMxRef("Node")}}) ，或者返回null（如果不存在这样的一个节点的话）。</dd> + <dt>{{DOMxRef("Node.textContent")}}</dt> + <dd>返回或设置一个元素内所有子节点及其后代的文本内容。</dd> +</dl> + +<h3 id="废弃的属性">废弃的属性</h3> + +<dl> + <dt>{{DOMxRef("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}</dt> + <dd>返回一个表示元素名称的本土化表示方法的 {{DOMxRef("DOMString")}} 。 + <div class="blockIndicator note"> + <p><strong>Note:</strong> 在Firefox 3.5以及更早的版本中, HTML 元素的 localName 属性的返回值都是大写的（XHTML 例外）。在后续版本中，这种情况就不存在了。无论是 HTML 还是 XHTML 中，均返回小写的 localName。</p> + </div> + </dd> + <dt>{{DOMxRef("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}</dt> + <dd>该节点命名空间的<code>URL</code>，如果没有命名空间则为<code>null</code>。 + <div class="blockIndicator note"> + <p><strong>Note:</strong> 在Firefox 3.5以及更早的版本中, HTML 的元素都没有命名空间. 而在最新的版本中, 无论是 HTML 还是 XML 文档树 ，所有元素的命名空间统一为 <code><a class="linkification-ext external" href="https://www.w3.org/1999/xhtml/">http://www.w3.org/1999/xhtml/</a></code>。</p> + </div> + </dd> + <dt>{{DOMxRef("Node.nodePrincipal")}} {{Non-standard_inline}}{{Obsolete_Inline("gecko46")}}{{Fx_MinVersion_Inline("3")}}</dt> + <dd>返回节点优先级 {{Interface("nsIPrincipal")}} 。</dd> + <dt>{{DOMxRef("Node.prefix")}} {{Obsolete_Inline}}{{ReadOnlyInline}}</dt> + <dd>返回一个节点命名空间的前缀 {{DOMxRef("DOMString")}} , 当前缀不存在时返回 <code>null</code> 。</dd> + <dt>{{DOMxRef("Node.rootNode")}} {{Obsolete_Inline}}{{ReadOnlyInline}}</dt> + <dd>返回一个DOM 树中顶层节点的 {{DOMxRef("Node")}} 对象，如果顶层节点不DOM 树中，则返回当前节点。该属性已被 {{DOMxRef("Node.getRootNode()")}} 方法所代替。</dd> +</dl> + +<h2 id="方法">方法</h2> + +<p>从其父类型 <em>{{DOMxRef("EventTarget")}}</em><sup>[1]</sup> 继承方法。</p> + +<dl> + <dt>{{DOMxRef("Node.appendChild()")}}</dt> + <dd>将指定的 childNode 参数作为最后一个子节点添加到当前节点。<br> + 如果参数引用了 DOM 树上的现有节点，则节点将从当前位置分离，并附加到新位置。</dd> + <dt>{{DOMxRef("Node.cloneNode()")}}</dt> + <dd>克隆一个 {{DOMxRef("Node")}}，并且可以选择是否克隆这个节点下的所有内容。默认情况下，节点下的内容会被克隆。</dd> + <dt>{{DOMxRef("Node.compareDocumentPosition()")}}</dt> + <dd>比较当前节点与文档中的另一节点的位置。</dd> + <dt>{{DOMxRef("Node.contains()")}}</dt> + <dd>返回一个 {{jsxref("Boolean")}} 布尔值，来表示传入的节点是否为该节点的后代节点。</dd> + <dt>{{DOMxRef("Node.getRootNode()")}}</dt> + <dd>返回上下文对象的根节点。如果shadow root节点存在的话，也可以在返回的节点中包含它。</dd> + <dt>{{DOMxRef("Node.hasChildNodes()")}}</dt> + <dd>返回一个{{jsxref("Boolean")}} 布尔值，来表示该元素是否包含有子节点。</dd> + <dt>{{DOMxRef("Node.insertBefore()")}}</dt> + <dd>在当前节点下增加一个子节点 {{DOMxRef("Node")}}，并使该子节点位于参考节点的前面。</dd> + <dt>{{DOMxRef("Node.isDefaultNamespace()")}}</dt> + <dd>返回一个 {{jsxref("Boolean")}} 类型值。接受一个命名空间 URI 作为参数，当参数所指代的命名空间是默认命名空间时返回 true，否则返回 false。</dd> + <dt>{{DOMxRef("Node.isEqualNode()")}}</dt> + <dd>返回一个 {{jsxref("Boolean")}} 类型值。当两个 node 节点为相同类型的节点且定义的数据点匹配时（即属性和属性值相同，节点值相同）返回 true，否则返回 false。</dd> + <dt>{{DOMxRef("Node.isSameNode()")}}</dt> + <dd>返回一个 {{jsxref("Boolean")}} 类型值。返回这两个节点的引用比较结果。</dd> + <dt>{{DOMxRef("Node.lookupPrefix()")}}</dt> + <dd>返回包含参数 URI 所对应的命名空间前缀的 {{DOMxRef("DOMString")}}，若不存在则返回 null。如果存在多个可匹配的前缀，则返回结果和浏览器具体实现有关。</dd> + <dt>{{DOMxRef("Node.lookupNamespaceURI()")}}</dt> + <dd>接受一个前缀，并返回前缀所对应节点命名空间 URI 。如果 URI 不存在则返回 null。传入 null 作为 prefix 参数将返回默认命名空间。</dd> + <dt>{{DOMxRef("Node.normalize()")}}</dt> + <dd>对该元素下的所有文本子节点进行整理，合并相邻的文本节点并清除空文本节点。</dd> + <dt>{{DOMxRef("Node.removeChild()")}}</dt> + <dd>移除当前节点的一个子节点。这个子节点必须存在于当前节点中。</dd> + <dt>{{DOMxRef("Node.replaceChild()")}}</dt> + <dd>对选定的节点，替换一个子节点 {{DOMxRef("Node")}} 为另外一个节点。</dd> +</dl> + +<h3 id="废弃的方法">废弃的方法</h3> + +<dl> + <dt>{{DOMxRef("Node.getFeature()")}} {{obsolete_inline}}</dt> + <dt>{{DOMxRef("Node.getUserData()")}} {{obsolete_inline}}</dt> + <dd>允许用户从节点的 {{DOMxRef("DOMUserData")}} 获得数据。</dd> + <dt>{{DOMxRef("Node.hasAttributes()")}} {{obsolete_inline}}</dt> + <dd>返回一个 {{jsxref("Boolean")}} 指定该元素是否存在某一属性。</dd> + <dt>{{DOMxRef("Node.isSupported()")}} {{obsolete_inline}}</dt> + <dd>返回一个 {{jsxref("Boolean")}} 类型值，指定了当前 DOM 实现是否实现了某个规范所规定功能和该功能是否被规范所规定的的节点所支持。</dd> + <dt>{{DOMxRef("Node.setUserData()")}} {{obsolete_inline}}</dt> + <dd>允许用户在一个节点上设置或移除 {{DOMxRef("DOMUserData")}} 。</dd> +</dl> + +<h2 id="例子">例子</h2> + +<h3 id="移除某个节点的所有子节点">移除某个节点的所有子节点</h3> + +<pre class="brush: js notranslate">function removeAllChildren(element){ + while(element.firstChild){ + element.removeChild(element.firstChild); + } +}</pre> + +<h4 id="使用示例">使用示例</h4> + +<pre class="brush: js; notranslate">/* ... an alternative to document.body.innerHTML = "" ... */ +removeAllChildren(document.body);</pre> + +<h3 id="遍历所有子节点">遍历所有子节点</h3> + +<p>下面这个函数使用递归的方式遍历一个节点的所有子节点（包括这个根节点自身）。</p> + +<pre class="brush: js; notranslate">function eachNode(rootNode, callback){ + if(!callback){ + var nodes = []; + eachNode(rootNode, function(node){ + nodes.push(node); + }); + return nodes; + } + + if(false === callback(rootNode)) + return false; + + if(rootNode.hasChildNodes()){ + var nodes = rootNode.childNodes; + for(var i = 0, l = nodes.length; i < l; ++i) + if(false === eachNode(nodes[i], callback)) + return; + } +}</pre> + +<h4 id="语法">语法</h4> + +<pre class="syntaxbox notranslate">eachNode(rootNode, callback);</pre> + +<h4 id="描述">描述</h4> + +<p>使用递归的方式对 <code>rootNode</code> 的所有后代节点执行回调函数（包括 <code>rootNode</code> 自身）</p> + +<p>如果没有设定 <code>callback</code>，这函数会返回一个{{jsxref("Array")}}，包含 <code>rootNode</code> 和它的所有后代节点。</p> + +<p>如果设定了 <code>callback</code>（回调函数），如果回调函数在调用中返回 {{jsxref("Boolean")}} <code>false</code>，则当前层级的遍历会中止，同时恢复上一层级的遍历。这个可以用来在找到需要的节点之后中断循环（比如用来查找包含指定文本的文本节点）</p> + +<h4 id="参数">参数</h4> + +<dl> + <dt><code>rootNode</code></dt> + <dd>需要进行后代节点遍历的 <code>Node</code> 对象。</dd> + <dt><code>callback</code></dt> + <dd>一个可选的回调<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function">函数</a>，接受一个节点作为唯一参数。如果没有设定， <code>eachNode</code> 返回一个包含了 <code>rootNode</code> 所有后代节点以及 <code>rootNode</code> 自身的{{jsxref("Array")}}</dd> +</dl> + +<h4 id="使用示例_2">使用示例</h4> + +<p>下述例子会打印出ID为 <code>"box"</code> 的 <code><div></code> 标签内的所有 <code><span></code> 标签的 <a href="/en-US/docs/Web/API/Node/textContent"><code>textContent</code></a> 属性：</p> + +<pre class="brush: html; notranslate"><div id="box"> + <span>Foo</span> + <span>Bar</span> + <span>Baz</span> +</div></pre> + +<pre class="brush: js; notranslate">var box = document.getElementById("box"); +eachNode(box, function(node){ + if(null != node.textContent){ + console.log(node.textContent); + } +});</pre> + +<p>用户终端上会显示如下字符：</p> + +<pre class="brush: js; notranslate">"\n\t", "Foo", "\n\t", "Bar", "\n\t", "Baz"</pre> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> 空格是构成 {{DOMxRef("Text")}}节点的一部分，意味着缩进和换行在 <code>Element</code> 节点之间形成单独的 <code>Text</code> 。</p> +</div> + +<h4 id="真实案例">真实案例</h4> + +<p>下述例子反应了 <code>eachNode</code> 函数是如何在真实场景中使用的：搜索网页中的文本。我们使用一个包装函数 <code>grep</code> 去执行搜索：</p> + +<pre class="brush: js; notranslate">function grep(parentNode, pattern){ + var matches = []; + var endScan = false; + + eachNode(parentNode, function(node){ + if(endScan) + return false; + + // Ignore anything which isn't a text node + if(node.nodeType !== Node.TEXT_NODE) + return; + + if("string" === typeof pattern){ + if(-1 !== node.textContent.indexOf(pattern)) + matches.push(node); + } + else if(pattern.test(node.textContent)){ + if(!pattern.global){ + endScan = true; + matches = node; + } + else matches.push(node); + } + }); + + return matches; +}</pre> + +<p>例如：找到所有包含错别字的 {{DOMxRef("Text")}}：</p> + +<pre class="brush: js; notranslate">var typos = ["teh", "adn", "btu", "adress", "youre", "msitakes"]; +var pattern = new RegExp("\\b(" + typos.join("|") + ")\\b", "gi"); +var mistakes = grep(document.body, pattern); +console.log(mistakes); +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG", "#interface-node", "Node")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>增加了以下方法: <code>getRootNode()</code></td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#interface-node", "Node")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td>移除了以下属性: <code>attributes</code>, <code>namespaceURI</code>, <code>prefix</code>, 和 <code>localName</code>.<br> + 移除了以下方法: <code>isSupported()</code>, <code>hasAttributes()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData()</code>.</td> + </tr> + <tr> + <td>{{SpecName("DOM3 Core", "core.html#ID-1950641247", "Node")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td><code>insertBefore()</code>, <code>replaceChild()</code>, <code>removeChild()</code>, 和 <code>appendChild()</code> 方法在{{DOMxRef("Document")}} 上调用时遇到特定错误时会抛出一个新的异常(<code>NOT_SUPPORTED_ERR</code>)。<br> + <code>normalize()</code> 方法已被修改，使得当设定特定的 {{DOMxRef("DOMConfiguration")}} 属性时， {{DOMxRef("Text")}} 节点也能被正确整理。<br> + 添加以下方法: <code>compareDocumentPosition()</code>, <code>isSameNode()</code>, <code>lookupPrefix()</code>, <code>isDefaultNamespace()</code>, <code>lookupNamespaceURI()</code>, <code>isEqualNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData().</code><br> + 添加以下属性: <code>baseURI</code> 和 <code>textContent</code>.</td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#ID-1950641247", "Node")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>修改 <code>ownerDocument</code> 属性，当访问 {{DOMxRef("DocumentFragment")}} 子节点的 <code>ownerDocument</code> 属性也会返回 null。<br> + 添加下列属性: <code>namespaceURI</code>, <code>prefix</code>, 和 <code>localName</code>.<br> + 添加下列方法: <code>normalize()</code>, <code>isSupported()</code> 和 <code>hasAttributes()</code>.</td> + </tr> + <tr> + <td>{{SpecName("DOM1", "level-one-core.html#ID-1950641247", "Node")}}</td> + <td>{{Spec2("DOM1")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Node")}}</p> diff --git a/files/zh-cn/web/api/node/innertext/index.html b/files/zh-cn/web/api/node/innertext/index.html new file mode 100644 index 0000000000..3062dda65f --- /dev/null +++ b/files/zh-cn/web/api/node/innertext/index.html @@ -0,0 +1,92 @@ +--- +title: HTMLElement.innerText +slug: Web/API/Node/innerText +tags: + - API + - DOM + - HTMLElement + - Property + - Reference + - 参考 + - 属性 +translation_of: Web/API/HTMLElement/innerText +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary"><code><strong>innerText</strong></code> 属性表示一个节点及其后代的“渲染”文本内容。</span> As a getter, it approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied it to the clipboard.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> <code>innerText</code> 很容易与{{domxref("Node.textContent")}}混淆, 但这两个属性间实际上有很重要的区别. 大体来说, <code>innerText</code> 可操作已被渲染的内容， 而 <code>textContent</code> 则不会.</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>renderedText</em> = <em>HTMLElement</em>.innerText; +<em>HTMLElement</em>.innerText = <em>string</em>;</pre> + +<h3 id="输出值">输出值</h3> + +<p>一段 {{domxref("DOMString")}} 表示一个元素中已被渲染的内容. 如果元素自身没有 <a href="https://html.spec.whatwg.org/multipage/rendering.html#being-rendered">被渲染</a> (e.g 被从文档中删除或没有在视图中显示), 这时返回值与 {{domxref("Node.textContent")}} 属性相同.</p> + +<h2 id="例子">例子</h2> + +<p>这个示例对比了 <code>innerText</code> 和 {{domxref("Node.textContent")}}. 这时 <code>innerText</code> 代表的含义就像 {{htmlElement("br")}} 标签, 并且忽略了隐藏的元素.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><h3>Source element:</h3> +<p id="source"> + <style>#source { color: red; }</style> +Take a look at<br>how this text<br>is interpreted + below. + <span style="display:none">HIDDEN TEXT</span> +</p> +<h3>Result of textContent:</h3> +<textarea id="textContentOutput" rows="6" cols="30" readonly>...</textarea> +<h3>Result of innerText:</h3> +<textarea id="innerTextOutput" rows="6" cols="30" readonly>...</textarea></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">const source = document.getElementById('source'); +const textContentOutput = document.getElementById('textContentOutput'); +const innerTextOutput = document.getElementById('innerTextOutput'); + +textContentOutput.innerHTML = source.textContent; +innerTextOutput.innerHTML = source.innerText;</pre> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample("Example", 700, 450)}}</p> + +<h2 id="规范">规范</h2> + +<table> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Introduced, based on the <a href="https://github.com/rocallahan/innerText-spec">draft of the innerText specification</a>. See <a href="https://github.com/whatwg/html/issues/465">whatwg/html#465</a> and <a href="https://github.com/whatwg/compat/issues/5">whatwg/compat#5</a> for history.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + + + +<p>{{Compat("api.HTMLElement.innerText")}}</p> + +<p>此特性最初由 Internet Explorer 引入。 被所有主要的浏览器供应商（vendor）采用后，它于 2016 年正式进入 HTML 标准。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("HTMLElement.outerText")}}</li> + <li>{{domxref("Element.innerHTML")}}</li> +</ul> diff --git a/files/zh-cn/web/api/node/insertbefore/index.html b/files/zh-cn/web/api/node/insertbefore/index.html new file mode 100644 index 0000000000..1d4b2c643f --- /dev/null +++ b/files/zh-cn/web/api/node/insertbefore/index.html @@ -0,0 +1,176 @@ +--- +title: Node.insertBefore() +slug: Web/API/Node/insertBefore +tags: + - API + - DOM + - Method + - Node + - 参考 + - 方法 + - 节点 +translation_of: Web/API/Node/insertBefore +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><strong>Node.insertBefore()</strong></code> 方法在参考节点之前插入一个拥有指定父节点的子节点。如果给定的子节点是对文档中现有节点的引用，<code>insertBefore()</code> 会将其从当前位置移动到新位置（在将节点附加到其他节点之前，不需要从其父节点删除该节点）。</p> + +<p>这意味着一个节点不能同时位于文档的两个点中。因此，如果节点已经有父节点，则首先删除该节点，然后将其插入到新位置。在将节点追加到新父节点之前，可以使用 {{domxref("Node.cloneNode()")}} 复制节点。注意，使用 <code>cloneNode()</code> 创建的节点副本不会自动与原始节点保持同步。</p> + +<p>如果引用节点为 <code>null</code>，则将指定的节点添加到指定父节点的子节点列表的末尾。</p> + +<p>如果给定的子节点是 {{domxref("DocumentFragment")}}，那么 <code>DocumentFragment</code> 的全部内容将被移动到指定父节点的子节点列表中。</p> + +<h2 id="语法">语法</h2> + +<pre class="brush: js notranslate">var <em>insertedNode</em> = <em>parentNode</em>.insertBefore(<em>newNode</em>, <em>referenceNode</em>); +</pre> + +<ul> + <li><code>insertedNode</code> 被插入节点(newNode)</li> + <li><code>parentNode</code> 新插入节点的父节点</li> + <li><code>newNode</code> 用于插入的节点</li> + <li><code>referenceNode</code> <code>newNode</code> 将要插在这个节点之前</li> +</ul> + +<p>如果 <code>referenceNode</code> 为 <code>null</code> 则 <code>newNode</code> 将被插入到子节点的末尾<em>。</em></p> + +<div class="note"> +<p><em><code>referenceNode</code></em> 引用节点<strong>不是</strong>可选参数——你必须显式传入一个 <code>Node</code> 或者 <code>null</code>。如果不提供节点或者传入无效值，在不同的浏览器中会有<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=119489">不同</a>的<a href="https://code.google.com/p/chromium/issues/detail?id=419780">表现</a>。</p> +</div> + +<h2 id="返回值">返回值</h2> + +<p>函数返回被插入过的子节点；当 <code>newNode</code> 是 {{domxref("DocumentFragment")}} 时，返回空 {{domxref("DocumentFragment")}}。</p> + +<h2 id="例子">例子</h2> + +<h3 id="示例_1">示例 1</h3> + +<pre class="brush: js notranslate"><div id="parentElement"> + <span id="childElement">foo bar</span> +</div> + +<script> +// 创建要插入的节点 +var newNode = document.createElement("span"); + +// 获得父节点的引用 +var parentDiv = document.getElementById("childElement").parentNode; + +//实验一：<em>referenceNode 存在 --> 正确返回</em> +var sp2 = document.getElementById("childElement"); +parentDiv.insertBefore(newNode, sp2); +//实验一结束 + +//实验二：<em>referenceNode 为 </em>undefined +var sp2 = undefined; // Not exist a node of id "childElement" +parentDiv.insertBefore(newNode, sp2); //隐式转换到节点类型 +//实验二结束 + +//实验三：<em>referenceNode 为字符类型的 </em>"undefined" +var sp2 = "undefined"; //不存在id为"childElement"的<em>referenceNode</em> +parentDiv.insertBefore(newNode, sp2); // Generate "Type Error: Invalid Argument" +//实验三结束 +</script> +</pre> + +<h3 id="示例_2">示例 2</h3> + +<pre class="brush: html notranslate"><div id="parentElement"> + <span id="childElement">foo bar</span> +</div> + +<script> +//创建一个新的、普通的<span>元素 +var sp1 = document.createElement("span"); + +//插入节点之前，要获得节点的引用 +var sp2 = document.getElementById("childElement"); +//获得父节点的引用 +var parentDiv = sp2.parentNode; + +//在DOM中在sp2之前插入一个新元素 +parentDiv.insertBefore(sp1, sp2); +</script> +</pre> + +<p>没有 <code>insertAfter()</code>。不过，可以使用 <code>insertBefore</code> 和 {{domxref("Node.nextSibling")}} 来模拟它。</p> + +<p>在前一个例子中，可使用下面代码将 <code>sp1</code> 插入到 <code>sp2</code> 之后：</p> + +<pre class="brush: js notranslate"><code>parentDiv.insertBefore(sp1, sp2.nextSibling);</code></pre> + +<p>如果 <code>sp2</code> 没有下一个节点，则它肯定是最后一个节点，则 <code>sp2.nextSibling</code> 返回 <code>null</code>，且 <code>sp1</code> 被插入到子节点列表的最后面（即 <code>sp2</code> 后面）。</p> + +<h3 id="Example2" name="Example2">示例 3</h3> + +<p>在第一个子元素的前面插入一个元素，可使用 <a href="/en-US/docs/DOM/Node.firstChild" title="Node.firstChild">firstChild</a> 属性。</p> + +<pre class="brush:js notranslate">//插入节点之前，要获得节点的引用 +var parentElement = document.getElementById('parentElement'); +//获得第一个子节点的引用 +var theFirstChild = parentElement.firstChild; + +//创建新元素 +var newElement = document.createElement("div"); + +//在第一个子节点之前插入新元素 +parentElement.insertBefore(newElement, theFirstChild); +</pre> + +<p>当元素没有首节点时，<code>firstChild</code> 返回 <code>null</code>。该元素仍然会被插入到父元素中，位于最后一个节点后面。又由于父元素没有第一个子节点，也没有最后一个子节点。 最终，新元素成为唯一的子元素。</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</h2> + + + +<p>{{Compat("api.Node.insertBefore")}}</p> + +<h2 id="规范">规范</h2> + +<table class="spectable 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-node-insertbefore','Node.insertBefore')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Fixes errors in the insertion algorithm</td> + </tr> + <tr> + <td>{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td>Describes the algorithm in more detail</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>No notable changes</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>No notable changes</td> + </tr> + <tr> + <td>{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Introduced</td> + </tr> + </tbody> +</table> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("Node.removeChild()")}}</li> + <li>{{domxref("Node.replaceChild()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Node.hasChildNodes()")}}</li> + <li>{{domxref("Element.insertAdjacentElement()")}}</li> + <li>{{domxref("ParentNode.prepend()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/node/isconnected/index.html b/files/zh-cn/web/api/node/isconnected/index.html new file mode 100644 index 0000000000..f374672b45 --- /dev/null +++ b/files/zh-cn/web/api/node/isconnected/index.html @@ -0,0 +1,93 @@ +--- +title: Node.isConnected +slug: Web/API/Node/isConnected +tags: + - API + - DOM + - Node + - Property + - Reference + - 参考 + - 属性 +translation_of: Web/API/Node/isConnected +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>isConnected</code></strong> 是 {{domxref("Node")}} 的一个只读属性接口。无论节点是否与 DOM 树连接，该属性都会返回一个{{domxref("Boolean", "布尔值")}}。例如: {{domxref("Document")}} 对象与一般 DOM 树连接，{{domxref("ShadowRoot")}} 与 shadow DOM 连接。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>isItConnected</em> = <em>nodeObjectInstance</em>.isConnected</pre> + +<h3 id="返回值">返回值</h3> + +<p>返回 {{domxref("Boolean", "布尔值")}} — 如果该节点与 DOM 树连接则返回 <code>true</code>, 否则返回 <code>false</code>。</p> + +<h2 id="样例">样例</h2> + +<h3 id="标准_DOM_树">标准 DOM 树</h3> + +<pre class="brush: js">let test = document.createElement('p'); +console.log(test.isConnected); // Returns false +document.body.appendChild(test); +console.log(test.isConnected); // Returns true +</pre> + +<h3 id="Shadow_DOM_树">Shadow DOM 树</h3> + +<pre class="brush: js">// Create a shadow root +var shadow = this.attachShadow({mode: 'open'}); + +// Create some CSS to apply to the shadow dom +var style = document.createElement('style'); +console.log(style.isConnected); // returns false + +style.textContent = '.wrapper {' + + 'position: relative;' + + '}' + + + '.info {' + + 'font-size: 0.8rem;' + + 'width: 200px;' + + 'display: inline-block;' + + 'border: 1px solid black;' + + 'padding: 10px;' + + 'background: white;' + + 'border-radius: 10px;' + + 'opacity: 0;' + + 'transition: 0.6s all;' + + 'position: absolute;' + + 'bottom: 20px;' + + 'left: 10px;' + + 'z-index: 3;' + + '}' + + +// Attach the created style element to the shadow dom + +shadow.appendChild(style); +console.log(style.isConnected); // Returns true</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-node-isconnected','isConnected')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + + + +<p>{{Compat("api.Node.isConnected")}}</p> diff --git a/files/zh-cn/web/api/node/isdefaultnamespace/index.html b/files/zh-cn/web/api/node/isdefaultnamespace/index.html new file mode 100644 index 0000000000..da2d0d0c86 --- /dev/null +++ b/files/zh-cn/web/api/node/isdefaultnamespace/index.html @@ -0,0 +1,26 @@ +--- +title: Node.isDefaultNamespace +slug: Web/API/Node/isDefaultNamespace +translation_of: Web/API/Node/isDefaultNamespace +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">概述</h3> +<p><code>isDefaultNamespace</code> 接受一个命名空间URI作为参数,如果该命名空间是当前节点的默认命名空间,则返回<code>true</code>,否则返回<code>false</code>.</p> +<h3 id="Syntax" name="Syntax">语法</h3> +<pre class="eval"><em>result</em> = <em>node</em>.isDefaultNamespace(<em>namespaceURI</em>) +</pre> +<ul> + <li><code>result</code> 为 <code>true</code> 或 <code>false</code>.</li> + <li><code>namespaceURI</code> 为一个命名空间URI.</li> +</ul> +<h3 id="Example" name="Example">例子</h3> +<pre>var XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; +var el = document.getElementsByTagNameNS(XULNS, 'textbox')[0]; +alert(el.isDefaultNamespace(XULNS)); // true +</pre> +<h3 id="Specification" name="Specification">规范</h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isDefaultNamespace">DOM Level 3 Core: isDefaultNamespace</a></li> + <li><a href="/zh-cn/Code_snippets/IsDefaultNamespace" title="zh-cn/Code_snippets/IsDefaultNamespace">Code snippets: isDefaultNamespace</a></li> +</ul> +<p>{{ languages( {"en": "en/DOM/Node.isDefaultNamespace" } ) }}</p> diff --git a/files/zh-cn/web/api/node/isequalnode/index.html b/files/zh-cn/web/api/node/isequalnode/index.html new file mode 100644 index 0000000000..c2127a8aed --- /dev/null +++ b/files/zh-cn/web/api/node/isequalnode/index.html @@ -0,0 +1,124 @@ +--- +title: Node.isEqualNode +slug: Web/API/Node/isEqualNode +tags: + - API + - DOM + - Node + - 参考 + - 方法 + - 节点 +translation_of: Web/API/Node/isEqualNode +--- +<div>{{ ApiRef("DOM") }}</div> + +<p> <code><strong>Node.isEqualNode() </strong></code>方法可以判断两个节点是否相等。当两个节点的类型相同，定义特征(defining characteristics)相同（对元素来说，即 id，孩子节点的数量等等），属性一致等，这两个节点就是相等的。一些具体的数据指出：多数时候的比较是根据节点的类型来的。</p> + +<h3 id="语法">语法</h3> + +<pre class="syntaxbox">var <em>isEqualNode</em> = <em>node</em>.isEqualNode(<var>otherNode</var>); +</pre> + +<ul> + <li><font face="Consolas, Liberation Mono, Courier, monospace">otherNode: </font>比较是否相等的节点.</li> +</ul> + +<h2 id="示例">示例</h2> + +<p>在本例中，我们创建了三个 {{HTMLElement("div")}} 块。第一个和第三个 div 都拥有相同的内容和属性，第二个则不一样。然后我们运行 JavaScript ，使用 <code>isEqualNode()</code> 来比较这几个节点。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div>This is the first element.</div> +<div>This is the second element.</div> +<div>This is the first element.</div> + +<p id="output"></p></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">let output = document.getElementById("output"); +let divList = document.getElementsByTagName("div"); + +output.innerHTML += "div 0 equals div 0: " + divList[0].isEqualNode(divList[0]) + "<br/>"; +output.innerHTML += "div 0 equals div 1: " + divList[0].isEqualNode(divList[1]) + "<br/>"; +output.innerHTML += "div 0 equals div 2: " + divList[0].isEqualNode(divList[2]) + "<br/>";</pre> + +<h3 id="结果">结果</h3> + +<p>{{ EmbedLiveSample('示例', 480) }}</p> + +<h3 id="规范">规范</h3> + +<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-node-isequalnode', 'Node.isEqualNode')}}</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>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>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("Node.isSameNode()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/node/issamenode/index.html b/files/zh-cn/web/api/node/issamenode/index.html new file mode 100644 index 0000000000..ac0bf1fc21 --- /dev/null +++ b/files/zh-cn/web/api/node/issamenode/index.html @@ -0,0 +1,27 @@ +--- +title: Node.isSameNode +slug: Web/API/Node/isSameNode +translation_of: Web/API/Node/isSameNode +--- +<p>{{ ApiRef() }}</p> +<p>{{ Obsolete_header() }}</p> +<h2 id="概述">概述</h2> +<p>判断两个节点是否是相同的节点,即指向同一个对象.</p> +<div class="warning"> + <strong>警告:</strong>该方法已在DOM level 4中被废弃,最近的浏览器版本(Gecko 10.0 {{ geckoRelease("10.0") }}.)已经删除了这个方法.<br> + 也就是说,不要再使用<br> + <code> node1.isSameNode(node2)</code><br> + 而使用<br> + <code> node1 === node2 </code>或者<code> node1 == node2</code><br> + 来代替.</div> +<h2 id="语法">语法</h2> +<pre class="eval">var <em>isSameNode</em> = <em>node</em>.isSameNode(<em>other</em>); +</pre> +<ul> + <li><code>other</code>是要和<code>node</code>判断相同性的另一个节点.</li> +</ul> +<h2 id="规范">规范</h2> +<ul> + <li>{{ spec("http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isSameNode","DOM Level 3 Core: isSameNode","REC") }}</li> + <li>This has been removed from {{ spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD") }}</li> +</ul> diff --git a/files/zh-cn/web/api/node/issupported/index.html b/files/zh-cn/web/api/node/issupported/index.html new file mode 100644 index 0000000000..85b083217e --- /dev/null +++ b/files/zh-cn/web/api/node/issupported/index.html @@ -0,0 +1,37 @@ +--- +title: Node.isSupported +slug: Web/API/Node/isSupported +translation_of: Web/API/Node/isSupported +--- +<p>{{obsolete_header(22)}} {{ ApiRef() }}</p> +<h2 id="Summary" name="Summary">概述</h2> +<p>检测当前环境是否在某个节点上实现了指定的DOM特性.</p> +<h2 id="Syntax" name="Syntax">语法</h2> +<pre class="syntaxbox">node.isSupported(feature, version)</pre> +<dl> + <dt> + <code>feature</code></dt> + <dd> + 需要检测的特性名称.这个参数和<a href="/zh-CN/docs/DOM/document.implementation" title="/zh-CN/docs/DOM/document.implementation">DOMImplementation</a>对象上的<code>hasFeature</code>方法的同名参数作用相同,其中所有有效的特性名称都列在了DOM Level 2中的<a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance">Conformance一节</a>.</dd> + <dt> + <code>version</code></dt> + <dd> + <p>需要检测的特性版本号.在DOM Level 2第一版中,这个参数的值应该写为字符串<code>2.0</code>.如果省略了这个参数,则无论环境实现了哪个版本的需检测特性,这个方法都会返回<code>true</code>.</p> + </dd> +</dl> +<h2 id="Example" name="Example">示例</h2> +<pre class="brush: html"><div id="doc"> +</div> + +<script> + // 获取一个元素,然后检查它是否支持DOM2 HTML模型. + var main = document.getElementById('doc'); + var output = main.isSupported('HTML', '2.0'); +</script> +</pre> +<h2 id="规范">规范</h2> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Level-2-Core-Node-supports">DOM Level 2 Core: isSupported</a></p> +<h2 id="Gecko附注">Gecko附注</h2> +<ul> + <li>从Gecko 19.0 {{geckoRelease("19.0")}}开始,该方法的结果总是会返回<code>true </code>({{bug("801425")}}),从Gecko 22.0 {{geckoRelease("22.0")}}起,该方法被彻底删除.</li> +</ul> diff --git a/files/zh-cn/web/api/node/lastchild/index.html b/files/zh-cn/web/api/node/lastchild/index.html new file mode 100644 index 0000000000..72e9d6b1c5 --- /dev/null +++ b/files/zh-cn/web/api/node/lastchild/index.html @@ -0,0 +1,21 @@ +--- +title: Node.lastChild +slug: Web/API/Node/lastChild +tags: + - Property +translation_of: Web/API/Node/lastChild +--- +<p>{{APIRef()}}</p> +<h2 id="Summary" name="Summary">概述</h2> +<p><code><strong>Node.lastChild</strong></code> 是一个只读属性，返回当前节点的最后一个子节点。如果父节点为一个元素节点，则子节点通常为一个元素节点，或一个文本节点，或一个注释节点。如果没有子节点，则返回 <code>null</code>。</p> +<h2 id="语法">语法</h2> +<pre class="syntaxbox">var last_child = element.lastChild</pre> +<h2 id="Example" name="Example">示例</h2> +<pre class="brush: js">var tr = document.getElementById("row1"); +var corner_td = tr.lastChild; +</pre> +<h2 id="Specification" name="Specification">规范</h2> +<ul> + <li>{{Spec("http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-61AD09FB", "DOM Level 2: lastChild", "REC")}}</li> + <li>{{Spec("http://dom.spec.whatwg.org/#dom-node-lastchild", "DOM Standard: lastChild")}}</li> +</ul> diff --git a/files/zh-cn/web/api/node/localname/index.html b/files/zh-cn/web/api/node/localname/index.html new file mode 100644 index 0000000000..de9dcc4680 --- /dev/null +++ b/files/zh-cn/web/api/node/localname/index.html @@ -0,0 +1,64 @@ +--- +title: Node.localName +slug: Web/API/Node/localName +translation_of: Web/API/Node/localName +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">Summary</h2> +<p>Returns the local part of the qualified name of this node.</p> +<h2 id="Syntax" name="Syntax">Syntax</h2> +<pre class="syntaxbox"><var>name</var> = <var>element</var>.localName +</pre> +<ul> + <li><code>name</code> is the local name as a string (see {{Anch("Notes")}} below for details)</li> +</ul> +<h2 id="Example" name="Example">Example</h2> +<p>(Must be served with XML content type, such as <code>text/xml</code> or <code>application/xhtml+xml</code>.)</p> +<pre class="brush:xml"><html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> +<head> + <script type="application/javascript"><![CDATA[ + function test() { + var text = document.getElementById('text'); + var circle = document.getElementById('circle'); + + text.value = "<svg:circle> has:\n" + + "localName = '" + circle.localName + "'\n" + + "namespaceURI = '" + circle.namespaceURI + "'"; + } + ]]></script> +</head> +<body onload="test()"> + <svg:svg version="1.1" + width="100px" height="100px" + viewBox="0 0 100 100"> + <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/> + </svg:svg> + <textarea id="text" rows="4" cols="55"/> +</body> +</html> +</pre> +<h2 id="Notes" name="Notes">Notes</h2> +<p>The local name of a node is that part of the node's qualified name that comes after the colon. Qualified names are typically used in XML as part of the namespace(s) of the particular XML documents. For example, in the qualified name <code>ecomm:partners</code>, <code>partners</code> is the local name and <code>ecomm</code> is the prefix:</p> +<pre class="brush:xml"><ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm"> + <ecomm:partners> + <ecomm:partner id="1001">Tony's Syrup Warehouse + </ecomm:partner> + </ecomm:partner> +</ecomm:business> +</pre> + +<div class="note"> + <p><strong>Note:</strong> In {{Gecko("1.9.2")}} and earlier, the property returns the upper-cased version of the local name for HTML elements in HTML DOMs (as opposed to XHTML elements in XML DOMs). In later versions, in compliance with HTML5, the property returns in the case of the internal DOM storage, which is lower case for both HTML elements in HTML DOMs and XHTML elements in XML DOMs. The {{domxref("element.tagName","tagName")}} property continues to return in the upper case for HTML elements in HTML DOMs.</p> +</div> +<p>For nodes of any <a href="/zh-CN/docs/DOM/Node.nodeType" title="DOM/Node.nodeType">type</a> other than <code>ELEMENT_NODE</code> and <code>ATTRIBUTE_NODE</code> <code>localName</code> is always <code>null</code>.</p> +<h2 id="Specification" name="Specification">Specification</h2> +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-NodeNSLocalN">DOM Level 2 Core: Node.localName</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-NodeNSLocalN">DOM Level 3 Core: Node.localName</a></li> +</ul> +<h2 id="See_also" name="See_also">See also</h2> +<ul> + <li>{{domxref("Node.namespaceURI")}}</li> +</ul> diff --git a/files/zh-cn/web/api/node/lookupnamespaceuri/index.html b/files/zh-cn/web/api/node/lookupnamespaceuri/index.html new file mode 100644 index 0000000000..f2cf78b283 --- /dev/null +++ b/files/zh-cn/web/api/node/lookupnamespaceuri/index.html @@ -0,0 +1,19 @@ +--- +title: Node.lookupNamespaceURI +slug: Web/API/Node/lookupNamespaceURI +translation_of: Web/API/Node/lookupNamespaceURI +--- +<div>{{APIRef("DOM")}}</div> + +<p>返回当前节点上与指定命名空间前缀绑定的命名空间URI,如果没有,返回<code>null,如果参数为null</code>,返回默认的命名空间.</p> + +<p>根据 <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=312019" rel="external" title="https://bugzilla.mozilla.org/show_bug.cgi?id=312019">bug 312019</a>, 该方法对动态指定的命名空间不起作用.(也就是通过<a href="../../en/DOM/Node.prefix" rel="internal" title="En/DOM/Node.prefix">Node.prefix</a>指定的).</p> + +<h3 id="相关链接">相关链接</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-lookupNamespaceURI" rel="freelink">http://www.w3.org/TR/DOM-Level-3-Cor...upNamespaceURI</a></li> + <li><a href="/zh-cn/Code_snippets/LookupNamespaceURI" title="zh-cn/Code_snippets/LookupNamespaceURI">Code snippets: lookupNamespaceURI</a></li> +</ul> + +<p>{{ languages( { "en": "en/DOM/Node.lookupNamespaceURI" } ) }}</p> diff --git a/files/zh-cn/web/api/node/lookupprefix/index.html b/files/zh-cn/web/api/node/lookupprefix/index.html new file mode 100644 index 0000000000..0f9210e2f7 --- /dev/null +++ b/files/zh-cn/web/api/node/lookupprefix/index.html @@ -0,0 +1,19 @@ +--- +title: Node.lookupPrefix +slug: Web/API/Node/lookupPrefix +translation_of: Web/API/Node/lookupPrefix +--- +<div>{{APIRef("DOM")}}</div> + +<p>返回一个和指定命名空间URI绑定的命名空间前缀.如果没有,返回<code>null</code>. 如果有多个绑定的前缀, 返回的结果根据浏览器实现而定.</p> + +<p>根据 <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=312019" title="https://bugzilla.mozilla.org/show_bug.cgi?id=312019">bug 312019</a>, 该方法对动态指定的命名空间不起作用.(也就是通过<a href="/en/DOM/Node.prefix" title="En/DOM/Node.prefix">Node.prefix</a>指定的).</p> + +<h3 id="相关链接">相关链接</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-lookupNamespacePrefix" rel="freelink">http://www.w3.org/TR/DOM-Level-3-Cor...amespacePrefix</a></li> + <li><a href="/En/Code_snippets/LookupPrefix" title="En/Code_snippets/LookupPrefix">Code snippets: lookupPrefix</a></li> +</ul> + +<p>{{ languages( { "en": "en/DOM/Node.lookupPrefix" } ) }}</p> diff --git a/files/zh-cn/web/api/node/namespaceuri/index.html b/files/zh-cn/web/api/node/namespaceuri/index.html new file mode 100644 index 0000000000..2aab7351fe --- /dev/null +++ b/files/zh-cn/web/api/node/namespaceuri/index.html @@ -0,0 +1,138 @@ +--- +title: Node.namespaceURI +slug: Web/API/Node/namespaceURI +translation_of: Web/API/Node/namespaceURI +--- +<div>{{APIRef("DOM")}}{{obsolete_header}}</div> + +<p><code><strong>Node.namespaceURI</strong></code> 是一个只读属性，返回节点的命名空间URI（namespace URI），如果节点不在一个命名空间中，则返回 <code>null</code>。当节点是文档节点时，返回当前文档的 XML 命名空间（namespace）。</p> + +<div class="warning"> +<p>在 DOM4 中, 此接口从<code>Node</code> 被移入 {{domxref("Element")}} 和 {{domxref("Attr")}}接口.</p> +</div> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><em>namespace</em> = <em>node</em>.namespaceURI</pre> + +<h2 id="Example" name="Example">示例</h2> + +<p>在这个示例中, 使用 <a href="/en-US/docs/DOM/Node.localName" title="DOM/Node.localName">localName</a> 和 <code>namespaceURI来检查这个node</code>. 如果 <code>namespaceURI</code> 返回 XUL 命名空间并且 <code>localName</code> 返回 "browser", 说明这个节点属于 XUL <code><browser/></code>.</p> + +<pre class="brush:js">if (node.localName == "browser" && + node.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { + // this is a XUL browser +}</pre> + +<h2 id="Notes" name="Notes">备注</h2> + +<p>这不是一个计算值，它是基于检查范围内的命名空间声明的名称空间查找的结果。节点的命名空间URI在节点创建时被固定。</p> + +<p>在Firefox 3.5或更早的版本中，HTML文档中HTML元素的名称空间URI是<code>null</code>。在之后的版本中，由<code><a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a></code> 作为XHTML,符合HTML5. {{gecko_minversion_inline("1.9.2")}}</p> + +<p>除了<code>ELEMENT_NODE</code> a和 <code>ATTRIBUTE_NODE</code> 以外的 <a href="/en-US/docs/DOM/Node.nodeType" title="DOM/Node/NodeType/Node.nodeType">nodeType</a> 中 node 的 <code>namespaceURI</code> 永远是<code>null</code>.</p> + +<p>你可以使用DOM2的方法 <a href="/en-US/docs/DOM/document.createElementNS" title="DOM/document.createElementNS">document.createElementNS</a> 来创建一个有特殊 <code>namespaceURI</code> 的元素.</p> + +<p>在<a class="external" href="http://www.w3.org/TR/xml-names11/">XML的命名空间</a>中，属性不会从它附加到的元素继承它的命名空间。如果属性未显式地给出命名空间，则它没有命名空间.</p> + +<p>DOM本身不处理或执行命名空间验证, 因此应该有由DOM应用程序进行必要的验证。请注意，命名空间前缀一旦与特定节点关联，则不能更改.</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM3 Core", "core.html#ID-NodeNSname", "Node.namespaceURI")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td>当设置为 <code>null</code> 是指定动作.</td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#Namespaces-Considerations", "DOM Level 2 Core: XML Namespaces")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#ID-NodeNSname", "Node.namespaceURI")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>初始化</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>特征</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>是否支持</td> + <td>{{CompatVersionUnknown}}<br> + {{CompatNo}}46.0<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[2]</sup><br> + {{CompatNo}} {{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</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>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>是否支持</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[2]</sup><br> + {{CompatNo}} {{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 从DOM4标准开始, 此接口被移入{{domxref("Element")}} 和 {{domxref("Attr")}} 接口.</p> + +<p>[2] 在 Gecko 5.0 之前 {{geckoRelease("5.0")}}, 这是一个读写属性; 从 Gecko 5.0 起,这是一个只读属性, 符合标准.</p> + +<h2 id="参考">参考</h2> + +<ul> + <li>{{domxref("Node.localName")}}</li> + <li>{{domxref("Node.prefix")}}</li> + <li>{{domxref("Element.namespaceURI")}}</li> + <li>{{domxref("Attr.namespaceURI")}}</li> +</ul> diff --git a/files/zh-cn/web/api/node/nextsibling/index.html b/files/zh-cn/web/api/node/nextsibling/index.html new file mode 100644 index 0000000000..2ea2eb4e2b --- /dev/null +++ b/files/zh-cn/web/api/node/nextsibling/index.html @@ -0,0 +1,78 @@ +--- +title: Node.nextSibling +slug: Web/API/Node/nextSibling +translation_of: Web/API/Node/nextSibling +--- +<div>{{APIRef}}</div> + +<p><code><strong>Node.nextSibling</strong></code> 是一个只读属性，返回其父节点的 {{domxref("Node.childNodes","childNodes")}} 列表中紧跟在其后面的节点，如果指定的节点为最后一个节点，则返回 <code>null</code>。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><var>nextNode</var> = <var>node</var>.nextSibling +</pre> + +<h2 id="Notes" name="Notes">备注</h2> + +<p> </p> + +<p>Gecko内核的浏览器会在源代码中标签内部有空白符的地方插入一个文本结点到文档中.因此,使用诸如 <a href="/zh-CN/docs/Web/API/Node/firstChild" title="Node.firstChild 只读属性返回树中节点的第一个子节点，如果节点是无子节点，则返回 null。"><code>Node.firstChild</code></a> 和 <a href="/zh-CN/docs/Web/API/Node/previousSibling" title="返回当前节点的前一个兄弟节点,没有则返回null."><code>Node.previousSibling</code></a> 之类的方法可能会引用到一个空白符文本节点, 而不是使用者所预期得到的节点.</p> + +<p>详情请参见 <a class="new" href="/zh-CN/docs/Whitespace_in_the_DOM" rel="nofollow">DOM 中的空白符</a> 和<a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: 为什么一些文本节点是空的</a>.</p> + +<p> </p> + +<h2 id="Example" name="Example">示例</h2> + +<pre class="brush:html"><div id="div-01">Here is div-01</div> +<div id="div-02">Here is div-02</div> + +<script type="text/javascript"> +var el = document.getElementById('div-01').nextSibling, + i = 1; + +console.log('Siblings of div-01:'); + +while (el) { + console.log(i + '. ' + el.nodeName); + el = el.nextSibling; + i++; +} + +</script> + +/************************************************** + The following is written to the console as it loads: + + Siblings of div-01 + + 1. #text + 2. DIV + 3. #text + 4. SCRIPT + +**************************************************/ +</pre> + +<p>从上面的例子中可以看出，在两个标签之间（即一个元素的闭合标签之后，下一个元素的起始标签之前）有空白出现时，会有<code>#text</code> 节点被插入到 DOM 中。使用 <code>document.write</code> 语句插入的两个元素之间不会有空白。</p> + +<p>The possible inclusion of text nodes in the DOM must be allowed for when traversing the DOM using <code>nextSibling</code>. See the resources in the Notes section.</p> + +<h2 id="Specification" name="Specification">规范</h2> + +<ul> + <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling">DOM Level 1 Core: nextSibling</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6AC54C2F">DOM Level 2 Core: nextSibling</a></li> +</ul> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("Element.nextElementSibling")}}</li> +</ul> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页面上的兼容性表由结构化数据生成。如果您想为这些数据做出贡献，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送pull request。</div> + +<p>{{Compat("api.Node.nextSibling")}}</p> diff --git a/files/zh-cn/web/api/node/nodename/index.html b/files/zh-cn/web/api/node/nodename/index.html new file mode 100644 index 0000000000..632d06407f --- /dev/null +++ b/files/zh-cn/web/api/node/nodename/index.html @@ -0,0 +1,102 @@ +--- +title: Node.nodeName +slug: Web/API/Node/nodeName +translation_of: Web/API/Node/nodeName +--- +<div> + {{APIRef}}</div> +<div> + </div> +<div> + <span style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">概述</span></div> +<p>返回当前节点的节点名称</p> +<h2 id="语法">语法</h2> +<pre class="syntaxbox">var <em>str</em> = <em>node</em>.nodeName; +</pre> +<ul> + <li><code>str</code> 是一个存储了当前节点的节点名称的字符串.</li> + <li><code>nodeName 是一个只读属性</code>.</li> +</ul> +<h2 id="附注">附注</h2> +<p>下表列出了所有类型的节点的<code>nodeName</code>属性的值.</p> +<table class="standard-table"> + <tbody> + <tr> + <th>接口</th> + <th>nodeName属性值</th> + </tr> + <tr> + <td><a href="/zh-CN/docs/DOM/Attr" title="DOM/Attr">Attr</a></td> + <td>等同于 <code><a href="/zh-CN/docs/DOM/Attr.name" title="DOM/Attr.name">Attr.name</a></code> 属性的值</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/DOM/CDATASection" title="DOM/CDATASection">CDATASection</a></td> + <td>"#cdata-section"</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/DOM/Comment" title="DOM/Comment">Comment</a></td> + <td>"#comment"</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/DOM/document" title="DOM/document">Document</a></td> + <td>"#document"</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/DOM/DocumentFragment" title="DOM/DocumentFragment">DocumentFragment</a></td> + <td>"#document-fragment"</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/DOM/DocumentType" title="DOM/DocumentType">DocumentType</a></td> + <td> + <p>等同于 <code><a href="/zh-CN/docs/DOM/DocumentType.name" title="DOM/DocumentType.name">DocumentType.name</a></code><code> 属性的值</code></p> + </td> + </tr> + <tr> + <td><a href="/zh-CN/docs/DOM/element" title="DOM/element">Element</a></td> + <td> + <p>等同于 <code><a href="/zh-CN/docs/DOM/element.tagName" title="DOM/element.tagName">Element.tagName</a></code> 属性的值</p> + </td> + </tr> + <tr> + <td><a href="/zh-CN/docs/DOM/Entity" title="DOM/Entity">Entity</a></td> + <td>实体名称</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/DOM/EntityReference" title="DOM/EntityReference">EntityReference</a></td> + <td>实体引用名称</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/DOM/Notation" title="DOM/Notation">Notation</a></td> + <td>Notation名称</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/DOM/ProcessingInstruction" title="DOM/ProcessingInstruction">ProcessingInstruction</a></td> + <td> + <p>等同于 <code><a href="/zh-CN/docs/DOM/ProcessingInstruction.target" title="DOM/ProcessingInstruction.target">ProcessingInstruction.target</a></code> 属性的值</p> + </td> + </tr> + <tr> + <td><a href="/zh-CN/docs/DOM/Text" title="DOM/Text">text</a></td> + <td>"#text"</td> + </tr> + </tbody> +</table> +<h2 id="示例">示例</h2> +<p>假设已经存在下面的HTML:</p> +<pre class="brush:html"><div id="d1">hello world</div> +<input type="text" id="t"/> +</pre> +<p>以及下面的JavaScript:</p> +<pre class="brush:js">var div1 = document.getElementById("d1"); +var text_field = document.getElementById("t"); + +text_field.value = div1.nodeName; +</pre> +<p>在XHTML(以及属于XML类型的文档)中,<code>变量text_field</code>包含的值会是小写的"div".还在HTML中,<code>变量text_field</code>包含的值会是大写的"DIV",<code>nodeName</code>和<code>tagName</code>属性都有这种表现.查看<a href="http://ejohn.org/blog/nodename-case-sensitivity/" title="http://ejohn.org/blog/nodename-case-sensitivity/">details on nodeName case sensitivity in different browsers</a>一文深入了解.</p> +<p>如果是元素节点,<code>nodeName</code>属性和<code>tagName</code>属性返回相同的值,但如果是文本节点,<code>nodeName</code>属性会返回<code>"#text"</code>,而<code>tagName</code>属性会返回<code>undefined</code>.</p> +<h2 id="规范">规范</h2> +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D095">DOM Level 2 Core: Node.nodeName</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095">DOM Level 3 Core: Node.nodeName</a></li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li> +</ul> diff --git a/files/zh-cn/web/api/node/nodeprincipal/index.html b/files/zh-cn/web/api/node/nodeprincipal/index.html new file mode 100644 index 0000000000..0bd42ab7cf --- /dev/null +++ b/files/zh-cn/web/api/node/nodeprincipal/index.html @@ -0,0 +1,18 @@ +--- +title: Node.nodePrincipal +slug: Web/API/Node/nodePrincipal +translation_of: Web/API/Node +--- +<div> + {{APIRef}}{{Fx_minversion_header(3)}}{{Non-standard_header}} + <p>The <code><strong>Node.nodePrincipal</strong></code> read-only property returns the {{Interface("nsIPrincipal")}} object representing current security context of the node.</p> + <p>{{Note("This property exists on all nodes (HTML, XUL, SVG, MathML, etc.), but only if the script trying to use it has chrome privileges.")}}</p> + <h2 id="Syntax" name="Syntax">Syntax</h2> + <pre class="syntaxbox"><i>principalObj</i> = element.nodePrincipal +</pre> + <h2 id="Notes" name="Notes">Notes</h2> + <p>This property is read-only; attempting to write to it will throw an exception. In addition, this property may only be accessed from privileged code.</p> + <h2 id="Specification" name="Specification">Specification</h2> + <p>Not in any specification.</p> +</div> +<p> </p> diff --git a/files/zh-cn/web/api/node/nodetype/index.html b/files/zh-cn/web/api/node/nodetype/index.html new file mode 100644 index 0000000000..f535443f96 --- /dev/null +++ b/files/zh-cn/web/api/node/nodetype/index.html @@ -0,0 +1,177 @@ +--- +title: Node.nodeType +slug: Web/API/Node/nodeType +tags: + - API + - DOM + - Gecko + - Property + - Reference +translation_of: Web/API/Node/nodeType +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p>只读属性 <code><strong>Node.nodeType</strong></code> 表示的是该节点的类型。</p> + +<h2 id="描述">描述</h2> + +<p><strong><code>nodeType</code></strong> 属性可用来区分不同类型的节点，比如 {{domxref("Element", "元素")}}, {{domxref("Text", "文本")}} 和 {{domxref("Comment", "注释")}}。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><em>var <var>type</var></em> = <var>node</var>.nodeType; +</pre> + +<p>返回一个整数，其代表的是节点类型。其所有可能的值请参考 {{anch("节点类型常量")}}.</p> + +<h2 id="常量">常量</h2> + +<h3 id="节点类型常量">节点类型常量</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">常量</th> + <th scope="col">值</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>Node.ELEMENT_NODE</code></td> + <td><code>1</code></td> + <td>一个 {{domxref("Element", "元素")}} 节点，例如 {{HTMLElement("p")}} 和 {{HTMLElement("div")}}<font face="Consolas, Liberation Mono, Courier, monospace">。</font></td> + </tr> + <tr> + <td><code>Node.TEXT_NODE</code></td> + <td><code>3</code></td> + <td>{{domxref("Element")}} 或者 {{domxref("Attr")}} 中实际的 {{domxref("Text", "文字")}}</td> + </tr> + <tr> + <td><code>Node.CDATA_SECTION_NODE</code></td> + <td><code>4</code></td> + <td>一个 {{domxref("CDATASection")}}，例如 <code><!CDATA[[ … ]]></code>。</td> + </tr> + <tr> + <td><code>Node.PROCESSING_INSTRUCTION_NODE</code></td> + <td><code>7</code></td> + <td>一个用于XML文档的 {{domxref("ProcessingInstruction")}} ，例如 <code><?xml-stylesheet ... ?></code> 声明。</td> + </tr> + <tr> + <td><code>Node.COMMENT_NODE</code></td> + <td><code>8</code></td> + <td>一个 {{domxref("Comment")}} 节点。</td> + </tr> + <tr> + <td><code>Node.DOCUMENT_NODE</code></td> + <td><code>9</code></td> + <td>一个 {{domxref("Document")}} 节点。</td> + </tr> + <tr> + <td><code>Node.DOCUMENT_TYPE_NODE</code></td> + <td><code>10</code></td> + <td>描述文档类型的 {{domxref("DocumentType")}} 节点。例如 <code><!DOCTYPE html></code> 就是用于 HTML5 的。</td> + </tr> + <tr> + <td><code>Node.DOCUMENT_FRAGMENT_NODE</code></td> + <td><code>11</code></td> + <td>一个 {{domxref("DocumentFragment")}} 节点</td> + </tr> + </tbody> +</table> + +<h3 id="已弃用的节点类型常量_deprecated_inline()">已弃用的节点类型常量 {{deprecated_inline()}}</h3> + +<p>以下常量已被弃用，请不要使用。</p> + +<table class="standard-table"> + <tbody> + <tr> + <td>常量</td> + <td>值</td> + <td>描述</td> + </tr> + <tr> + <td><code>Node.ATTRIBUTE_NODE</code></td> + <td>2</td> + <td>{{domxref("Element","元素")}} 的耦合{{domxref("Attr", "属性")}} 。在 {{SpecName("DOM4")}} 规范里{{domxref("Node")}} 接口将不再实现这个元素属性。</td> + </tr> + <tr> + <td><code>Node.ENTITY_REFERENCE_NODE</code></td> + <td>5</td> + <td>一个 XML 实体引用节点。 在 {{SpecName("DOM4")}} 规范里被移除。</td> + </tr> + <tr> + <td><code>Node.ENTITY_NODE</code></td> + <td>6</td> + <td>一个 XML <code><!ENTITY ...></code> 节点。 在 {{SpecName("DOM4")}} 规范中被移除。</td> + </tr> + <tr> + <td><code>Node.NOTATION_NODE</code></td> + <td>12</td> + <td>一个 XML <code><!NOTATION ...></code> 节点。 在 {{SpecName("DOM4")}} 规范里被移除.</td> + </tr> + </tbody> +</table> + +<h2 id="Example" name="Example">例子</h2> + +<h3 id="不同的节点类型">不同的节点类型</h3> + +<pre class="brush: js">document.nodeType === Node.DOCUMENT_NODE; // true +document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE; // true + +var fragment = document.createDocumentFragment(); +fragment.nodeType === Node.DOCUMENT_FRAGMENT_NODE; // true + +var p = document.createElement("p"); +p.textContent = "很久很久以前..."; + +p.nodeType === Node.ELEMENT_NODE; // true +p.firstChild.nodeType === Node.TEXT_NODE; // true +</pre> + +<h3 id="注释">注释</h3> + +<p>该示例会检查 document 下第一个节点是不是注释，如果不是，则会提醒。</p> + +<pre class="brush: js">var node = document.documentElement.firstChild; +if (node.nodeType != Node.COMMENT_NODE) + console.log("你应该认真编写代码注释！"); +</pre> + +<h2 id="Specification" name="Specification">标准</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">标准</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-node-nodetype', 'Node.nodeType')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>弃用了 <code>ATTRIBUTE_NODE</code> , <code>ENTITY_REFERENCE_NODE</code> 和 <code>NOTATION_NODE</code> 类型。</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node.nodeType')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>无修改。</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-111237558', 'Node.nodeType')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>无修改。</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-111237558', 'Node.nodeType')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>最初的定义。</td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/api/node/nodevalue/index.html b/files/zh-cn/web/api/node/nodevalue/index.html new file mode 100644 index 0000000000..7f09ffc4f4 --- /dev/null +++ b/files/zh-cn/web/api/node/nodevalue/index.html @@ -0,0 +1,111 @@ +--- +title: Node.nodeValue +slug: Web/API/Node/nodeValue +tags: + - API + - DOM + - Node + - Property +translation_of: Web/API/Node/nodeValue +--- +<p>{{APIRef("DOM")}}</p> + +<p>{{domxref("Node")}} 的 <code><strong>nodeValue</strong></code> 属性返回或设置当前节点的值。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><var>str</var> = <var>node</var>.nodeValue; +<em>node</em>.nodeValue = <em>str</em>; +</pre> + +<p>value是一个包含当前节点的值的字符串（如果有的话）。</p> + +<h3 id="Notes" name="Notes">值</h3> + +<p>对于文档节点来说, <code>nodeValue</code>返回<code>null</code>. 对于text, comment, 和 CDATA 节点来说, <code>nodeValue返回该节点的文本内容</code>. 对于 attribute 节点来说, 返回该属性的属性值.</p> + +<p>下表就是不同类型的节点所返回的该属性的值.</p> + +<table> + <thead> + <tr> + <th scope="col">Node</th> + <th scope="col">Value of nodeValue</th> + </tr> + </thead> + <tbody> + </tbody> + <tbody> + <tr> + <td>{{domxref("CDATASection")}}</td> + <td>CDATA的文本内容</td> + </tr> + <tr> + <td>{{domxref("Comment")}}</td> + <td>注释的文本内容</td> + </tr> + <tr> + <td>{{domxref("Document")}}</td> + <td>null</td> + </tr> + <tr> + <td>{{domxref("DocumentFragment")}}</td> + <td>null</td> + </tr> + <tr> + <td>{{domxref("DocumentType")}}</td> + <td>null</td> + </tr> + <tr> + <td>{{domxref("Element")}}</td> + <td>null</td> + </tr> + <tr> + <td>{{domxref("NamedNodeMap")}}</td> + <td>null</td> + </tr> + <tr> + <td>{{domxref("EntityReference")}}</td> + <td>null</td> + </tr> + <tr> + <td>{{domxref("Notation")}}</td> + <td>null</td> + </tr> + <tr> + <td>{{domxref("ProcessingInstruction")}}</td> + <td>整个标签的文本内容</td> + </tr> + <tr> + <td>{{domxref("Text")}}</td> + <td>文本节点的内容</td> + </tr> + </tbody> +</table> + +<p>如果<code>nodeValue的值为</code><code>null</code>,则对它赋值也不会有任何效果.</p> + +<h2 id="Specification" name="Specification">规范</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-node-nodevalue", "Node: nodeValue")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Node.nodeValue")}}</p> diff --git a/files/zh-cn/web/api/node/normalize/index.html b/files/zh-cn/web/api/node/normalize/index.html new file mode 100644 index 0000000000..ecdd1ac0c0 --- /dev/null +++ b/files/zh-cn/web/api/node/normalize/index.html @@ -0,0 +1,73 @@ +--- +title: Node.normalize() +slug: Web/API/Node/normalize +tags: + - API + - Method + - Node +translation_of: Web/API/Node/normalize +--- +<div>{{APIRef("DOM")}}</div> + +<p><code>Node.normalize()</code> 方法将当前节点和它的后代节点”规范化“（normalized）。在一个"规范化"后的DOM树中，不存在一个空的文本节点，或者两个相邻的文本节点。</p> + +<p>注1：“空的文本节点”并不包括空白字符(空格，换行等)构成的文本节点。</p> + +<p>注2：两个以上相邻文本节点的产生原因包括：</p> + +<ol> + <li>通过脚本调用有关的DOM接口进行了文本节点的插入和分割等。</li> + <li>HTML中超长的文本节点会被浏览器自动分割为多个相邻文本节点。</li> +</ol> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><em>element</em>.normalize(); +</pre> + +<h2 id="Example" name="Example">例子</h2> + +<pre class="brush:js">var wrapper = document.createElement("div"); + +wrapper.appendChild(document.createTextNode("Part 1 ")); +wrapper.appendChild(document.createTextNode("Part 2 ")); + +// 这时(规范化之前),wrapper.childNodes.length === 2 +// wrapper.childNodes[0].textContent === "Part 1 " +// wrapper.childNodes[1].textContent === "Part 2 " + +wrapper.normalize(); +// 现在(规范化之后), wrapper.childNodes.length === 1 +// wrapper.childNodes[0].textContent === "Part 1 Part 2" +</pre> + +<h2 id="Specification" name="Specification">规范</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-node-normalize", "Node: normalize")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Node.normalize")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Text.splitText()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/node/outertext/index.html b/files/zh-cn/web/api/node/outertext/index.html new file mode 100644 index 0000000000..7465286034 --- /dev/null +++ b/files/zh-cn/web/api/node/outertext/index.html @@ -0,0 +1,8 @@ +--- +title: Node.outerText +slug: Web/API/Node/outerText +tags: + - Node.outerText +translation_of: Web/API/HTMLElement/outerText +--- +<p>请参阅 {{domxref("HTMLElement.outerText")}}</p> diff --git a/files/zh-cn/web/api/node/ownerdocument/index.html b/files/zh-cn/web/api/node/ownerdocument/index.html new file mode 100644 index 0000000000..f1af625761 --- /dev/null +++ b/files/zh-cn/web/api/node/ownerdocument/index.html @@ -0,0 +1,115 @@ +--- +title: Node.ownerDocument +slug: Web/API/Node/ownerDocument +tags: + - API + - DOM + - Gecko + - Property + - 属性 +translation_of: Web/API/Node/ownerDocument +--- +<div>{{ APIRef("DOM")}}</div> + +<p><strong>Node.ownerDocument </strong>只读属性会返回当前节点的顶层的 document 对象。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval"><em>document</em> = node.ownerDocument +</pre> + +<ul> + <li><code>document</code> 是当前元素的 <a href="https://developer.mozilla.org/zh-CN/docs/DOM/document"><code>document</code></a> 对象，其是当前元素的祖先。</li> +</ul> + +<h2 id="Example" name="Example">例子</h2> + +<pre>// 得到p元素所在文档的HTML节点 +d = p.ownerDocument; +html = d.documentElement; +</pre> + +<h2 id="Notes" name="Notes">注意</h2> + +<p><code>被此属性返回的 document</code> 对象是在实际的HTML文档中的所有子节点所属的主对象<code>。如果在文档节点自身上使用此属性，则结果是null</code>。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-node-ownerdocument", "Node.ownerDocument")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM3 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}</td> + <td>{{Spec2("DOM2 Core")}}</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>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}<sup>[1]</sup></td> + <td>6.0<sup>[2]</sup></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}<sup>[1]</sup></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 从 Gecko 9.0 {{ geckoRelease("9.0") }} 开始, <code>一个由脚本生成的</code>DocumentType类型的节点(节点类型{{ domxref("Node.nodeType") }}的值为 <code>Node.DOCUMENT_TYPE_NODE</code> 也就是 10)的<code>ownerDocument</code>属性的值不再是null. 而是调用<a href="/zh-cn/DOM/DOMImplementation.createDocumentType" title="zh-cn/DOM/DOMImplementation.createDocumentType"><code>document.implementation.createDocumentType()</code></a> 方法创建该节点的文档节点.</p> + +<p>[2] <a href="http://msdn.microsoft.com/en-us/library/ie/ms534315(v=vs.85).aspx">http://msdn.microsoft.com/en-us/library/ie/ms534315(v=vs.85).aspx</a></p> diff --git a/files/zh-cn/web/api/node/parentelement/index.html b/files/zh-cn/web/api/node/parentelement/index.html new file mode 100644 index 0000000000..6472201fe4 --- /dev/null +++ b/files/zh-cn/web/api/node/parentelement/index.html @@ -0,0 +1,42 @@ +--- +title: Node.parentElement +slug: Web/API/Node/parentElement +translation_of: Web/API/Node/parentElement +--- +<p>{{ ApiRef() }}</p> + +<p>返回当前节点的父元素节点，如果该元素没有父节点，或者父节点不是一个 DOM {{domxref("Element", "元素")}}，则返回 <code>null</code>。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em>parentElement</em> = <em>node</em>.parentElement</pre> + +<p><code>parentElement</code> 是当前节点的父元素。它永远是一个 DOM {{domxref("Element", "元素")}} 对象，或者 <code>null</code>。</p> + +<h2 id="例子">例子</h2> + +<pre class="brush:js">if (node.parentElement) { + node.parentElement.style.color = "red"; +}</pre> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>在一些浏览器上，<code>parentElement</code> 属性只对自身为 {{domxref("Element")}} 的节点定义，也就是说，对文本节点不定义。</p> + +<div> + + +<p>{{Compat("api.Node.parentElement")}}</p> +</div> + +<h2 id="规范">规范</h2> + +<ul> + <li>{{spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#parent-element", "DOM Level 4: Node.parentElement", "WD")}}</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("Node.parentNode")}}</li> +</ul> diff --git a/files/zh-cn/web/api/node/parentnode/index.html b/files/zh-cn/web/api/node/parentnode/index.html new file mode 100644 index 0000000000..300f53747f --- /dev/null +++ b/files/zh-cn/web/api/node/parentnode/index.html @@ -0,0 +1,72 @@ +--- +title: Node.parentNode +slug: Web/API/Node/parentNode +translation_of: Web/API/Node/parentNode +--- +<p>{{ ApiRef() }}</p> +<h2 id="Summary" name="Summary">概述</h2> +<p>返回指定的节点在DOM树中的父节点.</p> +<h2 id="Syntax" name="Syntax">语法</h2> +<pre class="eval"><em>parentNode</em> = <em>node</em>.parentNode +</pre> +<p><code>parentNode是指定节点的父节点.一个元素节点的父节点可能是一个元素(</code><code>Element</code> <code>)节点,也可能是一个文档(</code><code>Document</code> <code>)节点,或者是个</code>文档碎片(<code>DocumentFragment</code>)节点.</p> +<h2 id="Example" name="Example">例子</h2> +<pre class="eval">if (node.parentNode) { + // 从DOM树中删除node节点,除非它已经被删除了. + node.parentNode.removeChild(node); +} +</pre> +<h2 id="Notes" name="Notes">备注</h2> +<p>对于下面的<a href="/zh-cn/DOM/Node.nodeType" title="zh-cn/DOM/Node.nodeType">节点类型</a>: <code>Attr</code>, <code>Document</code>, <code>DocumentFragment</code>, <code>Entity</code>, <code>Notation</code>,其<code>parentNode</code>属性返回<code>null</code>.</p> +<p>如果当前节点刚刚被建立,还没有被插入到DOM树中,则该节点的<code>parentNode属性也返回</code><code>null.</code></p> +<h2 id="See_also" name="See_also">相关链接</h2> +<p>{{ Domxref("element.firstChild") }}, {{ Domxref("element.lastChild") }}, {{ Domxref("element.childNodes") }}, {{ Domxref("element.nextSibling") }}, {{ Domxref("element.previousSibling") }}.</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("1") }}</td> + <td>0.2</td> + <td>{{ CompatVersionUnknown() }}</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>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("1") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="Specification" name="Specification">规范</h2> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317">DOM Level 2 Core: Node.parentNode</a></p> +<p>{{ languages( { "it": "it/DOM/element.parentNode", "ja": "ja/DOM/element.parentNode", "fr": "fr/DOM/element.parentNode", "pl": "pl/DOM/element.parentNode" , "en": "en/DOM/Node.parentNode" } ) }}</p> diff --git a/files/zh-cn/web/api/node/prefix/index.html b/files/zh-cn/web/api/node/prefix/index.html new file mode 100644 index 0000000000..6883a89050 --- /dev/null +++ b/files/zh-cn/web/api/node/prefix/index.html @@ -0,0 +1,76 @@ +--- +title: Node.prefix +slug: Web/API/Node/prefix +translation_of: Web/API/Node/prefix +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概述</h2> +<p><code>prefix属性会</code>返回当前节点的命名空间前缀,如果没有指定命名空间前缀,则返回<code>null</code>,该属性只读.</p> +<h2 id="Syntax" name="Syntax">语法</h2> +<pre class="syntaxbox"><var>string</var> = element.prefix +</pre> +<h2 id="Examples" name="Examples">示例</h2> +<p>下面的代码将弹出"x".</p> +<pre class="brush:xml"><x:div onclick="alert(this.prefix)"/> +</pre> +<h2 id="Notes" name="Notes">附注</h2> +<p>该属性只在一个解析命名空间前缀的文档中可用,也就是说,只有在文档的MIME类型为XML,XHTML,XUL时可用,在HTML文档中不可用.</p> +<h2 id="Specification" name="Specification">规范</h2> +<ul> + <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-NodeNSPrefix">Node.prefix</a> (introduced in DOM2)</li> +</ul> +<h2 id="浏览器兼容性">浏览器兼容性</h2> +<div> + {{CompatibilityTable}}</div> +<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>{{CompatUnknown}}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + <p>在Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)之前,该属性是可写的; 之后,是只读的.</p> + </td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</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>{{CompatUnknown}}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + <p>P在Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)之前,该属性是可写的; 之后,是只读的.</p> + </td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<p></p> diff --git a/files/zh-cn/web/api/node/previoussibling/index.html b/files/zh-cn/web/api/node/previoussibling/index.html new file mode 100644 index 0000000000..b18cd049e4 --- /dev/null +++ b/files/zh-cn/web/api/node/previoussibling/index.html @@ -0,0 +1,42 @@ +--- +title: Node.previousSibling +slug: Web/API/Node/previousSibling +translation_of: Web/API/Node/previousSibling +--- +<p>{{ APIRef() }}</p> + +<p>{{ languages( { "fr": "fr/DOM/element.previousSibling", "ja": "ja/DOM/element.previousSibling", "pl": "pl/DOM/element.previousSibling", "en": "en/DOM/Node.previousSibling" } ) }}</p> + +<h3 id="Summary" name="Summary">概述</h3> + +<p>返回当前节点的前一个兄弟节点,没有则返回<code>null.</code></p> + +<h3 id="Syntax" name="Syntax">语法</h3> + +<pre class="eval"><em>previousNode</em> = <em>node</em>.previousSibling +</pre> + +<h3 id="Example" name="Example">例子</h3> + +<pre class="eval">// <a><b1 id="b1"/><b2 id="b2"/></a> +alert(document.getElementById("b1").previousSibling); // null +alert(document.getElementById("b2").previousSibling.id); // "b1" +</pre> + +<h3 id="Notes" name="Notes">备注</h3> + + + +<p>Gecko内核的浏览器会在源代码中标签内部有空白符的地方插入一个文本结点到文档中.因此,使用诸如 <a href="/zh-CN/docs/Web/API/Node/firstChild" title="Node.firstChild 只读属性返回树中节点的第一个子节点，如果节点是无子节点，则返回 null。"><code>Node.firstChild</code></a> 和 <a href="/zh-CN/docs/Web/API/Node/previousSibling" title="返回当前节点的前一个兄弟节点,没有则返回null."><code>Node.previousSibling</code></a> 之类的方法可能会引用到一个空白符文本节点, 而不是使用者所预期得到的节点.</p> + +<p>详情请参见 <a class="new" href="/zh-CN/docs/Whitespace_in_the_DOM" rel="nofollow">DOM 中的空白符</a> 和<a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: 为什么一些文本节点是空的</a>.</p> + + + +<p>获取后一个兄弟节点,请使用<a href="/zh-CN/docs/Web/API/Node/nextSibling">Node.nextSibling</a>.</p> + +<h3 id="Specification" name="Specification">规范</h3> + +<p><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling">DOM Level 1 Core: previousSibling</a></p> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">DOM Level 2 Core: previousSibling</a></p> diff --git a/files/zh-cn/web/api/node/removechild/index.html b/files/zh-cn/web/api/node/removechild/index.html new file mode 100644 index 0000000000..77766b3fe4 --- /dev/null +++ b/files/zh-cn/web/api/node/removechild/index.html @@ -0,0 +1,97 @@ +--- +title: Node.removeChild +slug: Web/API/Node/removeChild +tags: + - Node.removeChild() +translation_of: Web/API/Node/removeChild +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong>Node.removeChild() </strong>方法从DOM中删除一个子节点。返回删除的节点。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><em>let oldChild</em> = node.removeChild(<em>child</em>); + +<strong>//OR +</strong> +<em>element</em>.removeChild(<em>child</em>);</pre> + +<ul> + <li><code>child</code> 是要移除的那个子节点.</li> + <li><code>node</code> 是<code>child</code>的父节点.</li> + <li>oldChild保存对删除的子节点的引用. <code>oldChild</code> === <code>child</code>.</li> +</ul> + +<p>被移除的这个子节点仍然存在于内存中,只是没有添加到当前文档的DOM树中,因此,你还可以把这个节点重新添加回文档中,当然,实现要用另外一个变量比如<code>上例中的oldChild</code>来保存这个节点的引用. 如果使用上述语法中的第二种方法, 即没有使用 oldChild 来保存对这个节点的引用, 则认为被移除的节点已经是无用的, 在短时间内将会被<a href="/zh-CN/docs/Web/JavaScript/Memory_Management">内存管理</a>回收.</p> + +<p>如果上例中的<code>child节点</code>不是<code>node</code>节点的子节点,则该方法会抛出异常.</p> + +<h2 id="Example" name="Example">示例</h2> + +<pre><code><!--Sample HTML code--> +<div id="top" align="center"> </div> + +<script type="text/javascript"> + var top = document.getElementById("top"); + var nested = document.getElementById("nested"); + var garbage = top.removeChild(nested); + //Test Case 2: the method throws the exception (2) +</script> + +<!--Sample HTML code--> +<div id="top" align="center"> + <div id="nested"></div> +</div> + +<script type="text/javascript"> + var top = document.getElementById("top"); + var nested = document.getElementById("nested"); + var garbage = top.removeChild(nested); + // This first call remove correctly the node + garbage = top.removeChild(nested); + // Test Case 1: the method in the second call here, throws the exception (1) +</script></code></pre> + +<pre><!--示例HTML代码--> + +<div id="top" align="center"> + <div id="nested"></div> +</div> +</pre> + +<pre class="brush:js">// 先定位父节点,然后删除其子节点 +var d = document.getElementById("top"); +var d_nested = document.getElementById("nested"); +var throwawayNode = d.removeChild(d_nested); +</pre> + +<pre class="brush:js">// 无须定位父节点,通过parentNode属性直接删除自身 +var node = document.getElementById("nested"); +if (node.parentNode) { + node.parentNode.removeChild(node); +} +</pre> + +<pre class="brush:js">// 移除一个元素节点的所有子节点 +var element = document.getElementById("top"); +while (element.firstChild) { + element.removeChild(element.firstChild); +} +</pre> + +<h2 id="Specification" name="Specification">规范</h2> + +<ul> + <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild">DOM Level 1 Core: removeChild</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1734834066">DOM Level 2 Core: removeChild</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1734834066">DOM Level 3 Core: removeChild</a></li> +</ul> + +<h2 id="See_also" name="See_also">相关链接</h2> + +<ul> + <li>{{domxref("Node.replaceChild")}}</li> + <li>{{domxref("Node.parentNode")}}</li> + <li>{{domxref("ChildNode.remove")}}</li> +</ul> diff --git a/files/zh-cn/web/api/node/replacechild/index.html b/files/zh-cn/web/api/node/replacechild/index.html new file mode 100644 index 0000000000..e346fcb0c2 --- /dev/null +++ b/files/zh-cn/web/api/node/replacechild/index.html @@ -0,0 +1,99 @@ +--- +title: Node.replaceChild() +slug: Web/API/Node/replaceChild +tags: + - API + - DOM + - Node + - 参考 + - 方法 +translation_of: Web/API/Node/replaceChild +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>Node.replaceChild()</code></strong> 方法用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var>parentNode</var>.replaceChild(<var>newChild</var>, <var>oldChild</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code><strong>newChild</strong></code></dt> + <dd>用来替换 <code>oldChild</code> 的新节点。如果该节点已经存在于 DOM 树中，则它首先会被从原始位置删除。</dd> + <dt><code><strong>oldChild</strong></code></dt> + <dd>被替换掉的原始节点。</dd> +</dl> + +<ul> +</ul> + +<h3 id="返回值">返回值</h3> + +<p>The returned value is the replaced node. This is the same node as <code>oldChild</code>.</p> + +<h2 id="例子">例子</h2> + +<pre class="brush: js">// <div> +// <span id="childSpan">foo bar</span> +// </div> + +// 创建一个空的span元素节点 +// 没有id,没有任何属性和内容 +var sp1 = document.createElement("span"); + +// 添加一个id属性,值为'newSpan' +sp1.setAttribute("id", "newSpan"); + +// 创建一个文本节点 +var sp1_content = document.createTextNode("新的span元素的内容."); + +// 将文本节点插入到span元素中 +sp1.appendChild(sp1_content); + +// 获得被替换节点和其父节点的引用. +var sp2 = document.getElementById("childSpan"); +var parentDiv = sp2.parentNode; + +// 用新的span元素sp1来替换掉sp2 +parentDiv.replaceChild(sp1, sp2); + +// 结果: +// <div> +// <span id="newSpan">新的span元素的内容.</span> +// </div> +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-node-replacechild", "Node: replaceChild")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Node.replaceChild")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("Node.removeChild")}}</li> + <li>{{domxref("ChildNode.replaceWith")}}</li> +</ul> diff --git a/files/zh-cn/web/api/node/rootnode/index.html b/files/zh-cn/web/api/node/rootnode/index.html new file mode 100644 index 0000000000..1a72ff3cae --- /dev/null +++ b/files/zh-cn/web/api/node/rootnode/index.html @@ -0,0 +1,114 @@ +--- +title: Node.rootNode +slug: Web/API/Node/rootNode +tags: + - API + - DOM + - Node + - Property + - Reference + - rootNode +translation_of: Web/API/Node/getRootNode +--- +<p>{{deprecated_header}}{{APIRef("DOM")}}{{SeeCompatTable}}</p> + +<p><code><strong>Node.rootNode</strong></code> 是 {{domxref("Node")}} 的一个只读属性, 返回该节点所在 DOM 数的根节点(最高节点). 此属性是通过 {{domxref("Node.parentNode")}} 属性循环查找直到找到根节点.</p> + +<div class="warning"> +<p><strong>注意</strong>: 由于某种原因, 此属性已经被 {{domxref("Node.getRootNode()")}} 方法替代.</p> +</div> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre><var>rootNode</var> = <em>node</em>.rootNode; +</pre> + +<h3 id="返回值"> 返回值</h3> + +<p>返回 {{domxref("Node")}} 对象.</p> + +<h2 id="Example" name="Example">样例</h2> + +<p>下面是输出<code>body</code>的根节点样例:</p> + +<pre class="brush: js">console.log(document.body.rootNode);</pre> + +<h2 id="Notes" name="Notes">参考</h2> + +<p></p><p>Gecko内核的浏览器会在源代码中标签内部有空白符的地方插入一个文本结点到文档中.因此,使用诸如 + <a href="/zh-CN/docs/Web/API/Node/firstChild" title="Node.firstChild 只读属性返回树中节点的第一个子节点，如果节点是无子节点，则返回 null。"><code>Node.firstChild</code></a> 和 <a href="/zh-CN/docs/Web/API/Node/previousSibling" title="返回当前节点的前一个兄弟节点,没有则返回null."><code>Node.previousSibling</code></a> 之类的方法可能会引用到一个空白符文本节点, + 而不是使用者所预期得到的节点.</p> + + <p>详情请参见 <a class="new" href="/zh-CN/docs/Whitespace_in_the_DOM" rel="nofollow">DOM 中的空白符</a> + 和<a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: 为什么一些文本节点是空的</a>.</p><p></p> + +<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>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</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>{{CompatUnknown}}</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 此属性已经废弃, 使用{{domxref("Node.getRootNode()")}} 方法替代.</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">样式</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-node-rootnode', 'Node.rootNode')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>初始定义</td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/api/node/setuserdata/index.html b/files/zh-cn/web/api/node/setuserdata/index.html new file mode 100644 index 0000000000..2729b79c50 --- /dev/null +++ b/files/zh-cn/web/api/node/setuserdata/index.html @@ -0,0 +1,103 @@ +--- +title: Node.setUserData() +slug: Web/API/Node/setUserData +translation_of: Web/API/Node/setUserData +--- +<p>{{ APIRef }}{{ obsolete_header() }}</p> +<p>The <code><strong>Node.setUserData()</strong></code> method allows a user to attach (or remove) data to an element, without needing to modify the DOM. Note that such data will not be preserved when imported via {{domxref("Node.importNode")}}, as with {{domxref("Node.cloneNode()")}} and {{domxref("Node.renameNode()")}} operations (though {{domxref("Node.adoptNode")}} does preserve the information), and equality tests in {{domxref("Node.isEqualNode()")}} do not consider user data in making the assessment.</p> +<p>This method offers the convenience of associating data with specific nodes without needing to alter the structure of a document and in a standard fashion, but it also means that extra steps may need to be taken if one wishes to serialize the information or include the information upon clone, import, or rename operations.</p> +<div class="note"> + <p>The <code>Node.getUserData</code> and {{domxref("Node.setUserData")}} methods are no longer available from Web content. {{domxref("Element.dataset")}} or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/WeakMap"><code>WeakMap</code></a> can be used instead.</p> +</div> +<h2 id="Syntax">Syntax</h2> +<pre class="syntaxbox"><em>prevUserData = someNode</em>.setUserData(<em>userKey</em>, <em>userData</em>, <em>handler</em>);</pre> +<h3 id="Parameters">Parameters</h3> +<ul> + <li><code>userKey</code> is used as the key by which one may subsequently obtain the stored data. More than one key can be set for a given node.</li> + <li><code>handler</code> is a callback which will be called any time the node is being cloned, imported, renamed, as well as if deleted or adopted; a function can be used or an object implementing the <code>handle</code> method (part of the {{domxref("UserDataHandler")}} interface). The handler will be passed five arguments: an operation type integer (e.g., 1 to indicate a clone operation), the user key, the data on the node, the source node (<code>null</code> if being deleted), the destination node (the newly created node or <code>null</code> if none).If no handler is desired, one must specify <code>null</code>.</li> + <li><code>userData</code> is the object to associate to <code>userKey</code> on someNode. If <code>null</code>, any previously registered object and UserDataHandler associated to <code>userKey</code> on this node will be removed.</li> +</ul> +<h2 id="Example">Example</h2> +<pre class="brush: js">var d = document.implementation.createDocument('', 'test', null); +d.documentElement.setUserData('key', 15, {handle:function (o, k, d, s, ds) {alert(o+'::'+k+'::'+d+'::'+s+'::'+ds)}}); // 2::key::15::[object Element]::[object Element] +alert(d.documentElement.getUserData('key')); // 15 +var e = document.importNode(d.documentElement, true); // causes handler to be called +alert(e.getUserData('key')); // null since user data is not copied +</pre> +<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', '#interface-node', 'Node')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Removed from the specification.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#Node3-setUserData', 'Node.setUserData()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> +<h2 id="Browser_compatibility">Browser compatibility</h2> +<p>{{CompatibilityTable}}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br> + Removed in {{CompatGeckoDesktop("22.0")}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</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>{{CompatNo}}</td> + <td>Supported from {{CompatGeckoMobile("1.0")}} to {{CompatGeckoMobile("21.0")}}.<br> + Removed in {{CompatGeckoMobile("22.0")}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> + </table> +</div> +<p>[1] The method is still available from chrome scripts.</p> +<h2 id="See_also">See also</h2> +<ul> + <li>{{domxref("Node.getUserData()")}}</li> + <li>{{domxref("UserDataHandler")}}</li> + <li>{{domxref("DOMUserData")}}</li> +</ul> diff --git a/files/zh-cn/web/api/node/textcontent/index.html b/files/zh-cn/web/api/node/textcontent/index.html new file mode 100644 index 0000000000..1a2cd275e7 --- /dev/null +++ b/files/zh-cn/web/api/node/textcontent/index.html @@ -0,0 +1,145 @@ +--- +title: Node.textContent +slug: Web/API/Node/textContent +tags: + - Node.textContent + - innerHTML + - innerText + - 参考 +translation_of: Web/API/Node/textContent +--- +<div>{{APIRef("DOM")}}</div> + +<p>{{domxref ("Node")}} 接口的<strong> </strong><code><strong>textContent</strong></code> 属性表示一个节点及其后代的文本内容。</p> + +<div class="blockIndicator note"> +<p><strong>注意:</strong> <code>textContent</code> 和 {{domxref("HTMLElement.innerText")}} 容易混淆，但这两个属性在<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/API/Node/textContent#与_innerText_的区别">重要方面有不同之处</a> 。</p> +</div> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre>let <var>text</var> = <var>someNode</var>.textContent; +<var>someOtherNode</var>.textContent = <var>string</var>;</pre> + +<h3 id="返回值">返回值</h3> + +<p>一个字符串或 <code>null</code>.</p> + +<h2 id="Notes" name="Notes">描述</h2> + +<p><code>textContent</code> 的值取决于具体情况：</p> + +<ul> + <li>如果节点是一个 {{domxref("document")}}，或者一个 <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/Doctype">DOCTYPE</a> ，则 <code>textContent</code> 返回 <code>null</code>。 + + <div class="blockIndicator note"> + <p>如果你要获取整个文档的文本以及 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/CDATASection">CDATA data</a> ，可以使用 <code><a href="/zh-CN/docs/DOM/document.documentElement" title="DOM/document.documentElement">document.documentElement</a>.textContent</code>。</p> + </div> + </li> + <li>如果节点是个 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/CDATASection">CDATA section</a>、注释、<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/ProcessingInstruction">processing instruction</a> 或者 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Document/createTextNode">text node</a>，<code>textContent</code> 返回节点内部的文本内容，例如 {{domxref("Node.nodeValue")}}。</li> + <li>对于其他节点类型，<code>textContent</code> 将所有子节点的 <code>textContent</code> 合并后返回，除了注释和processing instructions。（如果该节点没有子节点的话，返回一个空字符串。）</li> +</ul> + +<p>在节点上设置 <code>textContent</code> 属性的话，会删除它的所有子节点，并替换为一个具有给定值的文本节点。</p> + +<h3 id="与_innerText_的区别">与 <strong>innerText </strong>的区别</h3> + +<p>不要被 <code>Node.textContent</code> 和 {{domxref("HTMLElement.innerText")}} 的区别搞混了。虽然名字看起来很相似，但有重要的不同之处：</p> + +<ul> + <li><code>textContent</code> 会获取<em>所有</em>元素的内容，包括 {{HTMLElement("script")}} 和 {{HTMLElement("style")}} 元素，然而 <code>innerText</code><strong> </strong>只展示给人看的元素。</li> + <li><code>textContent</code> 会返回节点中的每一个元素。相反，<code>innerText</code> 受 CSS 样式的影响，并且不会返回隐藏元素的文本， + <ul> + <li>此外，由于 <code>innerText</code> 受 CSS 样式的影响，它会触发回流（ <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/Reflow">reflow</a> ）去确保是最新的计算样式。（回流在计算上可能会非常昂贵，因此应尽可能避免。）</li> + </ul> + </li> + <li><font face="Open Sans, Arial, sans-serif">与 </font><code>textContent</code> 不同的是, 在 Internet Explorer (小于和等于 11 的版本) 中对 <code>innerText</code> 进行修改， 不仅会移除当前元素的子节点，而且还会<em>永久性地破坏</em>所有后代文本节点。在之后不可能再次将节点再次插入到任何其他元素或同一元素中。</li> +</ul> + +<h3 id="与_innerHTML_的区别">与 <strong>innerHTML </strong>的区别</h3> + +<p>正如其名称，{{domxref("Element.innerHTML")}} 返回 HTML。通常，为了在元素中检索或写入文本，人们使用 <code>innerHTML</code>。但是，<code>textContent</code> 通常具有更好的性能，因为文本不会被解析为HTML。</p> + +<p>此外，使用 <code>textContent</code> 可以防止 <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">XSS 攻击</a>。</p> + +<h2 id="Example" name="Example">例子</h2> + +<p class="brush: js">给出这个 HTML 片段:</p> + +<pre class="brush: js"><div id="divA">This is <span>some</span> text!</div></pre> + +<p>你可以使用 <code>textContent</code> 去获取该元素的文本内容：</p> + +<pre class="brush: js">let text = document.getElementById('divA').textContent; +// The text variable is now: 'This is some text!'</pre> + +<p>或者设置元素的文字内容：</p> + +<pre class="brush: js">document.getElementById('divA').textContent = 'This text is different!'; +// The HTML for divA is now: +// <div id="divA">This text is different!</div></pre> + +<h2 id="IE8_的替代方法">IE8 的替代方法</h2> + +<pre class="brush: js">// Source: Eli Grey @ https://eligrey.com/blog/post/textcontent-in-ie8 +if (Object.defineProperty + && Object.getOwnPropertyDescriptor + && Object.getOwnPropertyDescriptor(Element.prototype, "textContent") + && !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) { + (function() { + var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText"); + Object.defineProperty(Element.prototype, "textContent", + // Passing innerText or innerText.get directly does not work, + // wrapper function is required. + { + get: function() { + return innerText.get.call(this); + }, + set: function(s) { + return innerText.set.call(this, s); + } + } + ); + })(); +}</pre> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Node.textContent")}}</p> + +<h2 id="Specification" name="Specification">规范</h2> + +<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-node-textcontent','Node.textContent')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>No change vs. DOM4</td> + </tr> + <tr> + <td>{{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Introduced</td> + </tr> + </tbody> +</table> + +<h2 id="相关链接" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">相关链接</h2> + +<ul> + <li>{{domxref("HTMLElement.innerText")}}</li> + <li>{{domxref("Element.innerHTML")}}</li> + <li><a href="http://perfectionkills.com/the-poor-misunderstood-innerText/">More on differences between <code>innerText</code> and <code>textContent</code></a> (blog post)</li> +</ul> |