From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/tr/web/api/node/index.html | 383 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 383 insertions(+) create mode 100644 files/tr/web/api/node/index.html (limited to 'files/tr/web/api/node') diff --git a/files/tr/web/api/node/index.html b/files/tr/web/api/node/index.html new file mode 100644 index 0000000000..043ea4eeb1 --- /dev/null +++ b/files/tr/web/api/node/index.html @@ -0,0 +1,383 @@ +--- +title: Node +slug: Web/API/Node +tags: + - API + - DOM + - Interface + - NeedsTranslation + - Node + - Reference + - TopicStub +translation_of: Web/API/Node +--- +

{{APIRef("DOM")}}

+ +

Node is an interface from which various types of DOM API objects inherit, allowing those types to be treated similarly; for example, inheriting the same set of methods, or being testable in the same way.

+ +

All of the following interfaces inherit the Node interface's methods and properties: {{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")}}

+ +

Those interfaces may return null in certain 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.

+ +

{{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")}}

-- cgit v1.2.3-54-g00ecf