diff options
Diffstat (limited to 'files/de/web/api/node')
| -rw-r--r-- | files/de/web/api/node/appendchild/index.html | 144 | ||||
| -rw-r--r-- | files/de/web/api/node/childnodes/index.html | 70 | ||||
| -rw-r--r-- | files/de/web/api/node/clonenode/index.html | 135 | ||||
| -rw-r--r-- | files/de/web/api/node/firstchild/index.html | 62 | ||||
| -rw-r--r-- | files/de/web/api/node/haschildnodes/index.html | 120 | ||||
| -rw-r--r-- | files/de/web/api/node/index.html | 365 | ||||
| -rw-r--r-- | files/de/web/api/node/innertext/index.html | 90 | ||||
| -rw-r--r-- | files/de/web/api/node/lastchild/index.html | 41 | ||||
| -rw-r--r-- | files/de/web/api/node/nextsibling/index.html | 60 | ||||
| -rw-r--r-- | files/de/web/api/node/nodevalue/index.html | 88 | ||||
| -rw-r--r-- | files/de/web/api/node/normalize/index.html | 49 | ||||
| -rw-r--r-- | files/de/web/api/node/parentnode/index.html | 79 | ||||
| -rw-r--r-- | files/de/web/api/node/previoussibling/index.html | 69 | ||||
| -rw-r--r-- | files/de/web/api/node/removechild/index.html | 82 | ||||
| -rw-r--r-- | files/de/web/api/node/replacechild/index.html | 61 | ||||
| -rw-r--r-- | files/de/web/api/node/setuserdata/index.html | 121 | ||||
| -rw-r--r-- | files/de/web/api/node/textcontent/index.html | 69 |
17 files changed, 1705 insertions, 0 deletions
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 +--- +<div>{{APIRef("DOM")}}</div> + +<p>Die <code><strong>Node.appendChild()</strong></code> Methode fügt einen Kind-Knoten am Ende der Liste aller Kinder des angegebenen Eltern-Knotens an (to append = anhängen).</p> + +<p>Wenn das gegebene Kind eine Referenz zu einem existierenden Knoten im Dokument ist, wird <code>appendChild()</code> 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.</p> + +<p>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 <code>cloneNode</code> gemacht wurden, werden nicht automatisch Synchron gehalten.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>aChild</em> = <em>element</em>.appendChild(<em>aChild</em>);</pre> + +<h2 id="Example" name="Example">Parameter</h2> + +<p><code>aChild</code></p> + +<p>Der Knoten, der an den gegebenen Eltern-Knoten angehängt wird (für gewöhnlich ein Element).</p> + +<h2 id="Example" name="Example">Rückgabewert</h2> + +<p>Der Rückgabewert ist das angehängte Kindelement (<code>aChild</code>), außer wenn aChild ein {{domxref("DocumentFragment")}} ist. In diesem Fall wird ein {{domxref("DocumentFragment")}} zurückgegeben.</p> + +<h2 id="Example" name="Example">Anmerkungen</h2> + +<p>Eine Verkettung kann anders ablaufen als erwartet, da appendChild() das Kindelement zurück gibt.</p> + +<pre class="line-numbers language-html"><code class="language-html">var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));</code></pre> + +<p>Setzt nur <code>aBlock</code> auf <code><b></b></code>, was möglicherweise nicht das gewünschte ist.</p> + +<h2 id="Example" name="Example">Beispiele</h2> + +<pre class="brush:js">// 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);</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>No change from {{SpecName("DOM3 Core")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>No change from {{SpecName("DOM2 Core")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>No change from {{SpecName("DOM1")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basis Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basis Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{domxref("Node.removeChild()")}}</li> + <li>{{domxref("Node.replaceChild()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> + <li>{{domxref("Node.hasChildNodes()")}}</li> + <li>{{domxref("ParentNode.append()")}}</li> +</ul> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">Allgemein</h3> +<p><code>childNodes</code> gibt eine {{ domxref('NodeList') }}, welche alle Kindknoten (<code>childNodes</code>) eines bestimmten HTML-Elements enthält, zurück.</p> +<h3 id="Syntax" name="Syntax">Syntax</h3> +<pre class="eval">var <var>nodeList</var> = referenzElement.childNodes; +</pre> +<p><var>nodeList</var> ist eine Liste, die alle Kindknoten eines bestimmten Elements der Reihenfolge nach enthält. Falls das Element keine Kindknoten enthält, gibt <code>childNodes</code> eine leere <code>NodeList</code> zurück.<br> + <br> + Diese Eigenschaft kann nur ausgelesen werden (read-only).</p> +<h3 id="Beispiel" name="Beispiel">Beispiel</h3> +<p>Folgendes HTML-Dokument liegt vor:</p> +<pre class="brush:html"><!DOCTYPE html> +<html> + <body> + <h3>Neue Mitarbeiter eingestellt</h3> + <p>Dank der guten Konjunktur letzten Jahres [...]</p> + </body> +</html> +</pre> +<p>Nun sollen die <code>childNodes</code> von <code><body></code> ausgelesen und in einer Liste namens <code><var>nodeList</var></code> gespeichert werden:</p> +<pre class="brush:javascript">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); + } +} +</pre> +<p><br> + Diese Liste ist ständig aktuell. Jede Änderung am referenz-Element (hier <code><body></code>) bewirkt eine aktualisierung der Liste.<br> + Wenn Sie also beispielsweise das erste Element in der Liste löschen, rückt automatisch das zweite Element an Stelle des Ersten.<br> + Deshalb lassen sich z.B. auf diese Art alle Kindknoten eines Elements löschen:</p> +<pre class="brush:javascript">while(bd.firstChild) { + bd.removeChild(bd.firstChild); +} +</pre> +<h3 id="Notes" name="Notes">Anmerkungen</h3> +<p>Mit <code>childNodes</code> erhalten Sie eine Liste <strong>aller</strong> Kindknoten, <strong>einschließlich</strong> derer vom Typ {{ domxref("CharacterData") }}. Wenn Sie diese Datenknoten nicht im Index haben wollen, verwenden Sie statt <code>childNodes</code> die Eigenschaft {{ domxref('Element.children') }}.</p> +<p>Die Einträge in <var><code>nodeList</code></var> 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 <var><code>nodeList</code></var> aufgeführten Elements auszulesen, muss man die eigenschaft <code>nodeName</code> auslesen:</p> +<pre class="brush:javascript">var name = nodeList[i].nodeName;</pre> +<p>Das <code>document</code> Objekt hat zwei Kindknoten: Die <code>Doctype</code>-Deklaration und das <code>root</code>-Element, das eine Eigenschaft von {{ domxref("Document") }} ist.<br> + Folgendermaßen kann darauf zugegriffen werden:</p> +<pre class="brush:javascript">var root = document.documentElement;</pre> +<p>In (X)HTML-Dokumenten stellt das <code>HTML</code>-Element das <code>root</code>-Element dar.</p> +<h4 id="See_Also" name="See_Also">Siehe auch</h4> +<ul> + <li>{{ domxref("Node") }}</li> + <li>{{ domxref("Node.firstChild") }}</li> + <li>{{ domxref("Node.nodeName") }}</li> + <li>{{ domxref('Element.children') }}</li> + <li>{{ domxref("CharacterData") }}</li> +</ul> +<h3 id="Specification" name="Specification">Spezifikationen</h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1451460987">W3C DOM 2 Core: childNodes</a> (en)</li> + <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-1451460987">W3C DOM 3 Core: childNodes</a> (en)</li> + <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-536297177">W3C DOM 3 NodeList interface</a> (en)</li> +</ul> +<p>{{ 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" } ) }}</p> 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 +--- +<div>{{APIRef("DOM")}}</div> + +<h2 id="Summary" name="Summary">Übersicht</h2> + +<p>Gibt ein Duplikat des Knotens, auf dem diese Methode aufgerufen wurde, zurück.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <var>dupNode</var> = <var>node</var>.cloneNode(<var>deep</var>); +</pre> + +<dl> + <dt><code>node</code></dt> + <dd>Der Knoten, welcher dupliziert werden soll.</dd> + <dt><code>dupNode</code></dt> + <dd>Der duplizierte Knoten.</dd> + <dt><code>deep</code></dt> + <dd><code>true</code> wenn die Kindknoten des Knotens ebenfalls dupliziert werden sollen, <code>false</code> wenn nur der Knoten dupliziert werden soll.</dd> +</dl> + +<div class="note"> +<p><strong>Hinweis:</strong> In der DOM4 Spezifikation (implementiert in Gecko 13.0 {{geckoRelease(13)}}), ist das Argument <code>deep</code> optional. Es ist dann laut Spezifikation <strong><code>true</code></strong>.</p> + +<p>Leider wurde dies in der letzten Spezifikation geändert, sodass der Standardwert nun <strong><code>false</code></strong> ist. Auch wenn es immer noch optional ist, sollte man das Argument <code>deep</code> aus diesen Kompatibilitätsgründen setzen. Ab Gecko 28.0 {{geckoRelease(28)}} warnt die Konsole den Entwickler, wenn das Argument nicht gesetzt ist.</p> +</div> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush: js"> var p = document.getElementById("para1"); + var p_prime = p.cloneNode(true); +</pre> + +<h2 id="Notes" name="Notes">Hinweise</h2> + +<p id="not-event-listeners">Der duplizierte Knoten enthält alle Attribute und deren Werte, aber nicht die Eventlistener welche via <a href="/en-US/docs/DOM/element.addEventListener" title="/en-US/docs/DOM/element.addEventListener"><code>addEventListener()</code></a> oder über die jeweilige Elementeigenschaft (z.B. <code>node.onclick = function</code>) gesetzt wurden. Im Fall eines <code><canvas></code>-Elements wird das gezeichnete Bild <em>nicht</em> mitkopiert.</p> + +<p>Der mit <code>cloneNode()</code> 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.</p> + +<p>Wenn <code>deep</code> auf <code>false</code> gesetzt ist, werden die Kindknoten nicht mitkopiert. Dies schließt ebenfalls alle Textelemente mit ein, da diese in einem oder mehreren Kindknoten enthalten sind.</p> + +<div class="warning"><strong>Warnung:</strong> Die Verwendung von <code>cloneNode()</code> kann dazu führen, dass die selbe ID im Dokument mehrmals existiert.</div> + +<p>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 <code>name</code> Attribut überlegt werden.</p> + +<p>Um einen Knoten aus einem anderen Dokument zu kopieren sollte die {{domxref("Document.importNode()")}} verwendet werden.</p> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>deep</code> as an optional parameter</td> + <td> + <p>Ja</p> + + <p>(Standard: <code>false</code>)</p> + </td> + <td>{{CompatGeckoDesktop("13.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td> + <p>Yes</p> + + <p>(default is <code>false</code>)</p> + </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome für Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>deep</code> as an optional parameter</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("13.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<ul> + <li>{{Spec("http://w3.org/TR/DOM-Level-2-Core/core.html#ID-3A0ED0A4","DOM Level 2 Core: cloneNode","REC")}}</li> + <li>{{Spec("http://w3.org/TR/DOM-Level-3-Core/core.html#ID-3A0ED0A4","DOM Level 3 Core: cloneNode","REC")}}</li> + <li><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-node-clonenode" title="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-node-clonenode">DOM4: cloneNode</a> (draft)</li> +</ul> 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 +--- +<p>{{ ApiRef() }}</p> + +<h2 id="Allgemein" name="Allgemein">Allgemein</h2> + +<p><code>firstChild</code> gibt den ersten Kindknoten (<code>childNode</code>) eines Datenknotens zurück.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="eval">var ersterKindknoten = element.firstChild; +</pre> + +<p>Die Variable <var>ersterKindknoten</var> enthält einen Datenknoten.</p> + +<h2 id="Beispiel" name="Beispiel">Beispiel</h2> + +<p>Folgendes HTML-Dokument ist gegeben:</p> + +<pre class="brush:html"><!DOCTYPE html> +<html> + <body> + <h3>Texte</h3> + <p>Hier steht Text!</p> + </body> +</html> +</pre> + +<p>Um auf das erste Kindelement zuzugreifen, kann man folgenden Code verwenden:</p> + +<pre class="brush:javascript">var ersterKindknoten = document.body.firstChild; +</pre> + +<p>In diesem Fall ist der erste Kindknoten ein Textknoten, da sich zwischen dem Schlusstag des <code>Paragraphs</code> und dem Start-Tag von <code><body></code> ein Zeilenumbruch und vier Leerzeichen befinden.</p> + +<h2 id="Anmerkungen" name="Anmerkungen">Anmerkungen</h2> + +<ul> + <li>Gibt <code>null</code> zurück, wenn der gegebene Datenknoten keine Kindknoten hat.</li> + <li><code>firstChild</code> berücksichtigt wie bereits erwähnt auch <code>TextNodes</code>. Daher wird jede Art von Whitespace innerhalb eines Elements als Kindknoten interpretiert. Im obigen Beispiel geschieht das durch die Einrückungen im HTML-Dokument. Falls Sie Textknoten als Rückgabewert ausschließen, und nur HTML-Elemente erhalten wollen, verwenden Sie statt <code>firstChild</code> bitte {{ domxref("Element.firstElementChild") }}.</li> +</ul> + +<h2 id="Spezifikationen" name="Spezifikationen">Spezifikationen</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-firstChild">DOM Level 1 Core: firstChild</a> (en)</li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-169727388">DOM Level 2 Core: firstChild</a> (en)</li> +</ul> + +<h2 id="Siehe_auch">Siehe auch:</h2> + +<ul> + <li>{{ domxref("Node") }}</li> + <li>{{ domxref("Node.lastChild") }}</li> + <li>{{ domxref("Node.previousSibling") }}</li> + <li>{{ domxref("Node.childNodes") }}</li> +</ul> + +<p>{{ languages( { "fr": "fr/DOM/element.firstChild", "ja": "ja/DOM/element.firstChild", "pl": "pl/DOM/element.firstChild", "zh-cn": "zh-cn/DOM/Node.firstChild" } ) }}</p> 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 +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p>Die <code><strong>Node.hasChildNodes()</strong></code> Methode liefert einen <strong>Boolean</strong> Wert der anzeigt ob die aktuelle {{domxref("Node")}} <a href="/en-US/docs/Web/API/Node.childNodes" title="DOM/Node.childNodes">child nodes</a> hat oder nicht.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><em>result</em> = <em>node</em>.hasChildNodes();</code></pre> + +<dl> + <dt><code>result</code></dt> + <dd>enthält den return Wert <code>true</code> oder <code>false</code>.</dd> +</dl> + +<h2 id="Example" name="Example">Beispiele</h2> + +<p>Das nächste Beispiel entfernt die erste child node innerhalb dem element mit der id <code>"foo"</code> wenn foo child nodes enthält.</p> + +<pre class="brush:js">var foo = document.getElementById("foo"); +if (foo.hasChildNodes()) { + // do something with 'foo.childNodes' +} +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush:js">;(function(prototype) { + prototype.hasChildNodes = prototype.hasChildNodes || function() { + return !!this.firstChild; + } +})(Node.prototype); +</pre> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Es gibt unterschiedliche Wege herauszufinden ob die node eine child node enthält.</p> + +<ul> + <li>node.hasChildNodes()</li> + <li>node.firstChild != null (or just node.firstChild)</li> + <li>node.childNodes && node.childNodes.length (or node.childNodes.length > 0)</li> +</ul> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<ul> + <li><a href="https://dom.spec.whatwg.org/#dom-node-haschildnodes">WHATWG: hasChildNodes</a></li> + <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-810594187">hasChildNodes</a></li> +</ul> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>7.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{domxref("Node.childNodes")}}</li> + <li>{{domxref("Node.hasAttributes")}}</li> +</ul> 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 +--- +<div>{{APIRef("DOM")}}</div> + +<p>A <strong><code>Node</code></strong> is an interface from which a number of DOM types inherit, and allows these various types to be treated (or tested) similarly.</p> + +<p>The following interfaces all inherit from <code>Node</code> its methods and properties: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} (which {{domxref("Text")}}, {{domxref("Comment")}}, and {{domxref("CDATASection")}} inherit), {{domxref("ProcessingInstruction")}}, {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}}, {{domxref("EntityReference")}}</p> + +<p>These interfaces may return null in particular cases where the methods and properties are not relevant. They may throw an exception - for example when adding children to a node type for which no children can exist.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>Inherits properties from its parents {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p> + +<dl> + <dt>{{domxref("Node.baseURI")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} representing the base URL. The concept of base URL changes from one language to another; in HTML, it corresponds to the protocol, the domain name and the directory structure, that is all until the last <code>'/'</code>.</dd> + <dt>{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}} {{ Fx_minversion_inline("3") }}</dt> + <dd>(Not available to web content.) The read-only {{ Interface("nsIURI") }} object representing the base URI for the element.</dd> + <dt>{{domxref("Node.childNodes")}} {{readonlyInline}}</dt> + <dd>Returns a live {{domxref("NodeList")}} containing all the children of this node. {{domxref("NodeList")}} being live means that if the children of the <code>Node</code> change, the {{domxref("NodeList")}} object is automatically updated.</dd> + <dt>{{domxref("Node.firstChild")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} representing the first direct child node of the node, or <code>null</code> if the node has no child.</dd> + <dt>{{domxref("Node.lastChild")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} representing the last direct child node of the node, or <code>null</code> if the node has no child.</dd> + <dt>{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} representing the local part of the qualified name of an element. In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML. {{ gecko_minversion_inline("1.9.2") }}<br> + Though recent specifications require <code>localName</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd> + <dt>{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}</dt> + <dd>The namespace URI of this node, or <code>null</code> if it is no namespace. In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2") }}<br> + Though recent specifications require <code>namespaceURI</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd> + <dt>{{domxref("Node.nextSibling")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} representing the next node in the tree, or <code>null</code> if there isn't such node.</dd> + <dt>{{domxref("Node.nodeName")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} containing the name of the <code>Node</code>. The structure of the name will differ with the name type. E.g. An {{domxref("HTMLElement")}} will contain the name of the corresponding tag, like <code>'audio'</code> for an {{domxref("HTMLAudioElement")}}, a {{domxref("Text")}} node will have the <code>'#text'</code> string, or a {{domxref("Document")}} node will have the <code>'#document'</code> string.</dd> + <dt>{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}{{ Fx_minversion_inline("3") }}</dt> + <dd>A {{ Interface("nsIPrincipal") }} representing the node principal.</dd> + <dt>{{domxref("Node.nodeType")}}{{readonlyInline}}</dt> + <dd>Returns an <code>unsigned short</code> representing the type of the node. Possible values are: + <table class="standard-table"> + <tbody> + <tr> + <th scope="col">Name</th> + <th scope="col">Value</th> + </tr> + <tr> + <td><code>ELEMENT_NODE</code></td> + <td><code>1</code></td> + </tr> + <tr> + <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline()}}</td> + <td><code>2</code></td> + </tr> + <tr> + <td><code>TEXT_NODE</code></td> + <td><code>3</code></td> + </tr> + <tr> + <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline()}}</td> + <td><code>4</code></td> + </tr> + <tr> + <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline()}}</td> + <td><code>5</code></td> + </tr> + <tr> + <td><code>ENTITY_NODE</code> {{deprecated_inline()}}</td> + <td><code>6</code></td> + </tr> + <tr> + <td><code>PROCESSING_INSTRUCTION_NODE</code></td> + <td><code>7</code></td> + </tr> + <tr> + <td><code>COMMENT_NODE</code></td> + <td><code>8</code></td> + </tr> + <tr> + <td><code>DOCUMENT_NODE</code></td> + <td><code>9</code></td> + </tr> + <tr> + <td><code>DOCUMENT_TYPE_NODE</code></td> + <td><code>10</code></td> + </tr> + <tr> + <td><code>DOCUMENT_FRAGMENT_NODE</code></td> + <td><code>11</code></td> + </tr> + <tr> + <td><code>NOTATION_NODE</code> {{deprecated_inline()}}</td> + <td><code>12</code></td> + </tr> + </tbody> + </table> + </dd> + <dt>{{domxref("Node.nodeValue")}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the value of an object. For most <code>Node</code> type, this returns <code>null</code> and any set operation is ignored. For nodes of type <code>TEXT_NODE</code> ({{domxref("Text")}} objects), <code>COMMENT_NODE</code> ({{domxref("Comment")}} objects), and <code>PROCESSING_INSTRUCTION_NODE</code> ({{domxref("ProcessingInstruction")}} objects), the value corresponds to the text data contained in the object.</dd> + <dt>{{domxref("Node.ownerDocument")}} {{readonlyInline}}</dt> + <dd>Returns the {{domxref("Document")}} that this node belongs to. If no document is associated with it, returns <code>null</code>.</dd> + <dt>{{domxref("Node.parentNode")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} that is the parent of this node. If there is no such node, like if this node is the top of the tree or if doesn't participate in a tree, this property returns <code>null</code>.</dd> + <dt>{{domxref("Node.parentElement")}} {{readonlyInline}}</dt> + <dd>Returns an {{domxref("Element")}} that is the parent of this node. If the node has no parent, or if that parent is not an {{domxref("Element")}}, this property returns <code>null</code>.</dd> + <dt>{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the namespace prefix of the node, or <code>null</code> if no prefix is specified.<br> + Though recent specifications require <code>prefix</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd> + <dt>{{domxref("Node.previousSibling")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} representing the previous node in the tree, or <code>null</code> if there isn't such node.</dd> + <dt>{{domxref("Node.textContent")}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the textual content of an element and all its descendants.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>Inherits methods from its parents {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p> + +<dl> + <dt>{{domxref("Node.appendChild()")}}</dt> + <dd>Insert a {{domxref("Node")}} as the last child node of this element.</dd> + <dt>{{domxref("Node.cloneNode()")}}</dt> + <dd>Clone a {{domxref("Node")}}, and optionally, all of its contents. By default, it clones the content of the node.</dd> + <dt>{{domxref("Node.compareDocumentPosition()")}}</dt> + <dd> </dd> + <dt>{{domxref("Node.contains()")}}</dt> + <dd> </dd> + <dt>{{domxref("Node.getFeature()")}} {{obsolete_inline}}</dt> + <dd>...</dd> + <dt>{{domxref("Node.getUserData()")}} {{obsolete_inline}}</dt> + <dd>Allows a user to get some {{domxref("DOMUserData")}} from the node.</dd> + <dt>{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}</dt> + <dd>Returns a {{domxref("Boolean")}} indicating if the element has any attributes, or not.</dd> + <dt>{{domxref("Node.hasChildNodes()")}}</dt> + <dd>Returns a {{domxref("Boolean")}} indicating if the element has any child nodes, or not.</dd> + <dt>{{domxref("Node.insertBefore()")}}</dt> + <dd>Inserts the first {{domxref("Node")}} given in a parameter immediately before the second, child of this element, {{domxref("Node")}}.</dd> + <dt>{{domxref("Node.isDefaultNamespace()")}}</dt> + <dd> </dd> + <dt>{{domxref("Node.isEqualNode()")}}</dt> + <dd> </dd> + <dt>{{domxref("Node.isSameNode()")}} {{obsolete_inline}}</dt> + <dd> </dd> + <dt>{{domxref("Node.isSupported()")}} {{obsolete_inline}}</dt> + <dd>Returns a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a> flag containing the result of a test whether the DOM implementation implements a specific feature and this feature is supported by the specific node.</dd> + <dt>{{domxref("Node.lookupPrefix()")}}</dt> + <dd> </dd> + <dt>{{domxref("Node.lookupNamespaceURI()")}}</dt> + <dd> </dd> + <dt>{{domxref("Node.normalize()")}}</dt> + <dd>Clean up all the text nodes under this element (merge adjacent, remove empty).</dd> + <dt>{{domxref("Node.removeChild()")}}</dt> + <dd>Removes a child node from the current element, which must be a child of the current node.</dd> + <dt>{{domxref("Node.replaceChild()")}}</dt> + <dd>Replaces one child {{domxref("Node")}} of the current one with the second one given in parameter.</dd> + <dt>{{domxref("Node.setUserData()")}} {{obsolete_inline}}</dt> + <dd>Allows a user to attach, or remove, {{domxref("DOMUserData")}} to the node.</dd> + <dd> </dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="Browse_all_child_nodes">Browse all child nodes</h3> + +<p>The following function recursively cycles all child nodes of a node and executes a callback function upon them (and upon the parent node itself).</p> + +<pre class="brush: js">function DOMComb (oParent, oCallback) { + if (oParent.hasChildNodes()) { + for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) { + DOMComb(oNode, oCallback); + } + } + oCallback.call(oParent); +}</pre> + +<h4 id="Syntax">Syntax</h4> + +<pre>DOMComb(parentNode, callbackFunction);</pre> + +<h4 id="Description">Description</h4> + +<p>Recursively cycle all child nodes of <code>parentNode</code> and <code>parentNode</code> itself and execute the <code>callbackFunction</code> upon them as <a href="/en-US/docs/JavaScript/Reference/Operators/this" title="en-US/docs/JavaScript/Reference/Operators/this"><code>this</code></a> objects.</p> + +<h4 id="Parameters">Parameters</h4> + +<dl> + <dt><code>parentNode</code></dt> + <dd>The parent node (<code><strong>Node</strong> <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object" title="en-US/docs/JavaScript/Reference/Global_Objects/Object">Object</a></code>).</dd> + <dt><code>callbackFunction</code></dt> + <dd>The callback function (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a>).</dd> +</dl> + +<h4 id="Sample_usage">Sample usage</h4> + +<p>The following example send to the <code>console.log</code> the text content of the body:</p> + +<pre class="brush: js">function printContent () { + if (this.nodeValue) { console.log(this.nodeValue); } +} + +onload = function () { + DOMComb(document.body, printContent); +};</pre> + +<h3 id="Remove_all_children_nested_within_a_node">Remove all children nested within a node</h3> + +<pre class="brush: js">Element.prototype.removeAll = function () { + while (this.firstChild) { this.removeChild(this.firstChild); } + return this; +};</pre> + +<h4 id="Sample_usage_2">Sample usage</h4> + +<pre class="brush: js">/* ... an alternative to document.body.innerHTML = "" ... */ +document.body.removeAll();</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Removed the following properties: <code>attributes</code>, <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br> + Removed the following methods: <code>isSupported()</code>, <code>hasAttributes()</code>, <code>isSameNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData()</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>The methods <code>insertBefore()</code>, <code>replaceChild()</code>, <code>removeChild()</code>, and <code>appendChild()</code> returns one more kind of error (<code>NOT_SUPPORTED_ERR</code>) if called on a {{domxref("Document")}}.<br> + The <code>normalize()</code> method has been modified so that {{domxref("Text")}} node can also be normalized if the proper {{domxref("DOMConfiguration")}} flag is set.<br> + Added the following methods: <code>compareDocumentPosition()</code>, <code>isSameNode()</code>, <code>lookupPrefix()</code>, <code>isDefaultNamespace()</code>, <code>lookupNamespaceURI()</code>, <code>isEqualNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData().</code><br> + Added the following properties: <code>baseURI</code> and <code>textContent</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>The <code>ownerDocument</code> property was slightly modified so that {{domxref("DocumentFragment")}} also returns <code>null</code>.<br> + Added the following properties: <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br> + Added the following methods: <code>normalize()</code>, <code>isSupported()</code> and <code>hasAttributes()</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p> </p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>getFeature()</code>{{obsolete_inline}}</td> + <td>{{CompatNo}}</td> + <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("6.0")}}.<br> + Removed in {{CompatGeckoDesktop("7.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>getUserData()</code>, <code>setUserData()</code> and <code>hasAttributes()</code> {{deprecated_inline}}</td> + <td>{{CompatNo}}</td> + <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br> + Removed in {{CompatGeckoDesktop("22.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>isSameNode()</code> {{obsolete_inline}}</td> + <td>{{CompatNo}}</td> + <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("9.0")}}.<br> + Removed in {{CompatGeckoDesktop("10.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>isSupported()</code> {{obsolete_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br> + Removed in {{CompatGeckoDesktop("22.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>attributes</code></td> + <td>{{CompatNo}}</td> + <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br> + Moved to {{domxref("Element")}} in {{CompatGeckoDesktop("22.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>getFeature()</code>{{obsolete_inline}}</td> + <td>{{CompatNo}}</td> + <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("6.0")}}.<br> + Removed in {{CompatGeckoDesktop("7.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Webkit and Blink incorrectly do not make <code>Node</code> inherit from {{domxref("EventTarget")}}.</p> diff --git a/files/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 +--- +<div>{{APIRef("DOM")}}</div> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p><code><strong>Node.innerText</strong></code> 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.</p> + +<p>{{domxref("Node.textContent")}} ist eine etwas ähnliche Alternative. Es gibt allerdings wichtige Unterschiede zwischen den beiden.</p> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> + <p>Eingeführt, basiert auf dem <a href="https://github.com/rocallahan/innerText-spec">draft of the innerText specification</a>. Siehe <a href="https://github.com/whatwg/html/issues/465">whatwg/html#465</a> und <a href="https://github.com/whatwg/compat/issues/5">whatwg/compat#5</a> für die Historie.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser Kompatibilität</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>4</td> + <td>{{ CompatGeckoDesktop(45) }}</td> + <td>6</td> + <td>9.6 (probably earlier)</td> + <td>3</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.3 (probably earlier)</td> + <td>{{ CompatGeckoMobile(45) }}</td> + <td>10 (probably earlier)</td> + <td>12</td> + <td>4.1 (probably earlier)</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("HTMLElement.outerText")}}</li> + <li>{{domxref("Element.innerHTML")}}</li> +</ul> 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 +--- +<p>{{ ApiRef() }}</p> +<h2 id="Allgemein" name="Allgemein">Allgemein</h2> +<p><code>lastChild</code> gibt den letzten Kindknoten (<code>childNode</code>) eines Datenknotens zurück.</p> +<h2 id="Syntax" name="Syntax">Syntax</h2> +<pre class="eval">var letzterKindknoten = element.lastChild; +</pre> +<p>Die Variable <var>letzterKindknoten</var> enthält einen Datenknoten.</p> +<h2 id="Beispiel" name="Beispiel">Beispiel</h2> +<p>Folgendes HTML-Dokument ist gegeben:</p> +<pre class="brush:html"><!DOCTYPE html> +<html> + <body> + <h3>Texte</h3> + <p>Hier steht Text!</p> + </body> +</html> +</pre> +<p>Um auf das letzte Kindelement zuzugreifen, kann man folgenden Code verwenden:</p> +<pre class="brush:javascript">var letzterKindknoten = document.body.lastChild; +</pre> +<p>In diesem Fall ist der letzte Kindknoten ein Textknoten, da sich zwischen dem Schlusstag des <code>Paragraphs</code> und dem Schlusstag des <code>body</code>-Tags ein Zeilenumbruch und zwei Leerzeichen befinden.</p> +<h2 id="Anmerkungen" name="Anmerkungen">Anmerkungen</h2> +<ul> + <li>Gibt <code>null</code> zurück, wenn der gegebene Datenknoten keine Kindknoten hat.</li> + <li><code>lastChild</code> berücksichtigt wie bereits erwähnt auch <code>TextNodes</code>. Daher wird jede Art von Whitespace innerhalb eines Elements als Kindknoten interpretiert. Im obigen Beispiel geschieht das durch die Einrückungen im HTML-Dokument. Falls Sie Textknoten als Rückgabewert ausschließen, und nur HTML-Elemente erhalten wollen, verwenden Sie statt <code>lastChild</code> bitte {{ domxref("Element.lastElementChild") }}.</li> +</ul> +<h2 id="Spezifikation" name="Spezifikation">Spezifikation</h2> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-61AD09FB">lastChild</a> (en)</p> +<h2 id="Siehe_auch">Siehe auch:</h2> +<ul> + <li>{{ domxref("Node") }}</li> + <li>{{ domxref("Node.firstChild") }}</li> + <li>{{ domxref("Node.nextSibling") }}</li> + <li>{{ domxref("Node.childNodes") }}</li> +</ul> +<p>{{ languages( { "fr": "fr/DOM/element.lastChild", "ja": "ja/DOM/element.lastChild", "pl": "pl/DOM/element.lastChild" , "zh-cn": "zh-cn/DOM/Node.lastChild" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Allgemein" name="Allgemein">Allgemein</h3> +<p>Gibt den Datenknoten zurück, der entsprechend der <code>childNodes</code>-Liste des Elternelements direkt auf den gegebenen Datenknoten folgt. Falls der übergebene Knoten bereits der letzte dieser Liste ist, wird <code>null</code> zurückgegeben.</p> +<h3 id="Syntax" name="Syntax">Syntax</h3> +<pre class="eval">nextNode = node.nextSibling; +</pre> +<h3 id="Beispiel" name="Beispiel">Beispiele</h3> +<p>Folgendes HTML-Dokument ist gegeben:</p> +<pre class="brush:html"><!DOCTYPE html> +<html> + <body> + <div>Das ist eine DIV-Box</div> + <p>Hier steht Text!</p> + </body> +</html> +</pre> +<p>Mit folgendem Code kann der Name des Geschwisterelements der DIV-Box ermittelt werden:</p> +<pre class="brush:javascript">// 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); +</pre> +<p><strong>Erläuterung:</strong></p> +<p>Die Variable <code><var>element</var></code> enthält das erste Kindelement des <code><body></code>-Tags, also die <code>DIV</code>-Box.<br> + <code><var>folgeElement</var></code> 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 <code>></code> der DIV-Box und dem <code><</code> des <code><p></code> befinden. Das <code>alert()</code>-Fenster gibt somit <code>#text</code> aus.</p> +<p>Folgendermaßen können alle nachfolgenden Geschwisterknoten ermittelt werden:</p> +<pre class="brush:javascript">var element = document.body.children[0]; +var liste = []; + +while(element.nextSibling) { + var element = liste[liste.push(element.nextSibling)-1]; +} +</pre> +<p>Das Skript erzeugt ein Array <code>liste</code> mit folgendem Inhalt:</p> +<pre class="eval">Array[3] + 0: Text + 1: HTMLParagraphElement + 2: Text +</pre> +<h3 id="Anmerkungen">Anmerkungen</h3> +<p>Am obigen Beispiel lässt sich klar erkennen, dass einige Male ein <code>#text</code>-Knoten im Index auftaucht. Das kommt immer dann vor, wenn sich zwischen den Elementen Whitespace befindet. Da die Eigenschaft <code>nextSibling</code> auch Textknoten berücksichtigt, landet dieser Whitespace letztendlich als Solcher im Index. Falls dies nicht erwünscht ist, sollten Sie statt <code>nextSibling</code> die Eigenschaft {{ domxref("Element.nextElementSibling") }} verwenden</p> +<h3 id="Specification" name="Specification">Spezifikationen</h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling">DOM Level 1 Core: nextSibling</a> (en)</li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6AC54C2F">DOM Level 2 Core: nextSibling</a> (en)</li> +</ul> +<p>{{ languages( { "fr": "fr/DOM/element.nextSibling", "ja": "ja/DOM/element.nextSibling", "pl": "pl/DOM/element.nextSibling" } ) }}</p> +<h3 id="Siehe_auch">Siehe auch</h3> +<ul> + <li><a href="/En/DOM/Element.nextElementSibling" title="En/DOM/Element.nextElementSibling">Element.nextElementSibling</a></li> +</ul> 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 +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p>Die <code><strong>Node.nodeValue</strong></code> Eigenschaft gibt den Wert der aktuellen Node zurück oder setzt ihn.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>value</var> = <var>node</var>.nodeValue; +</pre> + +<p><code>value</code> ist ein string der den Inhalt, falls es ihn gibt, der aktuellen node enthält.</p> + +<h2 id="Notes" name="Notes">Notizen</h2> + +<p>Für das Dokument selbst, gibt <code>nodeValue</code> <code>null</code> zurück. Für Text, Kommentar, und CDATA nodes, gibt <code>nodeValue</code> den Inhalt der node zurück. Für attribute nodes, wird der Inhalt des Attributes zurückgegeben.</p> + +<p>Die folgende Tabelle zeigt die return Werte der unterschiedlichen Elemente:</p> + +<table> + <thead> + <tr> + <th>Attr</th> + <th>value of attribute</th> + </tr> + </thead> + <tbody> + <tr> + <td>CDATASection</td> + <td>Inhalt der CDATA Section</td> + </tr> + <tr> + <td>Comment</td> + <td>Inhalt des comments</td> + </tr> + <tr> + <td>Document</td> + <td>null</td> + </tr> + <tr> + <td>DocumentFragment</td> + <td>null</td> + </tr> + <tr> + <td>DocumentType</td> + <td>null</td> + </tr> + <tr> + <td>Element</td> + <td>null</td> + </tr> + <tr> + <td>NamedNodeMap</td> + <td>null</td> + </tr> + <tr> + <td>EntityReference</td> + <td>null</td> + </tr> + <tr> + <td>Notation</td> + <td>null</td> + </tr> + <tr> + <td>ProcessingInstruction</td> + <td>Gesamter Inhalt, ausgenommen des target</td> + </tr> + <tr> + <td>Text</td> + <td>Inhalt der text node</td> + </tr> + </tbody> +</table> + +<p>Wenn <code>nodeValue</code> als <code>null</code> definiert wird, hat das null setzen keine Auswirkung.</p> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D080">DOM Level 2 Core: Node.nodeValue</a></li> +</ul> 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 +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p>Die <code><strong>Node.normalize()</strong></code> 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.</p> + +<h2 id="Syntax" name="Syntax">Schreibweise</h2> + +<pre class="syntaxbox"><em>element</em>.normalize(); +</pre> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush:js">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 "</pre> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-normalize">DOM Level 2 Core: Node.normalize</a></li> +</ul> + +<h2 id="See_also" name="See_also">Verwandte Themen</h2> + +<ul> + <li><a href="/en-US/docs/DOM/Text.splitText" title="DOM/Text.splitText"><code>Text.splitText</code></a></li> +</ul> 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 +--- +<p>{{ ApiRef() }}</p> +<h2 id="Allgemein" name="Allgemein">Allgemein</h2> +<p>Gibt das Elternelement des gegebenen Datenknotens, entsprechend des DOM-Baums zurück.</p> +<h2 id="Syntax" name="Syntax">Syntax</h2> +<pre class="eval">elternelement = node.parentNode +</pre> +<p><code><var>elternelement</var></code> enthält das Elternelement des gegebenen Datenknotens.</p> +<h2 id="Beispiel" name="Beispiel">Beispiel</h2> +<pre class="brush:javascript">var dokument = document.documentElement.parentNode; +</pre> +<h2 id="Anmerkungen" name="Anmerkungen">Anmerkungen</h2> +<ul> + <li>Es kann sich bei dem Elternelement um ein {{ domxref("Element") }}, ein {{ domxref("Document") }} oder ein {{ domxref("DocumentFragment") }} handeln.</li> + <li><code>parentNode</code> gibt <code>null</code> zurück bei folgenden Knotentypen: <code>Attr</code>, <code>Document</code>, <code>DocumentFragment</code>, <code>Entity</code>, and <code>Notation</code>.</li> + <li>Außerdem wird <code>null</code> zurückgegeben, wenn der Knoten bisher nicht an den DOM-Baum angefügt wurde (weil er womöglich gerade erst erstellt wurde).</li> +</ul> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li>{{ domxref("Node") }}</li> + <li>{{ Domxref("Node.firstChild") }}</li> + <li>{{ Domxref("Node.lastChild") }}</li> + <li>{{ Domxref("Node.childNodes") }}</li> + <li>{{ Domxref("Node.nextSibling") }}</li> + <li>{{ Domxref("Node.previousSibling") }}</li> +</ul> +<h2 id="Browserunterstützung">Browserunterstützung</h2> +<p>{{ CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatGeckoDesktop(1.0) }}</td> + <td>0.2</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile(1) }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="Spezifikation">Spezifikation</h2> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317">DOM Level 2 Core: Node.parentNode</a> (en)</p> +<p>{{ 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" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<p>{{ languages( { "fr": "fr/DOM/element.previousSibling", "ja": "ja/DOM/element.previousSibling", "pl": "pl/DOM/element.previousSibling", "zh-cn": "zh-cn/DOM/Node.previousSibling" } ) }}</p> +<h3 id="Summary" name="Summary">Allgemein</h3> +<p>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.</p> +<h3 id="Syntax" name="Syntax">Syntax</h3> +<pre class="eval">vorangestellterKnoten = node.previousSibling; +</pre> +<h3 id="Example" name="Example">Beispiele</h3> +<p>Folgendes HTML-Dokument ist gegeben:</p> +<pre class="brush:html"><!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> +</pre> +<p>So kann der vorangestellte Datenknoten von <code><ul></code> ermittelt werden:</p> +<pre class="brush:javascript"> // 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); +</pre> +<p><strong>Erläuterung:</strong></p> +<p>Die Variable <code><var>element</var></code> enthält das letzte Kindelement des -Tags, also <code><ul></code>. <code><var>vorangestellterKnoten</var></code> speichert den direkt vorangestellten Geschwisterknoten von <code><ul></code>. In diesem Fall ist das ein Textknoten der einen Zeilenvorschub und vier Leerzeichen enthält, die sich in dem HTML-Dokument zwischen dem <code>></code> von <code><p></code> und dem <code><</code> des <code><ul></code> befinden. Das alert()-Fenster gibt somit <code>#text</code> aus.</p> +<p>So können alle vorangestellten Datenknoten eines Elements ermittelt werden:</p> +<pre class="brush:javascript">var element = document.body.children[2]; +var liste = []; + +while(element.previousSibling) { + var element = liste[liste.push(element.previousSibling)-1]; +} +</pre> +<p>Das Skript erzeugt ein Array <code><var>liste</var></code> mit folgendem Inhalt:</p> +<pre class="eval">Array[5] + 0: Text + 1: HTMLParagraphElement + 2: Text + 3: HTMLDivElement + 4: Text +</pre> +<h3 id="Notes" name="Notes">Anmerkungen</h3> +<p>Um statt dem vorangestellten Datenknoten den Nächsten zu erhalten, verwenden Sie {{ domxref("Node.nextSibling") }}.<br> + Da die Eigenschaft <code>previousSibling</code> 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 <code>previousSibling</code> als Textknoten interpretiert wird.<br> + Falls Textknoten nicht berücksichtigt werden sollen, verwenden Sie stattdessen {{ domxref("Element.previousElementSibling") }}</p> +<h3 id="Specification" name="Specification">Spezifikationen</h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling">DOM Level 1 Core: previousSibling</a> (en)</li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">DOM Level 2 Core: previousSibling</a> (en)</li> +</ul> +<h3 id="Siehe_auch">Siehe auch</h3> +<ul> + <li>{{ domxref("Node.nextSibling") }}</li> + <li>{{ domxref("Element.previousElementSibling") }}</li> + <li>{{ domxref("Node.childNodes") }}</li> +</ul> 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 +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p>Die Methode <code><strong>Node.removeChild()</strong></code> entfernt einen Kindknoten aus dem DOM. Gibt den entfernten Knoten zurück.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>var oldChild</em> = <em>element</em>.removeChild(<em>child</em>); +<strong>ODER</strong> +<em>element</em>.removeChild(<em>child</em>); +</pre> + +<ul> + <li><code>child</code> ist der Kindknoten, der aus dem DOM entfernt werden soll.</li> + <li><code>element</code> is der Elternknoten von <code>child</code>.</li> + <li><code>oldChild</code> hält eine Referenz auf den entfernten Kindknoten. <code>oldChild</code> === <code>child</code>.</li> +</ul> + +<p>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 <code>oldChild</code> Objektreferenz. In der zweiten Form wird jedoch keine <code style="font-style: normal;">oldChild</code>-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 <a href="/en-US/docs/Web/JavaScript/Memory_Management">automatisch aus dem Speicher entfernt</a>. </p> + +<p>Wenn <code>child</code> kein Kind des Knotens <code>element</code> ist, wirft die Methode eine Exception. Dies passiert auch wenn <code>child</code> zwar zum Aufruf der Methode ein Kind von <code>element</code> war, aber durch einen beim Entfernen des Knotens aufgerufenen Event Handler bereits aus dem DOM entfernt wurde (z.B. blur).</p> + +<p> </p> + +<h2 id="Example" name="Example">Beispiele</h2> + +<pre><!-- Beispiel HTML --> + +<div id="top" align="center"> + <div id="nested"></div> +</div> +</pre> + +<pre class="brush:js">// 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); +</pre> + +<pre class="brush:js">// Ein bestimmtes Element entfernen, ohne den Elternknoten zu kennen +var node = document.getElementById("nested"); +if (node.parentNode) { + node.parentNode.removeChild(node); +} +</pre> + +<pre class="brush:js">// Alle Kindknoten eines Elements entfernen +var element = document.getElementById("top"); +while (element.firstChild) { + element.removeChild(element.firstChild); +} +</pre> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<ul> + <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild">DOM Level 1 Core: removeChild</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1734834066">DOM Level 2 Core: removeChild</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1734834066">DOM Level 3 Core: removeChild</a></li> +</ul> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{domxref("Node.replaceChild")}}</li> + <li>{{domxref("Node.parentNode")}}</li> + <li>{{domxref("ChildNode.remove")}}</li> +</ul> 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 +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Summary" name="Summary">Zusammenfassung</h3> + +<p><strong>Die <code>Node.replaceChild()</code></strong>-Methode ersetzt den Kind-Knoten (<code>child node)</code> <u>innerhalb</u> des gegebenen Eltern-Knotens (<code>parent node</code>) durch einen anderen.</p> + +<h3 id="Syntax" name="Syntax">Syntax</h3> + +<pre class="eval"><em>replacedNode</em> = <em>parentNode</em>.replaceChild(<em>newChild</em>, <em>oldChild</em>); +</pre> + +<ul> + <li><code>newChild</code> ist der neue, <code>oldChild</code> der zu ersetzende Knoten. Falls er bereits im DOM vorhanden ist, wird er zuerst von dort entfernt.</li> + <li><code>oldChild</code> ist der zu ersetzende Knoten.</li> + <li><code>replacedNode</code> ist der ersetzte Knoten, also der selbe wie <code>oldChild</code>.</li> +</ul> + +<h3 id="Example" name="Example">Beispiel</h3> + +<pre>// <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> +</pre> + +<h3 id="Specification" name="Specification">Spezifikation</h3> + +<p><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-replaceChild">DOM Level 1 Core: replaceChild</a></p> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-785887307">DOM Level 2 Core: replaceChild</a></p> + +<p>{{ languages( { "fr": "fr/DOM/element.replaceChild", "ja": "ja/DOM/element.replaceChild", "pl": "pl/DOM/element.replaceChild", "zh-cn": "zh-cn/DOM/Node.replaceChild" } ) }}</p> 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 +--- +<div>{{APIRef("DOM")}}{{obsolete_header}}</div> + +<p>Die Methode <code><strong>Node.setUserData()</strong></code>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.</p> + +<p>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.</p> + +<div class="note"> +<p>The <code>Node.getUserData</code> and {{domxref("Node.setUserData")}} methods are no longer available from Web content. {{domxref("Element.dataset")}} or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/WeakMap"><code>WeakMap</code></a> can be used instead.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>var prevUserData</var> = <var>someNode</var>.setUserData(<var>userKey</var>, <var>userData</var>, <var>handler</var>);</pre> + +<h3 id="Parameters">Parameters</h3> + +<ul> + <li><code>userKey</code> is used as the key by which one may subsequently obtain the stored data. More than one key can be set for a given node.</li> + <li><code>handler</code> is a callback which will be called any time the node is being cloned, imported, renamed, as well as if deleted or adopted; a function can be used or an object implementing the <code>handle</code> method (part of the {{domxref("UserDataHandler")}} interface). The handler will be passed five arguments: an operation type integer (e.g., 1 to indicate a clone operation), the user key, the data on the node, the source node (<code>null</code> if being deleted), the destination node (the newly created node or <code>null</code> if none).If no handler is desired, one must specify <code>null</code>.</li> + <li><code>userData</code> is the object to associate to <code>userKey</code> on someNode. If <code>null</code>, any previously registered object and UserDataHandler associated to <code>userKey</code> on this node will be removed.</li> +</ul> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: js">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 +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikationen</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Removed from the specification.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#Node3-setUserData', 'Node.setUserData()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompabilität">Browser Kompabilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.0")}}<br> + {{CompatNo}} {{CompatGeckoDesktop("22.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("1.0")}}<br> + {{CompatNo}} {{CompatGeckoMobile("22.0")}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] The method is still available from within chrome scripts.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("Node.getUserData()")}}</li> + <li>{{domxref("UserDataHandler")}}</li> + <li>{{domxref("DOMUserData")}}</li> +</ul> 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 +--- +<div>{{APIRef("DOM")}}</div> + +<p>Die <code><strong>Node.textContent</strong></code> Eigenschaft repräsentiert den Text-Inhalt einer Node und ihrer untergeordneten Elemente.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>text</em> = element.textContent; +element.textContent = "Dies ist ein Beispiel-Text"; +</pre> + +<h2 id="Notes" name="Notes">Beschreibung</h2> + +<ul> + <li><code>textContent</code> gibt <code>null</code> zurück, wenn das Element ein D<a href="/en-US/docs/DOM/document" title="DOM/Document">ocument</a>, ein Dokumenten-Typ oder eine Notation ist. Um den gesamten Text und die CDATA Daten für das gesamte Dokument zu bekommen, kann man <code><a href="/en-US/docs/DOM/document.documentElement" title="DOM/document.documentElement">document.documentElement</a>.textContent</code> benutzen.</li> + <li>Handelt es sich bei der Node um eine CDATA Sektion, einen Kommentar, eine Prozess-Anweisun oder eine Text-Node, dann gibt <code>textContent</code> den Text in dieser Node zurück (den <a href="/en-US/docs/DOM/Node.nodeValue" title="DOM/Node/NodeValue/Node.nodeValue">nodeValue</a>).</li> + <li>Für andere Node-Typen gibt <code>textContent</code> die aneinander gehängten <code>textContent</code> Attribute aller Kind-Nodes zurück, aber ohne Kommentare und Prozess-Anweisungen. Dies ist ein leerer String, wenn die Node keine Kinder hat.</li> + <li>Wenn man diese Eigenschaft setzt, werden alle Kinder der Node ersetzt und mit einer einzelnen Text-Node ersetzt, die den neuen Wert beinhaltet.</li> +</ul> + +<h3 id="Unterschiede_zu_innerText">Unterschiede zu <code>innerText</code></h3> + +<p>Internet Explorer hat <code>element.innerText</code> eingeführt. Die Absicht ist ähnlich, weist aber die folgenden Unterschiede auf:</p> + +<ul> + <li>Während <code>textContent</code> den Inhalt aller Element, inklusive {{HTMLElement("script")}} und {{HTMLElement("style")}} Elementen, liefert, macht die IE-spezifische Eigenschaft <code>innerText</code> dies nicht.</li> + <li><code>innerText</code> kennt den Stil und gibt keinen Text versteckter Elemente zurück, was <code>textContent</code> hingegen tut.</li> + <li>Da <code>innerText</code> den CSS-Stil kennt, verursacht es einen Reflow, während <code>textContent</code> dies nicht tut.</li> +</ul> + +<h3 id="Unterschiede_zu_innerHTML">Unterschiede zu <code>innerHTML</code></h3> + +<p><code>innerHTML</code> 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 <code>textContent</code> 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.</p> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush: js">// 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> +</pre> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("api.Node.textContent")}}</p> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Node3-textContent">textContent</a></li> +</ul> |