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/de/web/api/node/appendchild/index.html | 144 +++++++++ files/de/web/api/node/childnodes/index.html | 70 +++++ files/de/web/api/node/clonenode/index.html | 135 +++++++++ files/de/web/api/node/firstchild/index.html | 62 ++++ files/de/web/api/node/haschildnodes/index.html | 120 ++++++++ files/de/web/api/node/index.html | 365 +++++++++++++++++++++++ files/de/web/api/node/innertext/index.html | 90 ++++++ files/de/web/api/node/lastchild/index.html | 41 +++ files/de/web/api/node/nextsibling/index.html | 60 ++++ files/de/web/api/node/nodevalue/index.html | 88 ++++++ files/de/web/api/node/normalize/index.html | 49 +++ files/de/web/api/node/parentnode/index.html | 79 +++++ files/de/web/api/node/previoussibling/index.html | 69 +++++ files/de/web/api/node/removechild/index.html | 82 +++++ files/de/web/api/node/replacechild/index.html | 61 ++++ files/de/web/api/node/setuserdata/index.html | 121 ++++++++ files/de/web/api/node/textcontent/index.html | 69 +++++ 17 files changed, 1705 insertions(+) create mode 100644 files/de/web/api/node/appendchild/index.html create mode 100644 files/de/web/api/node/childnodes/index.html create mode 100644 files/de/web/api/node/clonenode/index.html create mode 100644 files/de/web/api/node/firstchild/index.html create mode 100644 files/de/web/api/node/haschildnodes/index.html create mode 100644 files/de/web/api/node/index.html create mode 100644 files/de/web/api/node/innertext/index.html create mode 100644 files/de/web/api/node/lastchild/index.html create mode 100644 files/de/web/api/node/nextsibling/index.html create mode 100644 files/de/web/api/node/nodevalue/index.html create mode 100644 files/de/web/api/node/normalize/index.html create mode 100644 files/de/web/api/node/parentnode/index.html create mode 100644 files/de/web/api/node/previoussibling/index.html create mode 100644 files/de/web/api/node/removechild/index.html create mode 100644 files/de/web/api/node/replacechild/index.html create mode 100644 files/de/web/api/node/setuserdata/index.html create mode 100644 files/de/web/api/node/textcontent/index.html (limited to 'files/de/web/api/node') diff --git a/files/de/web/api/node/appendchild/index.html b/files/de/web/api/node/appendchild/index.html new file mode 100644 index 0000000000..519f6f9a0d --- /dev/null +++ b/files/de/web/api/node/appendchild/index.html @@ -0,0 +1,144 @@ +--- +title: Node.appendChild() +slug: Web/API/Node/appendChild +tags: + - API + - DOM + - Method + - Node + - Reference +translation_of: Web/API/Node/appendChild +--- +
{{APIRef("DOM")}}
+ +

Die Node.appendChild() Methode fügt einen Kind-Knoten am Ende der Liste aller Kinder des angegebenen Eltern-Knotens an (to append = anhängen).

+ +

Wenn das gegebene Kind eine Referenz zu einem existierenden Knoten im Dokument ist, wird appendChild() es von der aktuellen Position zu der neuen Position bewegen. Es gibt also keine Notwendigkeit den Knoten erst zu entfernen, weil ein Knoten in einem Dokument nicht gleichzeitig an zwei Stellen vorkommen kann. Also, wenn der Knoten bereits einen Eltern-Knoten hat, wird der Knoten zuerst entfernt und dann erneut am Ende der Kind-Knoten-Liste angehängt.

+ +

Das {{domxref("Node.cloneNode()")}}  kann genutzt werden um eine Kopie des Knotens zu machen, bevor es an einen neuen Eltern-Knoten angehängt wird. Zu beachten: Kopien die mit cloneNode gemacht wurden, werden nicht automatisch Synchron gehalten.

+ +

Syntax

+ +
var aChild = element.appendChild(aChild);
+ +

Parameter

+ +

aChild

+ +

Der Knoten, der an den gegebenen Eltern-Knoten angehängt wird (für gewöhnlich ein Element).

+ +

Rückgabewert

+ +

Der Rückgabewert ist das angehängte Kindelement (aChild), außer wenn aChild ein {{domxref("DocumentFragment")}} ist. In diesem Fall wird ein {{domxref("DocumentFragment")}} zurückgegeben.

+ +

Anmerkungen

+ +

Eine Verkettung kann anders ablaufen als erwartet, da appendChild() das Kindelement zurück gibt.

+ +
var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));
+ +

Setzt nur aBlock auf <b></b>, was möglicherweise nicht das gewünschte ist.

+ +

Beispiele

+ +
//  Erstellen Sie ein neues Absatz-Element und fügen Sie es an das Ende des Dokument-Körpers (body)
+var p = document.createElement("p");
+document.body.appendChild(p);
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}{{Spec2('DOM WHATWG')}}No change from {{SpecName("DOM3 Core")}}.
{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM3 Core')}}No change from {{SpecName("DOM2 Core")}}.
{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM2 Core')}}No change from {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basis Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basis Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/node/childnodes/index.html b/files/de/web/api/node/childnodes/index.html new file mode 100644 index 0000000000..afbddd274e --- /dev/null +++ b/files/de/web/api/node/childnodes/index.html @@ -0,0 +1,70 @@ +--- +title: Node.childNodes +slug: Web/API/Node/childNodes +translation_of: Web/API/Node/childNodes +--- +

{{ ApiRef() }}

+

Allgemein

+

childNodes gibt eine {{ domxref('NodeList') }}, welche alle Kindknoten (childNodes) eines bestimmten HTML-Elements enthält, zurück.

+

Syntax

+
var nodeList = referenzElement.childNodes;
+
+

nodeList ist eine Liste, die alle Kindknoten eines bestimmten Elements der Reihenfolge nach enthält. Falls das Element keine Kindknoten enthält, gibt childNodes eine leere NodeList zurück.
+
+ Diese Eigenschaft kann nur ausgelesen werden (read-only).

+

Beispiel

+

Folgendes HTML-Dokument liegt vor:

+
<!DOCTYPE html>
+<html>
+  <body>
+    <h3>Neue Mitarbeiter eingestellt</h3>
+    <p>Dank der guten Konjunktur letzten Jahres [...]</p>
+  </body>
+</html>
+
+

Nun sollen die childNodes von <body> ausgelesen und in einer Liste namens nodeList gespeichert werden:

+
var bd = document.body;
+
+// Zuerst werden wir überprüfen, ob das <body>-Element überhaupt Kindknoten hat.
+if (bd.hasChildNodes()) {
+   // Nun werden wir die Eigenschaft childNodes auslesen
+   var nodeList = bd.childNodes;
+
+   for(var i = 0; i < nodeList.length; i++) {
+     // So wird nodeList durchlaufen und folgender Code wird an jedem Eintrag ausgeführt
+     // In diesem Fall soll der Name ausgegeben werden
+     alert(nodeList[i].nodeName);
+   }
+}
+
+


+ Diese Liste ist ständig aktuell. Jede Änderung am referenz-Element (hier <body>) bewirkt eine aktualisierung der Liste.
+ Wenn Sie also beispielsweise das erste Element in der Liste löschen, rückt automatisch das zweite Element an Stelle des Ersten.
+ Deshalb lassen sich z.B. auf diese Art alle Kindknoten eines Elements löschen:

+
while(bd.firstChild) {
+    bd.removeChild(bd.firstChild);
+}
+
+

Anmerkungen

+

Mit childNodes erhalten Sie eine Liste aller Kindknoten, einschließlich derer vom Typ {{ domxref("CharacterData") }}. Wenn Sie diese Datenknoten nicht im Index haben wollen, verwenden Sie statt childNodes die Eigenschaft {{ domxref('Element.children') }}.

+

Die Einträge in nodeList sind Objekte, keine Zeichenketten. Für diese Objekte gelten wiederum alle Methoden und Eigenschaften von {{ domxref("Node") }}. Um also Daten aus diesen Objekten auszulesen, müssen deren Eigenschaften ausgelesen werden. Um beispielsweise den Namen eines in nodeList aufgeführten Elements auszulesen, muss man die eigenschaft nodeName auslesen:

+
var name = nodeList[i].nodeName;
+

Das document Objekt hat zwei Kindknoten: Die Doctype-Deklaration und das root-Element, das eine Eigenschaft von {{ domxref("Document") }} ist.
+ Folgendermaßen kann darauf zugegriffen werden:

+
var root = document.documentElement;
+

In (X)HTML-Dokumenten stellt das HTML-Element das root-Element dar.

+

Siehe auch

+ +

Spezifikationen

+ +

{{ languages( { "fr": "fr/DOM/element.childNodes", "ja": "ja/DOM/element.childNodes", "pl": "pl/DOM/element.childNodes", "zh-cn": "cn/DOM/element.childNodes", "de": "de/DOM/element.childNodes" } ) }}

diff --git a/files/de/web/api/node/clonenode/index.html b/files/de/web/api/node/clonenode/index.html new file mode 100644 index 0000000000..d51a489a69 --- /dev/null +++ b/files/de/web/api/node/clonenode/index.html @@ -0,0 +1,135 @@ +--- +title: Node.cloneNode +slug: Web/API/Node/cloneNode +translation_of: Web/API/Node/cloneNode +--- +
{{APIRef("DOM")}}
+ +

Übersicht

+ +

Gibt ein Duplikat des Knotens, auf dem diese Methode aufgerufen wurde, zurück.

+ +

Syntax

+ +
var dupNode = node.cloneNode(deep);
+
+ +
+
node
+
Der Knoten, welcher dupliziert werden soll.
+
dupNode
+
Der duplizierte Knoten.
+
deep
+
true wenn die Kindknoten des Knotens ebenfalls dupliziert werden sollen, false wenn nur der Knoten dupliziert werden soll.
+
+ +
+

Hinweis: In der DOM4 Spezifikation (implementiert in Gecko 13.0 {{geckoRelease(13)}}), ist das Argument deep optional. Es ist dann laut Spezifikation true.

+ +

Leider wurde dies in der letzten Spezifikation geändert, sodass der Standardwert nun false ist. Auch wenn es immer noch optional ist, sollte man das Argument deep aus diesen Kompatibilitätsgründen setzen. Ab Gecko 28.0 {{geckoRelease(28)}} warnt die Konsole den Entwickler, wenn das Argument nicht gesetzt ist.

+
+ +

Beispiel

+ +
    var p = document.getElementById("para1");
+    var p_prime = p.cloneNode(true);
+
+ +

Hinweise

+ +

Der duplizierte Knoten enthält alle Attribute und deren Werte, aber nicht die Eventlistener welche via addEventListener() oder über die jeweilige Elementeigenschaft (z.B. node.onclick = function) gesetzt wurden. Im Fall eines <canvas>-Elements wird das gezeichnete Bild nicht mitkopiert.

+ +

Der mit cloneNode() duplizierte Knoten ist noch nicht Teil des Dokuments und hat keinen Elternknoten bis er mithilfe der Methode {{domxref("Node.appendChild()")}} oder einer anderen vergleichbaren Methode in das Dokument eingefügt wird.

+ +

Wenn deep auf false gesetzt ist, werden die Kindknoten nicht mitkopiert. Dies schließt ebenfalls alle Textelemente mit ein, da diese in einem oder mehreren Kindknoten enthalten sind.

+ +
Warnung: Die Verwendung von cloneNode() kann dazu führen, dass die selbe ID im Dokument mehrmals existiert.
+ +

Wenn der Originalknoten eine ID hat, sollte diese im dupliziertem Knoten geändert oder gelöscht werden, um Probleme zu vermeiden. Dies sollte auch für das name Attribut überlegt werden.

+ +

Um einen Knoten aus einem anderen Dokument zu kopieren sollte die {{domxref("Document.importNode()")}} verwendet werden.

+ +

Browserkompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
deep as an optional parameter +

Ja

+ +

(Standard: false)

+ 		{{CompatGeckoDesktop("13.0")}}{{CompatUnknown}}{{CompatUnknown}} +

Yes

+ +

(default is false)

+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome für AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
deep as an optional parameter{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("13.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Spezifikationen

+ + diff --git a/files/de/web/api/node/firstchild/index.html b/files/de/web/api/node/firstchild/index.html new file mode 100644 index 0000000000..38703904ec --- /dev/null +++ b/files/de/web/api/node/firstchild/index.html @@ -0,0 +1,62 @@ +--- +title: Node.firstChild +slug: Web/API/Node/firstChild +translation_of: Web/API/Node/firstChild +--- +

{{ ApiRef() }}

+ +

Allgemein

+ +

firstChild gibt den ersten Kindknoten (childNode) eines Datenknotens zurück.

+ +

Syntax

+ +
var ersterKindknoten = element.firstChild;
+
+ +

Die Variable ersterKindknoten enthält einen Datenknoten.

+ +

Beispiel

+ +

Folgendes HTML-Dokument ist gegeben:

+ +
<!DOCTYPE html>
+<html>
+  <body>
+    <h3>Texte</h3>
+    <p>Hier steht Text!</p>
+  </body>
+</html>
+
+ +

Um auf das erste Kindelement zuzugreifen, kann man folgenden Code verwenden:

+ +
var ersterKindknoten = document.body.firstChild;
+
+ +

In diesem Fall ist der erste Kindknoten ein Textknoten, da sich zwischen dem Schlusstag des Paragraphs und dem Start-Tag von <body> ein Zeilenumbruch und vier Leerzeichen befinden.

+ +

Anmerkungen

+ + + +

Spezifikationen

+ + + +

Siehe auch:

+ + + +

{{ languages( { "fr": "fr/DOM/element.firstChild", "ja": "ja/DOM/element.firstChild", "pl": "pl/DOM/element.firstChild", "zh-cn": "zh-cn/DOM/Node.firstChild" } ) }}

diff --git a/files/de/web/api/node/haschildnodes/index.html b/files/de/web/api/node/haschildnodes/index.html new file mode 100644 index 0000000000..1ecfb52b48 --- /dev/null +++ b/files/de/web/api/node/haschildnodes/index.html @@ -0,0 +1,120 @@ +--- +title: Node.hasChildNodes() +slug: Web/API/Node/hasChildNodes +tags: + - API DOM Methode Node +translation_of: Web/API/Node/hasChildNodes +--- +
+
{{APIRef("DOM")}}
+
+ +

Die Node.hasChildNodes() Methode liefert einen Boolean Wert der anzeigt ob die aktuelle {{domxref("Node")}} child nodes hat oder nicht.

+ +

Syntax

+ +
result = node.hasChildNodes();
+ +
+
result
+
enthält den return Wert true oder false.
+
+ +

Beispiele

+ +

Das nächste Beispiel entfernt die erste child node innerhalb dem element mit der id "foo" wenn foo child nodes enthält.

+ +
var foo = document.getElementById("foo");
+if (foo.hasChildNodes()) {
+    // do something with 'foo.childNodes'
+}
+
+ +

Polyfill

+ +
;(function(prototype) {
+    prototype.hasChildNodes = prototype.hasChildNodes || function() {
+        return !!this.firstChild;
+    }
+})(Node.prototype);
+
+ +

Zusammenfassung

+ +

Es gibt unterschiedliche Wege herauszufinden ob die node eine child node enthält.

+ + + +

Spezifikation

+ + + +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}7.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 

+ +

Siehe auch

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

A Node is an interface from which a number of DOM types inherit, and allows these various types to be treated (or tested) similarly.

+ +

The following interfaces all inherit from Node 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")}}

+ +

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.

+ +

Properties

+ +

Inherits properties from its parents {{domxref("EventTarget")}}.[1]

+ +
+
{{domxref("Node.baseURI")}} {{readonlyInline}}
+
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 '/'.
+
{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}} {{ Fx_minversion_inline("3") }}
+
(Not available to web content.) The read-only {{ 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.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.localName")}} {{obsolete_inline}}{{readonlyInline}}
+
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") }}
+ Though recent specifications require localName to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.
+
{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}
+
The namespace URI of this node, or null 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 http://www.w3.org/1999/xhtml namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2") }}
+ Though recent specifications require namespaceURI to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.
+
{{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 name 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.nodePrincipal")}} {{Non-standard_inline()}}{{ Fx_minversion_inline("3") }}
+
A {{ Interface("nsIPrincipal") }} representing the node principal.
+
{{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_NODE {{deprecated_inline()}}4
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")}}
+
Is a {{domxref("DOMString")}} representing the value of an object. For most Node type, this returns null and any set operation is ignored. For nodes of type TEXT_NODE ({{domxref("Text")}} objects), COMMENT_NODE ({{domxref("Comment")}} objects), and PROCESSING_INSTRUCTION_NODE ({{domxref("ProcessingInstruction")}} objects), the value corresponds to the text data contained in the object.
+
{{domxref("Node.ownerDocument")}} {{readonlyInline}}
+
Returns the {{domxref("Document")}} that this node belongs to. If no document is associated with it, 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.prefix")}} {{obsolete_inline}}{{readonlyInline}}
+
Is a {{domxref("DOMString")}} representing the namespace prefix of the node, or null if no prefix is specified.
+ Though recent specifications require prefix to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.
+
{{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")}}
+
Is a {{domxref("DOMString")}} representing the textual content of an element and all its descendants.
+
+ +

Methods

+ +

Inherits methods from its parents {{domxref("EventTarget")}}.[1]

+ +
+
{{domxref("Node.appendChild()")}}
+
Insert a {{domxref("Node")}} as the last child node of this element.
+
{{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()")}}
+
 
+
{{domxref("Node.contains()")}}
+
 
+
{{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 {{domxref("Boolean")}} indicating if the element has any attributes, or not.
+
{{domxref("Node.hasChildNodes()")}}
+
Returns a {{domxref("Boolean")}} indicating if the element has any child nodes, or not.
+
{{domxref("Node.insertBefore()")}}
+
Inserts the first {{domxref("Node")}} given in a parameter immediately before the second, child of this element, {{domxref("Node")}}.
+
{{domxref("Node.isDefaultNamespace()")}}
+
 
+
{{domxref("Node.isEqualNode()")}}
+
 
+
{{domxref("Node.isSameNode()")}} {{obsolete_inline}}
+
 
+
{{domxref("Node.isSupported()")}} {{obsolete_inline}}
+
Returns a 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.lookupPrefix()")}}
+
 
+
{{domxref("Node.lookupNamespaceURI()")}}
+
 
+
{{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.
+
{{domxref("Node.setUserData()")}} {{obsolete_inline}}
+
Allows a user to attach, or remove, {{domxref("DOMUserData")}} to the node.
+
 
+
+ +

Examples

+ +

Browse all child nodes

+ +

The following function recursively cycles all child nodes of a node and executes a callback function upon them (and upon the parent node itself).

+ +
function DOMComb (oParent, oCallback) {
+  if (oParent.hasChildNodes()) {
+    for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) {
+      DOMComb(oNode, oCallback);
+    }
+  }
+  oCallback.call(oParent);
+}
+ +

Syntax

+ +
DOMComb(parentNode, callbackFunction);
+ +

Description

+ +

Recursively cycle all child nodes of parentNode and parentNode itself and execute the callbackFunction upon them as this objects.

+ +

Parameters

+ +
+
parentNode
+
The parent node (Node Object).
+
callbackFunction
+
The callback function (Function).
+
+ +

Sample usage

+ +

The following example send to the console.log the text content of the body:

+ +
function printContent () {
+  if (this.nodeValue) { console.log(this.nodeValue); }
+}
+
+onload = function () {
+  DOMComb(document.body, printContent);
+};
+ +

Remove all children nested within a node

+ +
Element.prototype.removeAll = function () {
+  while (this.firstChild) { this.removeChild(this.firstChild); }
+  return this;
+};
+ +

Sample usage

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

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}{{Spec2('DOM WHATWG')}}Removed the following properties: attributes, namespaceURI, prefix, and localName.
+ Removed the following methods: isSupported(), hasAttributes(), isSameNode(), 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

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
getFeature(){{obsolete_inline}}{{CompatNo}}Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("6.0")}}.
+ Removed in {{CompatGeckoDesktop("7.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
getUserData(), setUserData() and hasAttributes() {{deprecated_inline}}{{CompatNo}}Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.
+ Removed in {{CompatGeckoDesktop("22.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
isSameNode() {{obsolete_inline}}{{CompatNo}}Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("9.0")}}.
+ Removed in {{CompatGeckoDesktop("10.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
isSupported() {{obsolete_inline}}{{CompatUnknown}}Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.
+ Removed in {{CompatGeckoDesktop("22.0")}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
attributes{{CompatNo}}Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.
+ Moved to {{domxref("Element")}} in {{CompatGeckoDesktop("22.0")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
getFeature(){{obsolete_inline}}{{CompatNo}}Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("6.0")}}.
+ Removed in {{CompatGeckoDesktop("7.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Webkit and Blink incorrectly do not make Node inherit from {{domxref("EventTarget")}}.

diff --git a/files/de/web/api/node/innertext/index.html b/files/de/web/api/node/innertext/index.html new file mode 100644 index 0000000000..bd1594471a --- /dev/null +++ b/files/de/web/api/node/innertext/index.html @@ -0,0 +1,90 @@ +--- +title: Node.innerText +slug: Web/API/Node/innerText +tags: + - API DOM Property Reference +translation_of: Web/API/HTMLElement/innerText +--- +
{{APIRef("DOM")}}
+ +

Zusammenfassung

+ +

Node.innerText ist eine Eigenschaft die die "gerenderten" Text Inhalte einer node und ihrer nachfahren representiert. Als getter nähert es sich dem Text an, den ein User erhalten würde wenn sie/er den Inhalt des Elementes mit dem Kursor highlighten und dann zum Clipboard kopieren würde. Dieses Feature wurde ursprünglich von Internet Explorer eingeführt, und wurde förmlich in den HTML standards von 2016 spezifiziert nachdem es von allen Hauptbrowsern übernommen wurde.

+ +

{{domxref("Node.textContent")}} ist eine etwas ähnliche Alternative. Es gibt allerdings wichtige Unterschiede zwischen den beiden.

+ +

Spezifikation

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}{{Spec2('HTML WHATWG')}} +

Eingeführt, basiert auf dem draft of the innerText specification. Siehe whatwg/html#465 und whatwg/compat#5 für die Historie.

+
+ +

Browser Kompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support4{{ CompatGeckoDesktop(45) }}69.6 (probably earlier)3
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.3 (probably earlier){{ CompatGeckoMobile(45) }}10 (probably earlier)124.1 (probably earlier)
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/node/lastchild/index.html b/files/de/web/api/node/lastchild/index.html new file mode 100644 index 0000000000..9b6f98e59e --- /dev/null +++ b/files/de/web/api/node/lastchild/index.html @@ -0,0 +1,41 @@ +--- +title: Node.lastChild +slug: Web/API/Node/lastChild +translation_of: Web/API/Node/lastChild +--- +

{{ ApiRef() }}

+

Allgemein

+

lastChild gibt den letzten Kindknoten (childNode) eines Datenknotens zurück.

+

Syntax

+
var letzterKindknoten = element.lastChild;
+
+

Die Variable letzterKindknoten enthält einen Datenknoten.

+

Beispiel

+

Folgendes HTML-Dokument ist gegeben:

+
<!DOCTYPE html>
+<html>
+  <body>
+    <h3>Texte</h3>
+    <p>Hier steht Text!</p>
+  </body>
+</html>
+
+

Um auf das letzte Kindelement zuzugreifen, kann man folgenden Code verwenden:

+
var letzterKindknoten = document.body.lastChild;
+
+

In diesem Fall ist der letzte Kindknoten ein Textknoten, da sich zwischen dem Schlusstag des Paragraphs und dem Schlusstag des body-Tags ein Zeilenumbruch und zwei Leerzeichen befinden.

+

Anmerkungen

+ +

Spezifikation

+

lastChild (en)

+

Siehe auch:

+ +

{{ languages( { "fr": "fr/DOM/element.lastChild", "ja": "ja/DOM/element.lastChild", "pl": "pl/DOM/element.lastChild" , "zh-cn": "zh-cn/DOM/Node.lastChild" } ) }}

diff --git a/files/de/web/api/node/nextsibling/index.html b/files/de/web/api/node/nextsibling/index.html new file mode 100644 index 0000000000..414e75a8ce --- /dev/null +++ b/files/de/web/api/node/nextsibling/index.html @@ -0,0 +1,60 @@ +--- +title: Node.nextSibling +slug: Web/API/Node/nextSibling +translation_of: Web/API/Node/nextSibling +--- +

{{ ApiRef() }}

+

Allgemein

+

Gibt den Datenknoten zurück, der entsprechend der childNodes-Liste des Elternelements direkt auf den gegebenen Datenknoten folgt. Falls der übergebene Knoten bereits der letzte dieser Liste ist, wird null zurückgegeben.

+

Syntax

+
nextNode = node.nextSibling;
+
+

Beispiele

+

Folgendes HTML-Dokument ist gegeben:

+
<!DOCTYPE html>
+<html>
+  <body>
+    <div>Das ist eine DIV-Box</div>
+    <p>Hier steht Text!</p>
+  </body>
+</html>
+
+

Mit folgendem Code kann der Name des Geschwisterelements der DIV-Box ermittelt werden:

+
// Diese Variable speichert eine Referenz auf das Erste Element, das <body> enthält, also die DIV-Box
+	var element = document.body.children[0];
+
+	// Nun ermitteln wir das folgende Element
+	var folgeElement = element.nextSibling;
+
+	// Ausgabe des nodeNames
+	alert(folgeElement.nodeName);
+
+

Erläuterung:

+

Die Variable element enthält das erste Kindelement des <body>-Tags, also die DIV-Box.
+ folgeElement speichert den ersten Geschwisterknoten der DIV-Box. In diesem Fall ist das ein Textknoten der einen Zeilenvorschub und vier Leerzeichen enthält, die sich in dem HTML-Dokument zwischen dem > der DIV-Box und dem < des <p> befinden. Das alert()-Fenster gibt somit #text aus.

+

Folgendermaßen können alle nachfolgenden Geschwisterknoten ermittelt werden:

+
var element = document.body.children[0];
+var liste = [];
+
+while(element.nextSibling) {
+  var element = liste[liste.push(element.nextSibling)-1];
+}
+
+

Das Skript erzeugt ein Array liste mit folgendem Inhalt:

+
Array[3]
+  0: Text
+  1: HTMLParagraphElement
+  2: Text
+
+

Anmerkungen

+

Am obigen Beispiel lässt sich klar erkennen, dass einige Male ein #text-Knoten im Index auftaucht. Das kommt immer dann vor, wenn sich zwischen den Elementen Whitespace befindet. Da die Eigenschaft nextSibling auch Textknoten berücksichtigt, landet dieser Whitespace letztendlich als Solcher im Index. Falls dies nicht erwünscht ist, sollten Sie statt nextSibling die Eigenschaft {{ domxref("Element.nextElementSibling") }} verwenden

+

Spezifikationen

+ +

{{ languages( { "fr": "fr/DOM/element.nextSibling", "ja": "ja/DOM/element.nextSibling", "pl": "pl/DOM/element.nextSibling" } ) }}

+

Siehe auch

+ diff --git a/files/de/web/api/node/nodevalue/index.html b/files/de/web/api/node/nodevalue/index.html new file mode 100644 index 0000000000..ab9720812e --- /dev/null +++ b/files/de/web/api/node/nodevalue/index.html @@ -0,0 +1,88 @@ +--- +title: Node.nodeValue +slug: Web/API/Node/nodeValue +tags: + - API DOM Gecko Property +translation_of: Web/API/Node/nodeValue +--- +
+
{{APIRef("DOM")}}
+
+ +

Die Node.nodeValue Eigenschaft gibt den Wert der aktuellen Node zurück oder setzt ihn.

+ +

Syntax

+ +
value = node.nodeValue;
+
+ +

value ist ein string der den Inhalt, falls es ihn gibt, der aktuellen node enthält.

+ +

Notizen

+ +

Für das Dokument selbst, gibt nodeValue  null zurück. Für Text, Kommentar, und CDATA nodes, gibt nodeValue den Inhalt der node zurück. Für attribute nodes, wird der Inhalt des Attributes zurückgegeben.

+ +

Die folgende Tabelle zeigt die return Werte der unterschiedlichen Elemente:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attrvalue of attribute
CDATASectionInhalt der CDATA Section
CommentInhalt des comments
Documentnull
DocumentFragmentnull
DocumentTypenull
Elementnull
NamedNodeMapnull
EntityReferencenull
Notationnull
ProcessingInstructionGesamter Inhalt, ausgenommen des target
TextInhalt der text node
+ +

Wenn nodeValue als null definiert wird, hat das null setzen keine Auswirkung.

+ +

Spezifikation

+ + diff --git a/files/de/web/api/node/normalize/index.html b/files/de/web/api/node/normalize/index.html new file mode 100644 index 0000000000..e49f29e397 --- /dev/null +++ b/files/de/web/api/node/normalize/index.html @@ -0,0 +1,49 @@ +--- +title: Node.normalize() +slug: Web/API/Node/normalize +tags: + - API + - DOM + - Méthode + - Node + - Referenz +translation_of: Web/API/Node/normalize +--- +
+
{{APIRef("DOM")}}
+
+ +

Die Node.normalize() Methode fügt die ausgewählte Node und all Ihre Kindelemente in eine "normalisierte" Form. In einer normalisierten Node sind keine Textnodes leer und es gibt keine parallel existierenden Textnodes.

+ +

Schreibweise

+ +
element.normalize();
+
+ +

Beispiel

+ +
var wrapper = document.createElement("div");
+
+wrapper.appendChild( document.createTextNode("Teil 1 ") );
+wrapper.appendChild( document.createTextNode("Teil 2 ") );
+
+// Her wäre: wrapper.childNodes.length === 2
+// wrapper.childNodes[0].textContent === "Teil 1 "
+// wrapper.childNodes[1].textContent === "Teil 2 "
+
+wrapper.normalize();
+
+// Jetzt: wrapper.childNodes.length === 1
+// wrapper.childNodes[0].textContent === "Teil 1 Teil 2 "
+ +

Spezifikation

+ + + +

Verwandte Themen

+ + diff --git a/files/de/web/api/node/parentnode/index.html b/files/de/web/api/node/parentnode/index.html new file mode 100644 index 0000000000..6481d10a86 --- /dev/null +++ b/files/de/web/api/node/parentnode/index.html @@ -0,0 +1,79 @@ +--- +title: Node.parentNode +slug: Web/API/Node/parentNode +translation_of: Web/API/Node/parentNode +--- +

{{ ApiRef() }}

+

Allgemein

+

Gibt das Elternelement des gegebenen Datenknotens, entsprechend des DOM-Baums zurück.

+

Syntax

+
elternelement = node.parentNode
+
+

elternelement enthält das Elternelement des gegebenen Datenknotens.

+

Beispiel

+
var dokument = document.documentElement.parentNode;
+
+

Anmerkungen

+ +

Siehe auch

+ +

Browserunterstützung

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{ CompatGeckoDesktop(1.0) }}0.2{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoMobile(1) }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+

Spezifikation

+

DOM Level 2 Core: Node.parentNode (en)

+

{{ languages( { "it": "it/DOM/element.parentNode", "ja": "ja/DOM/element.parentNode", "fr": "fr/DOM/element.parentNode", "pl": "pl/DOM/element.parentNode" , "zh-cn": "zh-cn/DOM/Node.parentNode" } ) }}

diff --git a/files/de/web/api/node/previoussibling/index.html b/files/de/web/api/node/previoussibling/index.html new file mode 100644 index 0000000000..0a5bd2f518 --- /dev/null +++ b/files/de/web/api/node/previoussibling/index.html @@ -0,0 +1,69 @@ +--- +title: Node.previousSibling +slug: Web/API/Node/previousSibling +translation_of: Web/API/Node/previousSibling +--- +

{{ ApiRef() }}

+

{{ languages( { "fr": "fr/DOM/element.previousSibling", "ja": "ja/DOM/element.previousSibling", "pl": "pl/DOM/element.previousSibling", "zh-cn": "zh-cn/DOM/Node.previousSibling" } ) }}

+

Allgemein

+

Gibt den Datenknoten zurück, der entsprechend der childNodes-Liste des Elternelements dem gegebenen Datenknoten direkt vorangestellt ist. Falls der übergebene Knoten bereits der erste in dieser Liste ist, wird null zurückgegeben.

+

Syntax

+
vorangestellterKnoten = node.previousSibling;
+
+

Beispiele

+

Folgendes HTML-Dokument ist gegeben:

+
<!DOCTYPE html>
+<html>
+  <body>
+    <div>Das ist eine DIV-Box</div>
+    <p>Hier steht Text!</p>
+    <ul>
+      <li>Punkt 1</li>
+      <li>Punkt 2</li>
+    </ul>
+  </body>
+</html>
+
+

So kann der vorangestellte Datenknoten von <ul> ermittelt werden:

+
	// Diese Variable speichert eine Referenz auf das letzte Element, das <body> enthält, also <ul>
+	var element = document.body.children[2];
+
+	// Nun ermitteln wir durch previousSibling den vorangestellten Knoten
+	var vorangestellterKnoten = element.previousSibling;
+
+	// Ausgabe des Knoten-Namens
+	alert(vorangestellterKnoten.nodeName);
+
+

Erläuterung:

+

Die Variable element enthält das letzte Kindelement des -Tags, also <ul>. vorangestellterKnoten speichert den direkt vorangestellten Geschwisterknoten von <ul>. In diesem Fall ist das ein Textknoten der einen Zeilenvorschub und vier Leerzeichen enthält, die sich in dem HTML-Dokument zwischen dem > von <p> und dem < des <ul> befinden. Das alert()-Fenster gibt somit #text aus.

+

So können alle vorangestellten Datenknoten eines Elements ermittelt werden:

+
var element = document.body.children[2];
+var liste = [];
+
+while(element.previousSibling) {
+  var element = liste[liste.push(element.previousSibling)-1];
+}
+
+

Das Skript erzeugt ein Array liste mit folgendem Inhalt:

+
Array[5]
+  0: Text
+  1: HTMLParagraphElement
+  2: Text
+  3: HTMLDivElement
+  4: Text
+
+

Anmerkungen

+

Um statt dem vorangestellten Datenknoten den Nächsten zu erhalten, verwenden Sie {{ domxref("Node.nextSibling") }}.
+ Da die Eigenschaft previousSibling Textknoten berücksichtigt, kann es sein, dass Sie statt des vorangestellten Elements einen Textknoten als Rückgabewert erhalten. Oft passiert das durch Whitespace aller Art (z.B. Leerzeichen, Zeilenvorschübe), der sich zwischen den beiden Elementen befindet und von previousSibling als Textknoten interpretiert wird.
+ Falls Textknoten nicht berücksichtigt werden sollen, verwenden Sie stattdessen {{ domxref("Element.previousElementSibling") }}

+

Spezifikationen

+ +

Siehe auch

+ diff --git a/files/de/web/api/node/removechild/index.html b/files/de/web/api/node/removechild/index.html new file mode 100644 index 0000000000..86a8dfd460 --- /dev/null +++ b/files/de/web/api/node/removechild/index.html @@ -0,0 +1,82 @@ +--- +title: Node.removeChild() +slug: Web/API/Node/removeChild +tags: + - API + - DOM + - Entfernen + - Knoten + - Löschen + - Methode(2) + - Referenz +translation_of: Web/API/Node/removeChild +--- +
+
{{APIRef("DOM")}}
+
+ +

Die Methode Node.removeChild() entfernt einen Kindknoten aus dem DOM. Gibt den entfernten Knoten zurück.

+ +

Syntax

+ +
var oldChild = element.removeChild(child);
+ODER
+element.removeChild(child);
+
+ + + +

Der entfernte Kindknoten bleibt im Speicher erhalten, ist aber nicht länger Teil des DOM. Mit der ersten Syntax-Form ist es möglich, den entfernten Knoten später im Code wieder zu verwenden, über die oldChild Objektreferenz. In der zweiten Form wird jedoch keine oldChild-Refernenz behalten, also wird (vorausgesetzt dass nirgendwo anders im Code eine Referenz gehalten wird) der Knoten unbenutzbar und nicht erreichbar, und wird nach kurzer Zeit automatisch aus dem Speicher entfernt. 

+ +

Wenn child kein Kind des Knotens element ist, wirft die Methode eine Exception. Dies passiert auch wenn child zwar zum Aufruf der Methode ein Kind von element war, aber durch einen beim Entfernen des Knotens aufgerufenen Event Handler bereits aus dem DOM entfernt wurde (z.B. blur).

+ +

 

+ +

Beispiele

+ +
<!-- Beispiel HTML -->
+
+<div id="top" align="center">
+  <div id="nested"></div>
+</div>
+
+ +
// Ein bestimmtes Element entfernen, wenn der Elternknoten bekannt ist
+var d = document.getElementById("top");
+var d_nested = document.getElementById("nested");
+var throwawayNode = d.removeChild(d_nested);
+
+ +
// Ein bestimmtes Element entfernen, ohne den Elternknoten zu kennen
+var node = document.getElementById("nested");
+if (node.parentNode) {
+  node.parentNode.removeChild(node);
+}
+
+ +
// Alle Kindknoten eines Elements entfernen
+var element = document.getElementById("top");
+while (element.firstChild) {
+  element.removeChild(element.firstChild);
+}
+
+ +

Spezifikation

+ + + +

Siehe auch

+ + diff --git a/files/de/web/api/node/replacechild/index.html b/files/de/web/api/node/replacechild/index.html new file mode 100644 index 0000000000..09886ba653 --- /dev/null +++ b/files/de/web/api/node/replacechild/index.html @@ -0,0 +1,61 @@ +--- +title: Node.replaceChild +slug: Web/API/Node/replaceChild +translation_of: Web/API/Node/replaceChild +--- +

{{ ApiRef() }}

+ +

Zusammenfassung

+ +

Die Node.replaceChild()-Methode ersetzt den Kind-Knoten (child node) innerhalb des gegebenen Eltern-Knotens (parent node) durch einen anderen.

+ +

Syntax

+ +
replacedNode = parentNode.replaceChild(newChild, oldChild);
+
+ + + +

Beispiel

+ +
// <div>
+//  <span id="childSpan">foo bar</span>
+// </div>
+
+// erzeuge einen leeren Element-Knoten
+// ohne ID, Attribute oder Inhalt
+var sp1 = document.createElement("span");
+
+// setze sein id Attribut auf 'newSpan'
+sp1.setAttribute("id", "newSpan");
+
+// Inhalt für das neue Element erzeugen
+var sp1_content = document.createTextNode("new replacement span element.");
+
+// den erzeugten Inhalt an das Element anhängen
+sp1.appendChild(sp1_content);
+
+// Referenz auf den zu ersetzenden Knoten erzeugen
+var sp2 = document.getElementById("childSpan");
+var parentDiv = sp2.parentNode;
+
+// den existierenden Knoten sp2 mit dem neuen Span-Element sp1 ersetzen
+parentDiv.replaceChild(sp1, sp2);
+
+// Ergebnis:
+// <div>
+//   <span id="newSpan">new replacement span element.</span>
+// </div>
+
+ +

Spezifikation

+ +

DOM Level 1 Core: replaceChild

+ +

DOM Level 2 Core: replaceChild

+ +

{{ languages( { "fr": "fr/DOM/element.replaceChild", "ja": "ja/DOM/element.replaceChild", "pl": "pl/DOM/element.replaceChild", "zh-cn": "zh-cn/DOM/Node.replaceChild" } ) }}

diff --git a/files/de/web/api/node/setuserdata/index.html b/files/de/web/api/node/setuserdata/index.html new file mode 100644 index 0000000000..7c4c714d01 --- /dev/null +++ b/files/de/web/api/node/setuserdata/index.html @@ -0,0 +1,121 @@ +--- +title: Node.setUserData() +slug: Web/API/Node/setUserData +translation_of: Web/API/Node/setUserData +--- +
{{APIRef("DOM")}}{{obsolete_header}}
+ +

Die Methode Node.setUserData()erlaubt es dem Benutzer Daten dem Element hinzuzufügen (oder löschen), ohne dabei die DOM zu modifizieren. Beachte dabei, dass die Daten durch das Nutzen von {{domxref("Node.importNode")}}, {{domxref("Node.cloneNode()")}} und {{domxref("Node.renameNode()")}} nicht mitgegeben werden kann (jedoch kann {{domxref("Node.adoptNode")}} die Information behalten), und bei Vergleichstest mit {{domxref("Node.isEqualNode()")}} werden die Daten nicht berücksichtigt.

+ +

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.

+ +
+

The Node.getUserData and {{domxref("Node.setUserData")}} methods are no longer available from Web content. {{domxref("Element.dataset")}} or WeakMap can be used instead.

+
+ +

Syntax

+ +
var prevUserData = someNode.setUserData(userKey, userData, handler);
+ +

Parameters

+ + + +

Beispiel

+ +
var d = document.implementation.createDocument('', 'test', null);
+d.documentElement.setUserData('key', 15, {handle:function (o, k, d, s, ds) {console.log(o+'::'+k+'::'+d+'::'+s+'::'+ds)}}); // 2::key::15::[object Element]::[object Element]
+console.log(d.documentElement.getUserData('key')); // 15
+var e = document.importNode(d.documentElement, true); // causes handler to be called
+console.log(e.getUserData('key')); // null since user data is not copied
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationenStatusKommentar
{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}{{Spec2('DOM WHATWG')}}Removed from the specification.
{{SpecName('DOM3 Core', 'core.html#Node3-setUserData', 'Node.setUserData()')}}{{Spec2('DOM3 Core')}}Initial definition
+ +

Browser Kompabilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}{{CompatGeckoDesktop("1.0")}}
+ {{CompatNo}} {{CompatGeckoDesktop("22.0")}}[1]		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatGeckoMobile("1.0")}}
+ {{CompatNo}} {{CompatGeckoMobile("22.0")}}[1]		{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] The method is still available from within chrome scripts.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/node/textcontent/index.html b/files/de/web/api/node/textcontent/index.html new file mode 100644 index 0000000000..c237b6ee70 --- /dev/null +++ b/files/de/web/api/node/textcontent/index.html @@ -0,0 +1,69 @@ +--- +title: Node.textContent +slug: Web/API/Node/textContent +tags: + - API + - DOM + - Eigenschaft + - Kommando API + - NeedsSpecTable + - Referenz +translation_of: Web/API/Node/textContent +--- +
{{APIRef("DOM")}}
+ +

Die Node.textContent Eigenschaft repräsentiert den Text-Inhalt einer Node und ihrer untergeordneten Elemente.

+ +

Syntax

+ +
var text = element.textContent;
+element.textContent = "Dies ist ein Beispiel-Text";
+
+ +

Beschreibung

+ + + +

Unterschiede zu innerText

+ +

Internet Explorer hat element.innerText eingeführt. Die Absicht ist ähnlich, weist aber die folgenden Unterschiede auf:

+ + + +

Unterschiede zu innerHTML

+ +

innerHTML gibt, wie der Name schon sagt, das HTML zurück. Sehr häufig wird dies benutzt, um den Text aus einem Element abzurufen oder ihn zu ändern. Stattdessen sollte lieber textContent verwendet werden. Da der Text nicht als HTML geparst wird, ist es sehr wahrscheinlich, dass die Performance besser ist. Weiterhin umgeht man so auch einen möglichen XSS-Angriffspunkt.

+ +

Beispiel

+ +
// Nehmen wir das folgende HTML Fragment:
+//   <div id="divA">Hier ist <span>etwas</span> Text</div>
+
+// Abrufen des Text-Inhalts:
+var text = document.getElementById("divA").textContent;
+// |text| wird auf "Hier ist etwas Text" gesetzt
+
+// Setzen des Text-Inhalts:
+document.getElementById("divA").textContent = "Hier ist auch Text";
+// Das HTML von divA sieht nun so aus:
+//   <div id="divA">Hier ist auch Text</div>
+
+ +

Browser Kompatibilität

+ +

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

+ +

Spezifikation

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