From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/ar/web/api/node/index.html | 381 +++++++++++++++++++++++++++ files/ar/web/api/node/removechild/index.html | 144 ++++++++++ 2 files changed, 525 insertions(+) create mode 100644 files/ar/web/api/node/index.html create mode 100644 files/ar/web/api/node/removechild/index.html (limited to 'files/ar/web/api/node') diff --git a/files/ar/web/api/node/index.html b/files/ar/web/api/node/index.html new file mode 100644 index 0000000000..25375da985 --- /dev/null +++ b/files/ar/web/api/node/index.html @@ -0,0 +1,381 @@ +--- +title: Node +slug: Web/API/Node +tags: + - API + - DOM + - Interface + - NeedsTranslation + - Node + - Reference + - TopicStub +translation_of: Web/API/Node +--- +

{{APIRef("DOM")}}

+ +

The {{Glossary("DOM")}} Node 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. Key among the interfaces which inherit the features of Node are {{domxref("Document")}} and {{domxref("Element")}}. However, all of the following also inherit methods and properties from Node: {{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")}}.

+ +

In some cases, a particular feature of Node may not apply to a particular interface based on it; in that case, the inheriting node may return null 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.

+ +

{{InheritanceDiagram}}

+ +

Properties

+ +

Inherits properties from its parent, {{DOMxRef("EventTarget")}}.[1]

+ +
+
{{DOMxRef("Node.baseURI")}}{{ReadOnlyInline}}
+
Returns a {{DOMxRef("DOMString")}} representing the base URL of the document containing the Node.
+
{{DOMxRef("Node.baseURIObject")}} {{Non-standard_inline}} {{ReadOnlyInline}}{{Fx_MinVersion_Inline("3")}}
+
(Not available to web content.) The {{ Interface("nsIURI") }} object representing the base URI for the element.
+
{{DOMxRef("Node.childNodes")}}{{ReadOnlyInline}}
+
Returns a live {{DOMxRef("NodeList")}} containing all the children of this node. {{DOMxRef("NodeList")}} being live means that if the children of the Node change, the {{DOMxRef("NodeList")}} object is automatically updated.
+
{{DOMxRef("Node.firstChild")}}{{ReadOnlyInline}}
+
Returns a {{DOMxRef("Node")}} representing the first direct child node of the node, or null if the node has no child.
+
{{DOMxRef("Node.isConnected")}}{{ReadOnlyInline}}
+
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.
+
{{DOMxRef("Node.lastChild")}}{{ReadOnlyInline}}
+
Returns a {{DOMxRef("Node")}} representing the last direct child node of the node, or null if the node has no child.
+
{{DOMxRef("Node.nextSibling")}}{{ReadOnlyInline}}
+
Returns a {{DOMxRef("Node")}} representing the next node in the tree, or null if there isn't such node.
+
{{DOMxRef("Node.nodeName")}}{{ReadOnlyInline}}
+
Returns a {{DOMxRef("DOMString")}} containing the name of the Node. 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 'audio' for an {{DOMxRef("HTMLAudioElement")}}, a {{DOMxRef("Text")}} node will have the '#text' string, or a {{DOMxRef("Document")}} node will have the '#document' string.
+
{{DOMxRef("Node.nodeType")}}{{ReadOnlyInline}}
+
Returns an unsigned short representing the type of the node. Possible values are: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameValue
ELEMENT_NODE1
ATTRIBUTE_NODE {{Deprecated_Inline}}2
TEXT_NODE3
CDATA_SECTION_NODE4
ENTITY_REFERENCE_NODE {{Deprecated_Inline}}5
ENTITY_NODE {{Deprecated_Inline}}6
PROCESSING_INSTRUCTION_NODE7
COMMENT_NODE8
DOCUMENT_NODE9
DOCUMENT_TYPE_NODE10
DOCUMENT_FRAGMENT_NODE11
NOTATION_NODE {{Deprecated_Inline}}12
+
+
{{DOMxRef("Node.nodeValue")}}
+
Returns / Sets the value of the current node.
+
{{DOMxRef("Node.ownerDocument")}}{{ReadOnlyInline}}
+
Returns the {{DOMxRef("Document")}} that this node belongs to. If the node is itself a document, returns null.
+
{{DOMxRef("Node.parentNode")}}{{ReadOnlyInline}}
+
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 null.
+
{{DOMxRef("Node.parentElement")}}{{ReadOnlyInline}}
+
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 null.
+
{{DOMxRef("Node.previousSibling")}}{{ReadOnlyInline}}
+
Returns a {{DOMxRef("Node")}} representing the previous node in the tree, or null if there isn't such node.
+
{{DOMxRef("Node.textContent")}}
+
Returns / Sets the textual content of an element and all its descendants.
+
+ +

Obsolete properties

+ +
+
{{DOMxRef("Node.localName")}} {{Obsolete_Inline}}{{ReadOnlyInline}}
+
Returns a {{DOMxRef("DOMString")}} representing the local part of the qualified name of an element. +
+

Note: 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.

+
+
+
{{DOMxRef("Node.namespaceURI")}} {{Obsolete_Inline}}{{ReadOnlyInline}}
+
The namespace URI of this node, or null if it is no namespace. +
+

Note: In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the http://www.w3.org/1999/xhtml/ namespace in both HTML and XML trees.

+
+
+
{{DOMxRef("Node.nodePrincipal")}} {{Non-standard_inline}}{{Obsolete_Inline("gecko46")}}{{Fx_MinVersion_Inline("3")}}
+
A {{Interface("nsIPrincipal")}} representing the node principal.
+
{{DOMxRef("Node.prefix")}} {{Obsolete_Inline}}{{ReadOnlyInline}}
+
Is a {{DOMxRef("DOMString")}} representing the namespace prefix of the node, or null if no prefix is specified.
+
{{DOMxRef("Node.rootNode")}} {{Obsolete_Inline}}{{ReadOnlyInline}}
+
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()")}}.
+
+ +

Methods

+ +

Inherits methods from its parent, {{DOMxRef("EventTarget")}}.[1]

+ +
+
{{DOMxRef("Node.appendChild()", "Node.appendChild(childNode)")}}
+
Adds the specified childNode argument as the last child to the current node.
+ 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.
+
{{DOMxRef("Node.cloneNode()")}}
+
Clone a {{DOMxRef("Node")}}, and optionally, all of its contents. By default, it clones the content of the node.
+
{{DOMxRef("Node.compareDocumentPosition()")}}
+
Compares the position of the current node against another node in any other document.
+
{{DOMxRef("Node.contains()")}}
+
Returns a {{jsxref("Boolean")}} value indicating whether or not a node is a descendant of the calling node.
+
{{domxref("Node.getBoxQuads()")}} {{experimental_inline}}
+
Returns a list of the node's CSS boxes relative to another node.
+
{{DOMxRef("Node.getRootNode()")}}
+
Returns the context object's root which optionally includes the shadow root if it is available. 
+
{{DOMxRef("Node.hasChildNodes()")}}
+
Returns a {{jsxref("Boolean")}} indicating whether or not the element has any child nodes.
+
{{DOMxRef("Node.insertBefore()")}}
+
Inserts a {{DOMxRef("Node")}} before the reference node as a child of a specified parent node.
+
{{DOMxRef("Node.isDefaultNamespace()")}}
+
Accepts a namespace URI as an argument and returns a {{jsxref("Boolean")}} with a value of true if the namespace is the default namespace on the given node or false if not.
+
{{DOMxRef("Node.isEqualNode()")}}
+
Returns a {{jsxref("Boolean")}} which indicates whether or not two nodes are of the same type and all their defining data points match.
+
{{DOMxRef("Node.isSameNode()")}}
+
Returns a {{jsxref("Boolean")}} value indicating whether or not the two nodes are the same (that is, they reference the same object).
+
{{DOMxRef("Node.lookupPrefix()")}}
+
Returns a {{DOMxRef("DOMString")}} containing the prefix for a given namespace URI, if present, and null if not. When multiple prefixes are possible, the result is implementation-dependent.
+
{{DOMxRef("Node.lookupNamespaceURI()")}}
+
Accepts a prefix and returns the namespace URI associated with it on the given node if found (and null if not). Supplying null for the prefix will return the default namespace.
+
{{DOMxRef("Node.normalize()")}}
+
Clean up all the text nodes under this element (merge adjacent, remove empty).
+
{{DOMxRef("Node.removeChild()")}}
+
Removes a child node from the current element, which must be a child of the current node.
+
{{DOMxRef("Node.replaceChild()")}}
+
Replaces one child {{DOMxRef("Node")}} of the current one with the second one given in parameter.
+
+ +

Obsolete methods

+ +
+
{{DOMxRef("Node.getFeature()")}} {{Obsolete_Inline}}
+
+
{{DOMxRef("Node.getUserData()")}} {{Obsolete_Inline}}
+
Allows a user to get some {{DOMxRef("DOMUserData")}} from the node.
+
{{DOMxRef("Node.hasAttributes()")}} {{Obsolete_Inline}}
+
Returns a {{jsxref("Boolean")}} indicating if the element has any attributes, or not.
+
{{DOMxRef("Node.isSupported()")}} {{Obsolete_Inline}}
+
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.
+
{{DOMxRef("Node.setUserData()")}} {{Obsolete_Inline}}
+
Allows a user to attach, or remove, {{DOMxRef("DOMUserData")}} to the node.
+
+ +

Examples

+ +

Remove all children nested within a node

+ +
function removeAllChildren(element) {
+  while (element.firstChild) {
+    element.removeChild(element.firstChild)
+  }
+}
+ +

Sample usage

+ +
/* ... an alternative to document.body.innerHTML = "" ... */
+removeAllChildren(document.body)
+ +

Recurse through child nodes

+ +

The following function recursively calls a callback function for each node contained by a root node (including the root itself):

+ +
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
+            }
+        }
+	}
+}
+
+ +

Syntax

+ +
eachNode(rootNode, callback)
+ +

Description

+ +

Recursively calls a function for each descendant node of rootNode (including the root itself).

+ +

If callback is omitted, the function returns an {{jsxref("Array")}} instead, which contains rootNode and all nodes contained within.

+ +

If callback is provided, and it returns {{jsxref("Boolean")}} false 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).

+ +

Parameters

+ +
+
rootNode
+
The Node object whose descendants will be recursed through.
+
callback {{optional_inline}}
+
An optional callback function that receives a Node as its only argument. If omitted, eachNode returns an {{jsxref("Array")}} of every node contained within rootNode (including the root itself).
+
+ +

Sample usage

+ +

The following example prints the textContent properties of each <span> tag in a <div> element named "box":

+ +
<div id="box">
+  <span>Foo</span>
+  <span>Bar</span>
+  <span>Baz</span>
+</div>
+ +
const box = document.getElementById("box")
+eachNode(box, function(node) {
+  if (null != node.textContent) {
+    console.log(node.textContent)
+  }
+})
+ +

The above will result in the following strings printing to the user's console:

+ +
"\n\t", "Foo", "\n\t", "Bar", "\n\t", "Baz"
+ +
+

Note: Whitespace forms part of a {{DOMxRef("Text")}} node, meaning indentation and newlines form separate Text between the Element nodes.

+
+ +

Realistic usage

+ +

The following demonstrates a real-world use of the eachNode() function: searching for text on a web-page.

+ +

We use a wrapper function named grep to do the searching:

+ +
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
+}
+ +

For example, to find {{DOMxRef("Text")}} nodes that contain typos:

+ +
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)
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#interface-node", "Node")}}{{Spec2("DOM WHATWG")}}Added the following methods: getRootNode()
{{SpecName("DOM4", "#interface-node", "Node")}}{{Spec2("DOM4")}}Removed the following properties: attributes, namespaceURI, prefix, and localName.
+ Removed the following methods: isSupported(), hasAttributes(), getFeature(), setUserData(), and getUserData().
{{SpecName("DOM3 Core", "core.html#ID-1950641247", "Node")}}{{Spec2("DOM3 Core")}}The methods insertBefore(), replaceChild(), removeChild(), and appendChild() returns one more kind of error (NOT_SUPPORTED_ERR) if called on a {{DOMxRef("Document")}}.
+ The normalize() method has been modified so that {{DOMxRef("Text")}} node can also be normalized if the proper {{DOMxRef("DOMConfiguration")}} flag is set.
+ Added the following methods: compareDocumentPosition(), isSameNode(), lookupPrefix(), isDefaultNamespace(), lookupNamespaceURI(), isEqualNode(), getFeature(), setUserData(), and getUserData().
+ Added the following properties: baseURI and textContent.
{{SpecName("DOM2 Core", "core.html#ID-1950641247", "Node")}}{{Spec2("DOM2 Core")}}The ownerDocument property was slightly modified so that {{DOMxRef("DocumentFragment")}} also returns null.
+ Added the following properties: namespaceURI, prefix, and localName.
+ Added the following methods: normalize(), isSupported() and hasAttributes().
{{SpecName("DOM1", "level-one-core.html#ID-1950641247", "Node")}}{{Spec2("DOM1")}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Node")}}

diff --git a/files/ar/web/api/node/removechild/index.html b/files/ar/web/api/node/removechild/index.html new file mode 100644 index 0000000000..aea43247bd --- /dev/null +++ b/files/ar/web/api/node/removechild/index.html @@ -0,0 +1,144 @@ +--- +title: Node.removeChild() +slug: Web/API/Node/removeChild +translation_of: Web/API/Node/removeChild +--- +
{{APIRef("DOM")}}
+ +

و Node.removeChild()الأسلوب يزيل عقدة الطفل من DOM وإرجاع العقدة التي تمت إزالتها.

+ +

بناء الجملة

+ +
var oldChild = العقدة .removeChild ( child ) ؛
+أو 
+عقدة. إزالة الطفل ( طفل ) ؛
+
+ + + +

لا تزال العقدة الفرعية التي تمت إزالتها موجودة في الذاكرة ، ولكنها لم تعد جزءًا من DOM. مع عرض أول صيغة ، يمكنك إعادة استخدام العقدة التي تمت إزالتها لاحقًا في التعليمات البرمجية ، عبر oldChildمرجع الكائن.

+ +

ومع ذلك ، في النموذج الثاني للبناء ، لا يوجد oldChildمرجع محفوظ ، لذلك بافتراض أن الشفرة الخاصة بك لم تحتفظ بأي مرجع آخر للعقدة في مكان آخر ، فستصبح غير قابلة للاستخدام ولا رجعة فيها على الفور ، وعادة ما يتم حذفها تلقائيًا من الذاكرة بعد وقت قصير.

+ +

إذا childلم يكن في الواقع تابع elementللعقدة ، فإن الطريقة تستثني. سيحدث هذا أيضًا إذا childكان في الواقع طفلًا elementفي وقت المكالمة ، ولكن تمت إزالته بواسطة معالج حدث تم استدعاؤه أثناء محاولة إزالة العنصر (على سبيل المثال ، {{Event("blur")}}.)

+ +

ألقيت أخطاء

+ +

تقدم الطريقة استثناءً بطريقتين مختلفتين:

+ +
    +
  1. +

    If the child was in fact a child of element and so existing on the DOM, but was removed the method throws the following exception:

    + +

    Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

    +
    2. +
  2. +

    If the child doesn't exist on the DOM of the page, the method throws the following exception:
    +
    + Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.

    +
    3. +
+ +

Examples

+ +

Simple examples

+ +

Given this HTML:

+ +
<div id="top">
+  <div id="nested"></div>
+</div>
+
+ +

To remove a specified element when knowing its parent node:

+ +
let d = document.getElementById("top");
+let d_nested = document.getElementById("nested");
+let throwawayNode = d.removeChild(d_nested);
+
+ +

To remove a specified element without having to specify its parent node:

+ +
let node = document.getElementById("nested");
+if (node.parentNode) {
+  node.parentNode.removeChild(node);
+}
+
+ +

To remove all children from an element:

+ +
let element = document.getElementById("top");
+while (element.firstChild) {
+  element.removeChild(element.firstChild);
+}
+
+ +

Causing a TypeError

+ +
<!--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>
+
+ +

Causing a NotFoundError

+ +
<!--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>
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#dom-node-removechild", "Node: removeChild")}}{{Spec2("DOM WHATWG")}}
+ +

التوافق المتصفح

+ + + +

{{Compat("api.Node.removeChild")}}

+ +

أنظر أيضا

+ + -- cgit v1.2.3-54-g00ecf