diff options
author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/ar/web/api/node | |
parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
download | translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2 translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip |
remove retired locales (#699)
Diffstat (limited to 'files/ar/web/api/node')
-rw-r--r-- | files/ar/web/api/node/index.html | 381 | ||||
-rw-r--r-- | files/ar/web/api/node/removechild/index.html | 144 |
2 files changed, 0 insertions, 525 deletions
diff --git a/files/ar/web/api/node/index.html b/files/ar/web/api/node/index.html deleted file mode 100644 index ddebb32cb9..0000000000 --- a/files/ar/web/api/node/index.html +++ /dev/null @@ -1,381 +0,0 @@ ---- -title: Node -slug: Web/API/Node -tags: - - API - - DOM - - Interface - - NeedsTranslation - - Node - - Reference - - TopicStub -translation_of: Web/API/Node ---- -<p>{{APIRef("DOM")}}</p> - -<p><span class="seoSummary">The {{Glossary("DOM")}} <strong><code>Node</code></strong> interface is a key base class upon which many other DOM API objects are based, thus letting those object types to be used similarly and often interchangeably.</span> Key among the interfaces which inherit the features of <code>Node</code> are {{domxref("Document")}} and {{domxref("Element")}}. However, all of the following also inherit methods and properties from <code>Node</code>: {{DOMxRef("Attr")}}, {{DOMxRef("CharacterData")}} (which {{DOMxRef("Text")}}, {{DOMxRef("Comment")}}, and {{DOMxRef("CDATASection")}} are all based on), {{DOMxRef("ProcessingInstruction")}}, {{DOMxRef("DocumentFragment")}}, {{DOMxRef("DocumentType")}}, {{DOMxRef("Notation")}}, {{DOMxRef("Entity")}}, and {{DOMxRef("EntityReference")}}.</p> - -<p>In some cases, a particular feature of <code>Node</code> may not apply to a particular interface based on it; in that case, the inheriting node may return <code>null</code> or throw an exception, depending on circumstances. For example, attempting to add children to a node type that cannot have children will throw an exception.</p> - -<p>{{InheritanceDiagram}}</p> - -<h2 id="Properties">Properties</h2> - -<p><em>Inherits properties from its parent, {{DOMxRef("EventTarget")}}</em>.<sup>[1]</sup></p> - -<dl> - <dt>{{DOMxRef("Node.baseURI")}}{{ReadOnlyInline}}</dt> - <dd>Returns a {{DOMxRef("DOMString")}} representing the base URL of the document containing the <code>Node</code>.</dd> - <dt>{{DOMxRef("Node.baseURIObject")}} {{Non-standard_inline}} {{ReadOnlyInline}}</dt> - <dd>(Not available to web content.) The {{ 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.isConnected")}}{{ReadOnlyInline}}</dt> - <dd>A boolean indicating whether or not the Node is connected (directly or indirectly) to the context object, e.g. the {{DOMxRef("Document")}} object in the case of the normal DOM, or the {{DOMxRef("ShadowRoot")}} in the case of a shadow DOM.</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.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 node 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.nodeType")}}{{ReadOnlyInline}}</dt> - <dd>Returns an <code>unsigned short</code> representing the type of the node. Possible values are: - <table class="standard-table"> - <thead> - <tr> - <th scope="col">Name</th> - <th scope="col">Value</th> - </tr> - </thead> - <tbody> - <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>Returns / Sets the value of the current node.</dd> - <dt>{{DOMxRef("Node.ownerDocument")}}{{ReadOnlyInline}}</dt> - <dd>Returns the {{DOMxRef("Document")}} that this node belongs to. If the node is itself a document, 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.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>Returns / Sets the textual content of an element and all its descendants.</dd> -</dl> - -<h3 id="Obsolete_properties">Obsolete properties</h3> - -<dl> - <dt>{{DOMxRef("Node.localName")}} {{Obsolete_Inline}}{{ReadOnlyInline}}</dt> - <dd>Returns a {{DOMxRef("DOMString")}} representing the local part of the qualified name of an element. - <div class="blockIndicator note"> - <p><strong>Note:</strong> 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.</p> - </div> - </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. - <div class="blockIndicator note"> - <p><strong>Note:</strong> 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="https://www.w3.org/1999/xhtml/">http://www.w3.org/1999/xhtml/</a></code> namespace in both HTML and XML trees.</p> - </div> - </dd> - <dt>{{DOMxRef("Node.nodePrincipal")}} {{Non-standard_inline}}{{Obsolete_Inline("gecko46")}}</dt> - <dd>A {{Interface("nsIPrincipal")}} representing the node principal.</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.</dd> - <dt>{{DOMxRef("Node.rootNode")}} {{Obsolete_Inline}}{{ReadOnlyInline}}</dt> - <dd>Returns a {{DOMxRef("Node")}} object representing the topmost node in the tree, or the current node if it's the topmost node in the tree. This has been replaced by {{DOMxRef("Node.getRootNode()")}}.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>Inherits methods from its parent, {{DOMxRef("EventTarget")}}</em>.<sup>[1]</sup></p> - -<dl> - <dt>{{DOMxRef("Node.appendChild()", "Node.appendChild(<var>childNode</var>)")}}</dt> - <dd>Adds the specified <code><var>childNode</var></code> argument as the last child to the current node.<br> - If the argument referenced an existing node on the DOM tree, the node will be detached from its current position and attached at the new position.</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>Compares the position of the current node against another node in any other document.</dd> - <dt>{{DOMxRef("Node.contains()")}}</dt> - <dd>Returns a {{jsxref("Boolean")}} value indicating whether or not a node is a descendant of the calling node.</dd> - <dt>{{domxref("Node.getBoxQuads()")}} {{experimental_inline}}</dt> - <dd>Returns a list of the node's CSS boxes relative to another node.</dd> - <dt>{{DOMxRef("Node.getRootNode()")}}</dt> - <dd>Returns the context object's root which optionally includes the shadow root if it is available. </dd> - <dt>{{DOMxRef("Node.hasChildNodes()")}}</dt> - <dd>Returns a {{jsxref("Boolean")}} indicating whether or not the element has any child nodes.</dd> - <dt>{{DOMxRef("Node.insertBefore()")}}</dt> - <dd>Inserts a {{DOMxRef("Node")}} before the reference node as a child of a specified parent node.</dd> - <dt>{{DOMxRef("Node.isDefaultNamespace()")}}</dt> - <dd>Accepts a namespace URI as an argument and returns a {{jsxref("Boolean")}} with a value of <code>true</code> if the namespace is the default namespace on the given node or <code>false</code> if not.</dd> - <dt>{{DOMxRef("Node.isEqualNode()")}}</dt> - <dd>Returns a {{jsxref("Boolean")}} which indicates whether or not two nodes are of the same type and all their defining data points match.</dd> - <dt>{{DOMxRef("Node.isSameNode()")}}</dt> - <dd>Returns a {{jsxref("Boolean")}} value indicating whether or not the two nodes are the same (that is, they reference the same object).</dd> - <dt>{{DOMxRef("Node.lookupPrefix()")}}</dt> - <dd>Returns a {{DOMxRef("DOMString")}} containing the prefix for a given namespace URI, if present, and <code>null</code> if not. When multiple prefixes are possible, the result is implementation-dependent.</dd> - <dt>{{DOMxRef("Node.lookupNamespaceURI()")}}</dt> - <dd>Accepts a prefix and returns the namespace URI associated with it on the given node if found (and <code>null</code> if not). Supplying <code>null</code> for the prefix will return the default namespace.</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> -</dl> - -<h3 id="Obsolete_methods">Obsolete methods</h3> - -<dl> - <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 {{jsxref("Boolean")}} indicating if the element has any attributes, or not.</dd> - <dt>{{DOMxRef("Node.isSupported()")}} {{Obsolete_Inline}}</dt> - <dd>Returns a {{jsxref("Boolean")}} 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.setUserData()")}} {{Obsolete_Inline}}</dt> - <dd>Allows a user to attach, or remove, {{DOMxRef("DOMUserData")}} to the node.</dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<h3 id="Remove_all_children_nested_within_a_node">Remove all children nested within a node</h3> - -<pre class="brush: js">function removeAllChildren(element) { - while (element.firstChild) { - element.removeChild(element.firstChild) - } -}</pre> - -<h4 id="Sample_usage">Sample usage</h4> - -<pre class="brush: js;">/* ... an alternative to document.body.innerHTML = "" ... */ -removeAllChildren(document.body)</pre> - -<h3 id="Recurse_through_child_nodes">Recurse through child nodes</h3> - -<p>The following function recursively calls a callback function for each node contained by a root node (including the root itself):</p> - -<pre class="brush: js;">function eachNode(rootNode, callback) { - if (!callback) { - const nodes = [] - eachNode(rootNode, function(node) { - nodes.push(node) - }) - return nodes - } - - if (false === callback(rootNode)) { - return false - } - - if (rootNode.hasChildNodes()) { - const nodes = rootNode.childNodes - for (let i = 0, l = nodes.length; i < l; ++i) { - if (false === eachNode(nodes[i], callback)) { - return - } - } - } -} -</pre> - -<h4 id="Syntax">Syntax</h4> - -<pre class="syntaxbox">eachNode(<var>rootNode</var>, <var>callback</var>)</pre> - -<h4 id="Description">Description</h4> - -<p>Recursively calls a function for each descendant node of <code><var>rootNode</var></code> (including the root itself).</p> - -<p>If <code><var>callback</var></code> is omitted, the function returns an {{jsxref("Array")}} instead, which contains <code><var>rootNode</var></code> and all nodes contained within.</p> - -<p>If <code><var>callback</var></code> is provided, and it returns {{jsxref("Boolean")}} <code>false</code> when called, the current recursion level is aborted, and the function resumes execution at the last parent's level. This can be used to abort loops once a node has been found (such as searching for a text node which contains a certain string).</p> - -<h4 id="Parameters">Parameters</h4> - -<dl> - <dt><code><var>rootNode</var></code></dt> - <dd>The <code>Node</code> object whose descendants will be recursed through.</dd> - <dt><code><var>callback</var></code> {{optional_inline}}</dt> - <dd>An optional callback <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function">function</a> that receives a <code>Node</code> as its only argument. If omitted, <code>eachNode</code> returns an {{jsxref("Array")}} of every node contained within <code><var>rootNode</var></code> (including the root itself).</dd> -</dl> - -<h4 id="Sample_usage_2">Sample usage</h4> - -<p>The following example prints the <a href="/en-US/docs/Web/API/Node/textContent"><code>textContent</code></a> properties of each <code><span></code> tag in a <code><div></code> element named <code>"box"</code>:</p> - -<pre class="brush: html;"><div id="box"> - <span>Foo</span> - <span>Bar</span> - <span>Baz</span> -</div></pre> - -<pre class="brush: js;">const box = document.getElementById("box") -eachNode(box, function(node) { - if (null != node.textContent) { - console.log(node.textContent) - } -})</pre> - -<p>The above will result in the following strings printing to the user's console:</p> - -<pre class="brush: js;">"\n\t", "Foo", "\n\t", "Bar", "\n\t", "Baz"</pre> - -<div class="blockIndicator note"> -<p><strong>Note:</strong> Whitespace forms part of a {{DOMxRef("Text")}} node, meaning indentation and newlines form separate <code>Text</code> between the <code>Element</code> nodes.</p> -</div> - -<h4 id="Realistic_usage">Realistic usage</h4> - -<p>The following demonstrates a real-world use of the <code>eachNode()</code> function: searching for text on a web-page.</p> - -<p>We use a wrapper function named <code>grep</code> to do the searching:</p> - -<pre class="brush: js;">function grep(parentNode, pattern) { - const matches = [] - let 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 (typeof pattern === "string") { - 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>For example, to find {{DOMxRef("Text")}} nodes that contain typos:</p> - -<pre class="brush: js;">const typos = ["teh", "adn", "btu", "adress", "youre", "msitakes"] -const pattern = new RegExp("\\b(" + typos.join("|") + ")\\b", "gi") -const mistakes = grep(document.body, pattern) -console.log(mistakes) -</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>Added the following methods: <code>getRootNode()</code></td> - </tr> - <tr> - <td>{{SpecName("DOM4", "#interface-node", "Node")}}</td> - <td>{{Spec2("DOM4")}}</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>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> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.Node")}}</p> diff --git a/files/ar/web/api/node/removechild/index.html b/files/ar/web/api/node/removechild/index.html deleted file mode 100644 index aea43247bd..0000000000 --- a/files/ar/web/api/node/removechild/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: Node.removeChild() -slug: Web/API/Node/removeChild -translation_of: Web/API/Node/removeChild ---- -<div>{{APIRef("DOM")}}</div> - -<p>و <code><strong>Node.removeChild()</strong></code>الأسلوب يزيل عقدة الطفل من DOM وإرجاع العقدة التي تمت إزالتها.</p> - -<h2 id="بناء_الجملة">بناء الجملة</h2> - -<pre class="syntaxbox">var <em>oldChild</em> = <em>العقدة</em> .removeChild ( <em>child</em> ) ؛ -<strong>أو </strong> -<em>عقدة.</em> إزالة <em>الطفل</em> ( <em>طفل</em> ) ؛ -</pre> - -<ul> - <li><code>child</code> هي العقدة الفرعية المراد إزالتها من DOM.</li> - <li><code>node</code>هي العقدة الأم لـ <code>child</code>.</li> - <li><code>oldChild</code>يحمل إشارة إلى العقدة الفرعية التي تمت إزالتها ، أي <code>oldChild === child</code>.</li> -</ul> - -<p>لا تزال العقدة الفرعية التي تمت إزالتها موجودة في الذاكرة ، ولكنها لم تعد جزءًا من DOM. مع عرض أول صيغة ، يمكنك إعادة استخدام العقدة التي تمت إزالتها لاحقًا في التعليمات البرمجية ، عبر <code>oldChild</code>مرجع الكائن.</p> - -<p>ومع ذلك ، في النموذج الثاني للبناء ، لا يوجد <code>oldChild</code>مرجع محفوظ ، لذلك بافتراض أن الشفرة الخاصة بك لم تحتفظ بأي مرجع آخر للعقدة في مكان آخر ، فستصبح غير قابلة للاستخدام ولا رجعة فيها على الفور ، وعادة ما يتم <a href="/en-US/docs/Web/JavaScript/Memory_Management">حذفها تلقائيًا</a> من الذاكرة بعد وقت قصير.</p> - -<p>إذا <code>child</code>لم يكن في الواقع تابع <code>element</code>للعقدة ، فإن الطريقة تستثني. سيحدث هذا أيضًا إذا <code>child</code>كان في الواقع طفلًا <code>element</code>في وقت المكالمة ، ولكن تمت إزالته بواسطة معالج حدث تم استدعاؤه أثناء محاولة إزالة العنصر (على سبيل المثال ، {{Event("blur")}}.)</p> - -<h3 id="ألقيت_أخطاء">ألقيت أخطاء</h3> - -<p>تقدم الطريقة استثناءً بطريقتين مختلفتين:</p> - -<ol> - <li> - <p>If the <code>child</code> was in fact a child of <code>element</code> and so existing on the DOM, but was removed the method throws the following exception:</p> - - <p><code>Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node</code>.</p> - </li> - <li> - <p>If the <code>child</code> doesn't exist on the DOM of the page, the method throws the following exception:<br> - <br> - <code>Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.</code></p> - </li> -</ol> - -<h2 id="Examples">Examples</h2> - -<h3 id="Simple_examples">Simple examples</h3> - -<p>Given this HTML:</p> - -<pre class="brush: html"><div id="top"> - <div id="nested"></div> -</div> -</pre> - -<p>To remove a specified element when knowing its parent node:</p> - -<pre class="brush:js">let d = document.getElementById("top"); -let d_nested = document.getElementById("nested"); -let throwawayNode = d.removeChild(d_nested); -</pre> - -<p>To remove a specified element without having to specify its parent node:</p> - -<pre class="brush:js">let node = document.getElementById("nested"); -if (node.parentNode) { - node.parentNode.removeChild(node); -} -</pre> - -<p>To remove all children from an element:</p> - -<pre class="brush:js">let element = document.getElementById("top"); -while (element.firstChild) { - element.removeChild(element.firstChild); -} -</pre> - -<h3 id="Causing_a_TypeError">Causing a TypeError</h3> - -<pre class="brush: html"><!--Sample HTML code--> -<div id="top"> </div> - -<script type="text/javascript"> - let top = document.getElementById("top"); - let nested = document.getElementById("nested"); - - // Throws Uncaught TypeError - let garbage = top.removeChild(nested); -</script> -</pre> - -<h3 id="Causing_a_NotFoundError">Causing a NotFoundError</h3> - -<pre class="brush: html"><!--Sample HTML code--> -<div id="top"> - <div id="nested"></div> -</div> - -<script type="text/javascript"> - let top = document.getElementById("top"); - let nested = document.getElementById("nested"); - - // This first call correctly removes the node - let garbage = top.removeChild(nested); - - // Throws Uncaught NotFoundError - garbage = top.removeChild(nested); -</script> -</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", "#dom-node-removechild", "Node: removeChild")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="التوافق_المتصفح">التوافق المتصفح</h2> - -<div class="hidden">يتم إنشاء جدول التوافق في هذه الصفحة من البيانات المنظمة. إذا كنت ترغب في المساهمة في البيانات ، يرجى مراجعة <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> وإرسال طلب سحب إلينا.</div> - -<p>{{Compat("api.Node.removeChild")}}</p> - -<h2 id="أنظر_أيضا">أنظر أيضا</h2> - -<ul> - <li>{{domxref("Node.replaceChild")}}</li> - <li>{{domxref("Node.parentNode")}}</li> - <li>{{domxref("ChildNode.remove")}}</li> -</ul> |