diff options
Diffstat (limited to 'files/vi/web/api/node')
| -rw-r--r-- | files/vi/web/api/node/index.html | 373 | ||||
| -rw-r--r-- | files/vi/web/api/node/insertbefore/index.html | 166 | ||||
| -rw-r--r-- | files/vi/web/api/node/parentelement/index.html | 50 | ||||
| -rw-r--r-- | files/vi/web/api/node/parentnode/index.html | 63 |
4 files changed, 652 insertions, 0 deletions
diff --git a/files/vi/web/api/node/index.html b/files/vi/web/api/node/index.html new file mode 100644 index 0000000000..0d23b9445d --- /dev/null +++ b/files/vi/web/api/node/index.html @@ -0,0 +1,373 @@ +--- +title: Node +slug: Web/API/Node +tags: + - API + - DOM + - DOM Reference + - NeedsTranslation + - Reference + - TopicStub + - WebAPI +translation_of: Web/API/Node +--- +<div>{{APIRef("DOM")}}</div> + +<p>A <strong><code>Node</code></strong> is an interface from which a number of DOM types inherit, and allows these various types to be treated (or tested) similarly.</p> + +<p>The following interfaces all inherit from <code>Node</code> its methods and properties: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} (which {{domxref("Text")}}, {{domxref("Comment")}}, and {{domxref("CDATASection")}} inherit), {{domxref("ProcessingInstruction")}}, {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}}, {{domxref("EntityReference")}}</p> + +<p>These interfaces may return null in particular cases where the methods and properties are not relevant. They may throw an exception - for example when adding children to a node type for which no children can exist.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>Inherits properties from its parents {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p> + +<dl> + <dt>{{domxref("Node.baseURI")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} representing the base URL. The concept of base URL changes from one language to another; in HTML, it corresponds to the protocol, the domain name and the directory structure, that is all until the last <code>'/'</code>.</dd> + <dt>{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}} {{ Fx_minversion_inline("3") }}</dt> + <dd>(Not available to web content.) The read-only {{ Interface("nsIURI") }} object representing the base URI for the element.</dd> + <dt>{{domxref("Node.childNodes")}} {{readonlyInline}}</dt> + <dd>Returns a live {{domxref("NodeList")}} containing all the children of this node. {{domxref("NodeList")}} being live means that if the children of the <code>Node</code> change, the {{domxref("NodeList")}} object is automatically updated.</dd> + <dt>{{domxref("Node.firstChild")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} representing the first direct child node of the node, or <code>null</code> if the node has no child.</dd> + <dt>{{domxref("Node.lastChild")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} representing the last direct child node of the node, or <code>null</code> if the node has no child.</dd> + <dt>{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} representing the local part of the qualified name of an element. In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML. {{ gecko_minversion_inline("1.9.2") }}<br> + Though recent specifications require <code>localName</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd> + <dt>{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}</dt> + <dd>The namespace URI of this node, or <code>null</code> if it is no namespace. In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2") }}<br> + Though recent specifications require <code>namespaceURI</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd> + <dt>{{domxref("Node.nextSibling")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} representing the next node in the tree, or <code>null</code> if there isn't such node.</dd> + <dt>{{domxref("Node.nodeName")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} containing the name of the <code>Node</code>. The structure of the name will differ with the name type. E.g. An {{domxref("HTMLElement")}} will contain the name of the corresponding tag, like <code>'audio'</code> for an {{domxref("HTMLAudioElement")}}, a {{domxref("Text")}} node will have the <code>'#text'</code> string, or a {{domxref("Document")}} node will have the <code>'#document'</code> string.</dd> + <dt>{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}{{ Fx_minversion_inline("3") }}</dt> + <dd>A {{ Interface("nsIPrincipal") }} representing the node principal.</dd> + <dt>{{domxref("Node.nodeType")}}{{readonlyInline}}</dt> + <dd>Returns an <code>unsigned short</code> representing the type of the node. Possible values are: + <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> {{deprecated_inline()}}</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>Is a {{domxref("DOMString")}} representing the value of an object. For most <code>Node</code> types, this returns <code>null</code> and any set operation is ignored. For nodes of type <code>TEXT_NODE</code> ({{domxref("Text")}} objects), <code>COMMENT_NODE</code> ({{domxref("Comment")}} objects), and <code>PROCESSING_INSTRUCTION_NODE</code> ({{domxref("ProcessingInstruction")}} objects), the value corresponds to the text data contained in the object.</dd> + <dt>{{domxref("Node.ownerDocument")}} {{readonlyInline}}</dt> + <dd>Returns the {{domxref("Document")}} that this node belongs to. If no document is associated with it, returns <code>null</code>.</dd> + <dt>{{domxref("Node.parentNode")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} that is the parent of this node. If there is no such node, like if this node is the top of the tree or if doesn't participate in a tree, this property returns <code>null</code>.</dd> + <dt>{{domxref("Node.parentElement")}} {{readonlyInline}}</dt> + <dd>Returns an {{domxref("Element")}} that is the parent of this node. If the node has no parent, or if that parent is not an {{domxref("Element")}}, this property returns <code>null</code>.</dd> + <dt>{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the namespace prefix of the node, or <code>null</code> if no prefix is specified.<br> + Though recent specifications require <code>prefix</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd> + <dt>{{domxref("Node.previousSibling")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} representing the previous node in the tree, or <code>null</code> if there isn't such node.</dd> + <dt>{{domxref("Node.textContent")}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the textual content of an element and all its descendants.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>Inherits methods from its parents {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p> + +<dl> + <dt>{{domxref("Node.appendChild()")}}</dt> + <dd>Insert a {{domxref("Node")}} as the last child node of this element.</dd> + <dt>{{domxref("Node.cloneNode()")}}</dt> + <dd>Clone a {{domxref("Node")}}, and optionally, all of its contents. By default, it clones the content of the node.</dd> + <dt>{{domxref("Node.compareDocumentPosition()")}}</dt> + <dd> </dd> + <dt>{{domxref("Node.contains()")}}</dt> + <dd> </dd> + <dt>{{domxref("Node.getFeature()")}} {{obsolete_inline}}</dt> + <dd>...</dd> + <dt>{{domxref("Node.getUserData()")}} {{obsolete_inline}}</dt> + <dd>Allows a user to get some {{domxref("DOMUserData")}} from the node.</dd> + <dt>{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}</dt> + <dd>Returns a {{domxref("Boolean")}} indicating if the element has any attributes, or not.</dd> + <dt>{{domxref("Node.hasChildNodes()")}}</dt> + <dd>Returns a {{domxref("Boolean")}} indicating if the element has any child nodes, or not.</dd> + <dt>{{domxref("Node.insertBefore()")}}</dt> + <dd>Inserts the first {{domxref("Node")}} given in a parameter immediately before the second, child of this element, {{domxref("Node")}}.</dd> + <dt>{{domxref("Node.isDefaultNamespace()")}}</dt> + <dd> </dd> + <dt>{{domxref("Node.isEqualNode()")}}</dt> + <dd> </dd> + <dt>{{domxref("Node.isSameNode()")}} {{obsolete_inline}}</dt> + <dd> </dd> + <dt>{{domxref("Node.isSupported()")}} {{obsolete_inline}}</dt> + <dd>Returns a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a> flag containing the result of a test whether the DOM implementation implements a specific feature and this feature is supported by the specific node.</dd> + <dt>{{domxref("Node.lookupPrefix()")}}</dt> + <dd> </dd> + <dt>{{domxref("Node.lookupNamespaceURI()")}}</dt> + <dd> </dd> + <dt>{{domxref("Node.normalize()")}}</dt> + <dd>Clean up all the text nodes under this element (merge adjacent, remove empty).</dd> + <dt>{{domxref("Node.removeChild()")}}</dt> + <dd>Removes a child node from the current element, which must be a child of the current node.</dd> + <dt>{{domxref("Node.replaceChild()")}}</dt> + <dd>Replaces one child {{domxref("Node")}} of the current one with the second one given in parameter.</dd> + <dt>{{domxref("Node.setUserData()")}} {{obsolete_inline}}</dt> + <dd>Allows a user to attach, or remove, {{domxref("DOMUserData")}} to the node.</dd> + <dd> </dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="Browse_all_child_nodes">Browse all child nodes</h3> + +<p>The following function recursively cycles all child nodes of a node and executes a callback function upon them (and upon the parent node itself).</p> + +<pre class="brush: js">function DOMComb (oParent, oCallback) { + if (oParent.hasChildNodes()) { + for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) { + DOMComb(oNode, oCallback); + } + } + oCallback.call(oParent); +}</pre> + +<h4 id="Syntax">Syntax</h4> + +<pre>DOMComb(parentNode, callbackFunction);</pre> + +<h4 id="Description">Description</h4> + +<p>Recursively cycle all child nodes of <code>parentNode</code> and <code>parentNode</code> itself and execute the <code>callbackFunction</code> upon them as <a href="/en-US/docs/JavaScript/Reference/Operators/this" title="en-US/docs/JavaScript/Reference/Operators/this"><code>this</code></a> objects.</p> + +<h4 id="Parameters">Parameters</h4> + +<dl> + <dt><code>parentNode</code></dt> + <dd>The parent node (<code><strong>Node</strong> <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object" title="en-US/docs/JavaScript/Reference/Global_Objects/Object">Object</a></code>).</dd> + <dt><code>callbackFunction</code></dt> + <dd>The callback function (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a>).</dd> +</dl> + +<h4 id="Sample_usage">Sample usage</h4> + +<p>The following example send to the <code>console.log</code> the text content of the body:</p> + +<pre class="brush: js">function printContent () { + if (this.nodeValue) { console.log(this.nodeValue); } +} + +onload = function () { + DOMComb(document.body, printContent); +};</pre> + +<h3 id="Remove_all_children_nested_within_a_node">Remove all children nested within a node</h3> + +<pre class="brush: js">Element.prototype.removeAll = function () { + while (this.firstChild) { this.removeChild(this.firstChild); } + return this; +};</pre> + +<h4 id="Sample_usage_2">Sample usage</h4> + +<pre class="brush: js">/* ... an alternative to document.body.innerHTML = "" ... */ +document.body.removeAll();</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 the following properties: <code>attributes</code>, <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br> + Removed the following methods: <code>isSupported()</code>, <code>hasAttributes()</code>, <code>isSameNode()</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>The methods <code>insertBefore()</code>, <code>replaceChild()</code>, <code>removeChild()</code>, and <code>appendChild()</code> returns one more kind of error (<code>NOT_SUPPORTED_ERR</code>) if called on a {{domxref("Document")}}.<br> + The <code>normalize()</code> method has been modified so that {{domxref("Text")}} node can also be normalized if the proper {{domxref("DOMConfiguration")}} flag is set.<br> + Added the following methods: <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> + Added the following properties: <code>baseURI</code> and <code>textContent</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>The <code>ownerDocument</code> property was slightly modified so that {{domxref("DocumentFragment")}} also returns <code>null</code>.<br> + Added the following properties: <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br> + Added the following methods: <code>normalize()</code>, <code>isSupported()</code> and <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> + +<p> </p> + +<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>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>getFeature()</code>{{obsolete_inline}}</td> + <td>{{CompatNo}}</td> + <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("6.0")}}.<br> + Removed in {{CompatGeckoDesktop("7.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>getUserData()</code>, <code>setUserData()</code> and <code>hasAttributes()</code> {{deprecated_inline}}</td> + <td>{{CompatNo}}</td> + <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br> + Removed in {{CompatGeckoDesktop("22.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>isSameNode()</code> {{obsolete_inline}}</td> + <td>{{CompatNo}}</td> + <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("9.0")}}.<br> + Removed in {{CompatGeckoDesktop("10.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>isSupported()</code> {{obsolete_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br> + Removed in {{CompatGeckoDesktop("22.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>attributes</code></td> + <td>{{CompatNo}}</td> + <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br> + Moved to {{domxref("Element")}} in {{CompatGeckoDesktop("22.0")}}</td> + <td>{{CompatNo}}</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>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>getFeature()</code>{{obsolete_inline}}</td> + <td>{{CompatNo}}</td> + <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("6.0")}}.<br> + Removed in {{CompatGeckoDesktop("7.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Webkit and Blink incorrectly do not make <code>Node</code> inherit from {{domxref("EventTarget")}}.</p> diff --git a/files/vi/web/api/node/insertbefore/index.html b/files/vi/web/api/node/insertbefore/index.html new file mode 100644 index 0000000000..f60a35f3e7 --- /dev/null +++ b/files/vi/web/api/node/insertbefore/index.html @@ -0,0 +1,166 @@ +--- +title: Node.insertBefore() +slug: Web/API/Node/insertBefore +translation_of: Web/API/Node/insertBefore +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Phương thức </span></font><strong>Node.insertBefore()</strong></code> chèn một nút trước nút tài liệu tham khảo như một đối tượng con của một đối tượng gốc (đối tượng bố mẹ) cụ thể . Nếu đối tượng con đã cho là một tham chiếu tới tới một đối tượng node đang tồn tại trong tài liệu , <code>insertBefore()</code> chuyển nó từ vị trí hiện tại tới vị trí mới (không có yêu cầu nào phải xoá cái nút từ node gốc của nó trước khi thêm nó vào mấy nút khác).</p> + +<p>Vậy có nghĩa là một node thì không thể đồng thời ở tại hai điểm của tài liệu . Vậy, nếu node đã có nguồn gốc của nó rồi thì đối tượng node sẽ bị chuyển đi trước tiên rồi sau đó bị chèn vào ở vị trí mới . {{domxref("Node.cloneNode()")}} có thể được sử dụng để tạo một bản sao của đối tượng node trước khi thêm nó vào dưới phần tử gốc mới. Hãy lưu ý rằng những bản sao được tạo nên cùng <code>cloneNode()</code> sẽ không được tự động đồng bộ hoá.</p> + +<p>Nếu tài liệu ttham chiếu node là <code>null thì</code> node cụ thể được thêm vào đuôi của danh sách tập con của đối tượng node gốc.</p> + +<p>Nếu đối tượng con đã cho là một {{domxref("DocumentFragment")}} thì toàn bộ nội dung của <code>DocumentFragment</code> sẽ được chuyển đến danh sách tập con của đối tượng gốc cụ thể.</p> + +<h2 id="Cú_pháp">Cú pháp</h2> + +<pre class="syntaxbox">var <em>insertedNode</em> = <em>parentNode</em>.insertBefore(<em>newNode</em>, <em>referenceNode</em>); +</pre> + +<ul> + <li><code>insertedNode</code> đối tượng node đã bị chèn vào bởi <code>newNode</code></li> + <li><code>parentNode</code> đối tượng phần tử gốc mới được chèn node vào.</li> + <li><code>newNode</code> đối tượng node bị chèn</li> + <li><code>referenceNode</code> đối tượng node lúc trước mà <code>newNode</code> bị chèn vào.</li> +</ul> + +<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Nếu </span></font>referenceNode</code> là <code>null</code> thì <code>newNode</code> isẽ được chèn vào đuôi của danh sách các đối tượng tập con nodes .</p> + +<div class="note"> +<p><code>referenceNode</code> <strong>không phải </strong> là một tham số có thể tuỳ chọn -- bạn phải đưa ra một <code>Node</code> hoặc <code>null</code>. Việc cung cấp nó thất bại hoặc đưa ra những giá trị không hợp lệ có thể sẽ <a href="https://code.google.com/p/chromium/issues/detail?id=419780">behave</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=119489">differently</a>( hành xử khác nhau) trong mỗi phiên bản công cụ tìm kiếm khác nhau.</p> +</div> + +<h3 id="Return_value">Return value</h3> + +<p>Giá trị được trả về sẽ là một phần tử con trừ khi <code>newNode</code> là một {{domxref("DocumentFragment")}}, trong trường hợp {{domxref("DocumentFragment")}} rỗng được trả về.</p> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<h3 id="Example_1">Example 1</h3> + +<pre class="brush: html"><div id="parentElement"> + <span id="childElement">foo bar</span> +</div> + +<script> +// Create the new node to insert +var newNode = document.createElement("span"); + +// Get a reference to the parent node +var parentDiv = document.getElementById("childElement").parentNode; + +// Begin test case [ 1 ] : Exist a childElement --> All working correctly +var sp2 = document.getElementById("childElement"); +parentDiv.insertBefore(newNode, sp2); +// End test case [ 1 ] + +// Begin test case [ 2 ] : childElement is of Type undefined +var sp2 = undefined; // Not exist a node of id "childElement" +parentDiv.insertBefore(newNode, sp2); // Implicit dynamic cast to type Node +// End test case [ 2 ] + +// Begin test case [ 3 ] : childElement is of Type "undefined" ( string ) +var sp2 = "undefined"; // Not exist a node of id "childElement" +parentDiv.insertBefore(newNode, sp2); // Generate "Type Error: Invalid Argument" +// End test case [ 3 ] +</script> +</pre> + +<h3 id="Example_2">Example 2</h3> + +<pre class="brush:html"><div id="parentElement"> + <span id="childElement">foo bar</span> +</div> + +<script> +// Create a new, plain <span> element +var sp1 = document.createElement("span"); + +// Get a reference to the element, before we want to insert the element +var sp2 = document.getElementById("childElement"); +// Get a reference to the parent element +var parentDiv = sp2.parentNode; + +// Insert the new element into the DOM before sp2 +parentDiv.insertBefore(sp1, sp2); +</script></pre> + +<p>Không hề có phương thức <span style="background-color: #ffffff; font-family: Arial,x-locale-body,sans-serif; font-size: 1rem; letter-spacing: -0.00278rem;"> </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">insertAfter()</code><span style="background-color: #ffffff; font-family: Arial,x-locale-body,sans-serif; font-size: 1rem; letter-spacing: -0.00278rem;"> nào cả. Nó có thể được mô phỏng bởi phương thức </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">insertBefore</code><span style="background-color: #ffffff; font-family: Arial,x-locale-body,sans-serif; font-size: 1rem; letter-spacing: -0.00278rem;"> cùng với {{domxref("Node.nextSibling")}}.</span></p> + +<p>Trong ví dụ trước, <code>sp1</code> đã chèn được vào sau <code>sp2</code> bằng cách dùng :</p> + +<pre class="brush: js"><code>parentDiv.insertBefore(sp1, sp2.nextSibling);</code></pre> + +<p>Nếu <code>sp2</code> không có đối tượng anh em nào tiếp nữa , thì nó hẳn phải là đối tượng con cuối cùng — <code>sp2.nextSibling</code> trả về <code>null</code>, và <code>sp1</code> sẽ được chèn vào cuối cùng của danh sách tập node con (ngay sau <code>sp2</code>).</p> + +<h3 id="Example_3">Example 3</h3> + +<p>Chèn một phần tử vào phần tử con đứng đầu bằng cách dùng đặc tính <a href="/en-US/docs/DOM/Node.firstChild" title="Node.firstChild">firstChild</a>.</p> + +<pre class="brush:js">// Get a reference to the element in which we want to insert a new node +var parentElement = document.getElementById('parentElement'); +// Get a reference to the first child +var theFirstChild = parentElement.firstChild; + +// Create a new element +var newElement = document.createElement("div"); + +// Insert the new element before the first child +parentElement.insertBefore(newElement, theFirstChild);</pre> + +<p class="brush:js">Khi phần tử không có con cả (đối tượng con đầu tiên) thì <code>firstChild</code> là <code>null</code>. Phần tử vẫn được thêm vào bố mẹ đối tượng gốc, sau con út (đối tượng con cuối cùng). Bởi bố mẹ không có con cả nên nó cũng không có con út luôn. Như vậy, phần tử mới sẽ là phần tử duy nhất sau việc chia cắt.</p> + +<h2 id="Khả_năng_tương_thích_của_công_cụ_tìm_kiếm">Khả năng tương thích của công cụ tìm kiếm</h2> + +<div class="hidden">Mục khả năng tương thích trên trang này được tạo bởi dữ liệu được kết cấu. Nếu bạn muốn đóng góp tới dữ liệu, xin hãy truy cập thử <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> và gửi một pull request cho chúng tôi.</div> + +<p>{{Compat("api.Node.insertBefore")}}</p> + +<h2 id="Chi_tiết">Chi tiết</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="Xem_thêm">Xem thêm</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/vi/web/api/node/parentelement/index.html b/files/vi/web/api/node/parentelement/index.html new file mode 100644 index 0000000000..7e1e081325 --- /dev/null +++ b/files/vi/web/api/node/parentelement/index.html @@ -0,0 +1,50 @@ +--- +title: Node.parentElement +slug: Web/API/Node/parentElement +tags: + - API + - Cần tương thích trình duyệt + - Mô hình Đối tượng Văn bản + - Nút + - Thuộc tính +translation_of: Web/API/Node/parentElement +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p>Thuộc tính chỉ-đọc <code><strong>Node.parentElement</strong></code> trả về cha của nút DOM {{domxref("Element")}}, hoặc<code>null</code> nếu nút không có cha hoặc cha của nó không là {{domxref("Element")}} DOM.</p> + +<h2 id="Syntax" name="Syntax">Cú pháp</h2> + +<pre class="syntaxbox"><em>parentElement</em> = <em>node</em>.parentElement</pre> + +<p><code>parentElement</code> là thành phần cha của nút hiện tại. Nó luôn luôn là một đối tượng {{domxref("Element")}} DOM, hoặc <code>null</code>.</p> + +<h2 id="Example" name="Example">Ví dụ</h2> + +<pre class="brush:js">if (node.parentElement) { + node.parentElement.style.color = "red"; +}</pre> + +<h2 id="Tương_thích_trình_duyệt">Tương thích trình duyệt</h2> + +<p>Trên một vài trình duyệt, thuộc tính <code>parentElement</code> chỉ được xác định trên những nút mà chính nó là một {{domxref("Element")}}. Đặc biệt, nó không xác định trên các nút văn bản.</p> + +<div> + + +<p>{{Compat("api.Node.parentElement")}}</p> +</div> + +<h2 id="Specification" name="Specification">Thông số</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="See_also" name="See_also">Xem thêm</h2> + +<ul> + <li>{{domxref("Node.parentNode")}}</li> +</ul> diff --git a/files/vi/web/api/node/parentnode/index.html b/files/vi/web/api/node/parentnode/index.html new file mode 100644 index 0000000000..a93e4d8ac9 --- /dev/null +++ b/files/vi/web/api/node/parentnode/index.html @@ -0,0 +1,63 @@ +--- +title: Node.parentNode +slug: Web/API/Node/parentNode +tags: + - API + - Gecko + - Mô hình Đối tượng Tài liệu + - Thuộc tính +translation_of: Web/API/Node/parentNode +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p> </p> + +<p>Thuộc tính chỉ-đọc <code><strong>Node.parentNode</strong></code> trả về cha của một nút xác định trong DOM.</p> + +<h2 id="Syntax" name="Syntax">Cú pháp</h2> + +<pre class="syntaxbox"><em>parentNode</em> = <em>node</em>.parentNode +</pre> + +<p><code>parentNode</code> là cha của nút hiện tại. Cha của một phần tử là một nút <code>Element</code>,một nút <code>Document</code>, hoặc một nút <code>DocumentFragment</code>.</p> + +<h2 id="Example" name="Example">Ví dụ</h2> + +<pre class="brush:js">if (node.parentNode) { + // loại bỏ một nút khỏi cây, trừ khi + // nó không nằm trong cây + node.parentNode.removeChild(node); +}</pre> + +<h2 id="Notes" name="Notes">Chú ý</h2> + +<p>Các <a href="/en-US/docs/DOM/Node.nodeType" title="DOM/Node.nodeType">nodes</a> <code>Document</code> và <code>DocumentFragment</code> có thể không có cha, vì vậy <code>parentNode</code> có thể luôn trả về giá trị <code>null</code>.</p> + +<p>Nó cũng trả về <code>null</code> nếu nút vừa được tạo và chưa được đính vào cây.</p> + +<h2 id="Tương_thích_trình_duyệt">Tương thích trình duyệt</h2> + + + +<p>{{Compat("api.Node.parentNode")}}</p> + +<h2 id="Specification" name="Specification">Thông số</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317">DOM Level 2 Core: Node.parentNode</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1060184317">DOM Level 3 Core: Node.parentNode</a></li> +</ul> + +<h2 id="See_also" name="See_also">Xem thêm</h2> + +<ul> + <li>{{Domxref("Node.firstChild")}}</li> + <li>{{Domxref("Node.lastChild")}}</li> + <li>{{Domxref("Node.childNodes")}}</li> + <li>{{Domxref("Node.nextSibling")}}</li> + <li>{{Domxref("Node.parentElement")}}</li> + <li>{{Domxref("Node.previousSibling")}}</li> + <li>{{Domxref("Node.removeChild")}}</li> +</ul> |