diff options
Diffstat (limited to 'files/de/web/api/document')
28 files changed, 3062 insertions, 0 deletions
diff --git a/files/de/web/api/document/adoptnode/index.html b/files/de/web/api/document/adoptnode/index.html new file mode 100644 index 0000000000..c996e689c5 --- /dev/null +++ b/files/de/web/api/document/adoptnode/index.html @@ -0,0 +1,53 @@ +--- +title: Document.adoptNode() +slug: Web/API/Document/adoptNode +translation_of: Web/API/Document/adoptNode +--- +<div>{{ ApiRef("DOM") }}</div> + +<div> </div> + +<p>Überträgt einen Knoten. Der Knoten und sein Unterbaum werden aus dem Dokument, in dem sie sich befinden entfernt (so vorhanden), und sein <code><a href="/en-US/docs/DOM/Node.ownerDocument" title="DOM/Node.ownerDocument">ownerDocument</a></code> wird zu dem aktuellen Dokument geändert. Der Knoten kann dann in das aktuelle Dokument eingefügt werden.</p> + +<p><strong>Unterstützt seit Gecko 1.9 (Firefox 3)</strong></p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>knoten</var> = <em>document</em>.adoptNode(<var>externerKnoten</var>); +</pre> + +<dl> + <dt><code><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span>knoten</code></dt> + <dd>Ist der übertragene Knoten, welcher nun dieses Dokument als sein <code><a href="/en-US/docs/DOM/Node.ownerDocument" title="DOM/Node.ownerDocument">ownerDocument</a> </code>hat. Der Elternknoten (<code><a href="/en-US/docs/DOM/Node.parentNode">parentNode</a></code>) is <code>null</code>, da er noch nicht in den Dokumentenbaum eingefügt wurde. Zu beachten ist, dass <code>knoten</code> und <code>externerKnoten</code> nach dem Funktionsaufruf das gleiche Objekt sind.<span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span></dd> + <dt><code>externerKnoten</code></dt> + <dd>Ist der Knoten eines anderes Dokumentes, der übertragen werden soll.</dd> +</dl> + +<h2 id="Example" name="Example">Beispiel</h2> + +<p>{{todo}}</p> + +<h2 id="Notes" name="Notes">Anmerkungen</h2> + +<p>Es kann oassieren, dass der Aufruf von <code>adoptNode</code> fehlschlägt, wenn der Ursprungsknoten von einer anderen Implementierung kommt, was aber bei Browser-Implementierungen kein Problem darstellen sollte.</p> + + +<p></p><p>Nodes from external documents should be cloned using <a href="/de/docs/Web/API/Document/importNode" title="Die Document-Methode importNode() erzeugt eine neue Kopie eines konkreten Knotens (Node) oder Dokumenten-Fragments (DocumentFragment) eines anderen Dokuments, so dass diese dann in das aktuelle Dokument eingefügt werden kann. "><code>document.importNode()</code></a> (or adopted using <a href="/de/docs/Web/API/Document/adoptNode" title="Überträgt einen Knoten. Der Knoten und sein Unterbaum werden aus dem Dokument, in dem sie sich befinden entfernt (so vorhanden), und sein ownerDocument wird zu dem aktuellen Dokument geändert. Der Knoten kann dann in das aktuelle Dokument eingefügt werden."><code>document.adoptNode()</code></a>) before they + can be inserted into the current document. For more on the <a class="new" href="/de/docs/Web/API/Node/ownerDocument" rel="nofollow" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben. Bitte überlege, mitzuwirken!"><code>Node.ownerDocument</code></a> issues, see the + <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">W3C DOM FAQ</a>.</p> + + <p>Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many + sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for + improved future compatibility.</p><p></p> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-adoptNode">DOM Level 3 Core: Document.adoptNode</a></li> +</ul> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/DOM/document.importNode">document.importNode</a></li> +</ul> diff --git a/files/de/web/api/document/alinkcolor/index.html b/files/de/web/api/document/alinkcolor/index.html new file mode 100644 index 0000000000..0c656de5cc --- /dev/null +++ b/files/de/web/api/document/alinkcolor/index.html @@ -0,0 +1,30 @@ +--- +title: Document.alinkColor +slug: Web/API/Document/alinkColor +translation_of: Web/API/Document/alinkColor +--- +<p>{{APIRef("DOM")}} {{ Deprecated_header() }}</p> + +<p>Gibt das Farbattribut eines aktiven Links im Dokumenten body wieder oder setzt es. Ein Link wird in der Zeit eines <code>mousedown</code> und <code>mouseup</code> Events als "aktiv" bezeichnet .</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="eval"><em>color</em> = document.alinkColor +document.alinkColor =<em>color</em> +</pre> + +<p><code>color</code> ist ein String der den Namen der Farbe (z.B., <code>"blue"</code>, <code>"darkblue"</code>, etc.) oder den Hexadezimalwert der Farbe(z.B., <code>#0000FF</code>) enthält. Die Farben samt zugehöriger Hexadezimalcodes können zum Teil hier oder auf ähnlichen Seiten eingesehen werden: <a href="https://html-color-codes.info/">https://html-color-codes.info/ </a></p> + +<h2 id="Notes" name="Notes">Anmerkungen</h2> + +<p>Der Default Wert dieser Eigenschaft in Mozilla Firefox ist rot (<code>#ee0000</code> in hexadezimal).</p> + +<p><code>document.alinkColor</code> ist laut <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Level 2 HTML</a> veraltet. Eine Alternative wäre der CSS Selektor {{ Cssxref(":active") }}.</p> + +<p>Eine weitere Alternative ist <code>document.body.aLink</code>, obwohl diese laut<a class="external" href="http://www.w3.org/TR/html401/struct/global.html#adef-alink"> HTML 4.01</a> ebenfalls veraltet ist und der CSS Selektor präferiert wird.</p> + +<p><a href="en/Gecko">Gecko</a> unterstützt sowohl <code>alinkColor</code>/<code>:active</code> als auch{{ Cssxref(":focus") }}. Der Internet Explorer 6 und 7 unterstützen lediglich <code>alinkColor</code>/<code>:active</code> für <a href="en/HTML/Element/a"> HTML anchor (<a>) links</a> und verhält sich ähnlich wie <code>:focus</code> bei Gecko. <code>:focus</code> wird im IE nicht unterstützt.</p> + +<h2 id="Specification" name="Specification">Browser compatibility</h2> + +<p>{{Compat("api.Document.alinkColor")}}</p> diff --git a/files/de/web/api/document/body/index.html b/files/de/web/api/document/body/index.html new file mode 100644 index 0000000000..cc546cb0ae --- /dev/null +++ b/files/de/web/api/document/body/index.html @@ -0,0 +1,140 @@ +--- +title: Document.body +slug: Web/API/Document/body +translation_of: Web/API/Document/body +--- +<div>{{APIRef("DOM")}}</div> + +<p>Gibt den {{HTMLElement("body")}} oder {{HTMLElement("frameset")}} Knoten des aktuellen Dokuments wieder, oder <code>null</code> falls keines dieser Elemente existiert.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>var objRef</em> = document.body; +document.body = <em>objRef;</em></pre> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush:js">// in HTML: <body id="oldBodyElement"></body> +alert(document.body.id); // "oldBodyElement" + +var aNewBodyElement = document.createElement("body"); + +aNewBodyElement.id = "newBodyElement"; +document.body = aNewBodyElement; +alert(document.body.id); // "newBodyElement" +</pre> + +<h2 id="Notes" name="Notes">Anmerkungen</h2> + +<p><code>document.body</code> ist das Element, welches den Inhalt eines Dokuments enthält. In Dokumenten mit <code><body></code> Inhalt, gibt das <code><body></code> Element den Inhalt aus, in Frameset Dokumenten wiederum, wird das äußerste <code><frameset></code> Element ausgegeben.</p> + +<p>Da <code>body</code> setzbar ist, wird das Setzen eines neuen Body Elements alle aktuellen Elemente des existierenden <code><body></code> Elements entfernen.</p> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<table class="spectable 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#dom-document-body','Document.body')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1','dom.html#dom-document-body','Document.body')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','dom.html#dom-document-body','Document.body')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML','html.html#ID-56360201','Document.body')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM1','level-one-html.html#attribute-body','Document.body')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initiale Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<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>1</td> + <td>{{CompatVersionUnknown}}</td> + <td>2</td> + <td>6</td> + <td>9.6 (möglicherweise früher)</td> + <td>4 (möglicherweise früher)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<p> </p> + +<div class="warning"> +<ol> + <li> + <p>Obwohl <code>document.body</code> eine sehr gute Methode ist, um das <code><body></code> Element in HTML anzusprechen, wird es von Firefox nicht unterstützt, wenn der <code>Content-Type</code> nicht <code>text/html</code> oder <code>application/xhtml+xml</code> ist. Eine sicherere Methode um das <code><body></code> Element anzusprechen ist es, <code>document.getElementsByTagName("body")</code> zu verwenden, welches einen Array mit einem einzigen Item ausgibt. Das ist übertragbar auf HTML und XHTML. Bei denen ist der <code>Content-Type</code> nicht im HTTP response header angegeben.</p> + </li> +</ol> +</div> + +<p> </p> + +<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>5 (probably earlier)</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("document.head")}}</li> +</ul> diff --git a/files/de/web/api/document/createattribute/index.html b/files/de/web/api/document/createattribute/index.html new file mode 100644 index 0000000000..009c6c898d --- /dev/null +++ b/files/de/web/api/document/createattribute/index.html @@ -0,0 +1,76 @@ +--- +title: Document.createAttribute() +slug: Web/API/Document/createAttribute +tags: + - API + - DOM + - Méthode + - Referenz +translation_of: Web/API/Document/createAttribute +--- +<div>{{ ApiRef("DOM") }}</div> + +<p><strong>createAttribute</strong> erstellt einen neuen Attributsknoten und gibt ihn zurück.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>attribute</em> = document.createAttribute(name) +</pre> + +<h3 id="Parameters" name="Parameters">Parameter</h3> + +<ul> + <li><code>attribute</code> ist ein Attributsknoten.</li> + <li><code>name</code> ist ein String, der den Namen des Attributs enthält.</li> +</ul> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush:js"><html> + +<head> +<title> create/set/get Attribut Beispiel</title> + +<script type="text/javascript"> + +function doAttrib() { + var node = document.getElementById("div1"); + var a = document.createAttribute("my_attrib"); + a.value = "newVal"; + node.setAttributeNode(a); + alert(node.getAttribute("my_attrib")); // "newVal" +} + +// Alternative form ohne die Verwendung von createAttribute +//function doAttrib() { +// var node = document.getElementById("div1"); +// node.setAttribute("my_attrib", "newVal"); +// alert(node.getAttribute("my_attrib")); // "newVal" +//} + +</script> +</head> + +<body onload="doAttrib();"> +<div id="div1"> +<p>Some content here</p> +</div> +</body> +</html> +</pre> + +<h2 id="Notes" name="Notes">Bemerkungen</h2> + +<p>Der Rückgabewert ist ein Knoten des Typs <code>attribute</code>. Sobald man diesen wie im vorangegangenen Beispiel hat, kann man ihren Wert festlegen, indem man der <code>nodeValue</code> <em>property</em> einen String zuweist, oder in der alternativen Form durch Benutzung der <a href="/en-US/docs/DOM/element.setAttribute" title="DOM/element.setAttribute">setAttribute()</a> Methode. Der DOM beschränkt auf diese Art nicht, welche Arten von Attributen an das jeweilige Element zugewiesen werden dürfen.</p> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<ul> + <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1084891198">createAttribute </a></li> +</ul> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("document.createElement")}}</li> +</ul> diff --git a/files/de/web/api/document/createdocumentfragment/index.html b/files/de/web/api/document/createdocumentfragment/index.html new file mode 100644 index 0000000000..e7ba848e49 --- /dev/null +++ b/files/de/web/api/document/createdocumentfragment/index.html @@ -0,0 +1,137 @@ +--- +title: Document.createDocumentFragment() +slug: Web/API/Document/createDocumentFragment +tags: + - API + - DOM + - Document + - DocumentFragment + - Method + - Reference +translation_of: Web/API/Document/createDocumentFragment +--- +<div>{{ApiRef("DOM")}}</div> + +<p>Erzeugt ein neues {{domxref("DocumentFragment")}} Objekt.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <var>fragment</var> = document.createDocumentFragment(); +</pre> + +<p><code>fragment</code> ist hierbei eine Referenz zu einem neu erstellten, leeren {{domxref("DocumentFragment")}} Objekt.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p><code>DocumentFragment</code>s sind DOM Knoten (DOM Nodes). Sie sind nicht Teil des Haupt- oder Seiten-DOM-Baums. Üblicherweise werden sie verwendet, um einen Teilbaum mit Objekten und Unterobjekten zu erstellen und das Ergebnis anschließend in den Seiten-DOM-Baum einzufügen. In dem DOM-Baum wird das document fragment dann ersetzt mit allen Kindelementen.</p> + +<p>Da das gesamte DocumentFragment <strong>nur im Speicher</strong> vorliegt ("in memory"<strong>)</strong> und nicht Teil des Seiten-DOM-Baums ist, führen Veränderungen in dem DocumentFragment, wie etwa das Hinzufügen von Elementen, nicht zu einem page <a href="https://developers.google.com/speed/articles/reflow?csw=1">reflow</a> (die Berechnung der Element Positionen und Geometrie). Dementsprechend führt die Nutzung von DocumentFragments zu einer <a href="http://ejohn.org/blog/dom-documentfragments/">besseren Performance</a>.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Dieses Beispiel erzeugt eine Liste gängiger Browser.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul id="ul"> +</ul></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var element = document.getElementById('ul'); // assuming ul exists +var fragment = document.createDocumentFragment(); +var browsers = ['Firefox', 'Chrome', 'Opera', + 'Safari', 'Internet Explorer']; + +browsers.forEach(function(browser) { + var li = document.createElement('li'); + li.textContent = browser; + fragment.appendChild(li); +}); + +element.appendChild(fragment); +</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample("Example", 600, 140)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Anmerkungen</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initiale Definition in der DOM 1 Spezifikation</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Edge</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> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>Edge</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("DOMImplementation.createDocument", "document.implementation.createDocument()")}}</li> + <li>{{domxref("documentFragment")}}</li> +</ul> diff --git a/files/de/web/api/document/createelement/index.html b/files/de/web/api/document/createelement/index.html new file mode 100644 index 0000000000..8b053c1379 --- /dev/null +++ b/files/de/web/api/document/createelement/index.html @@ -0,0 +1,153 @@ +--- +title: Document.createElement() +slug: Web/API/Document/createElement +tags: + - API + - DOM + - Document + - Method + - Méthode +translation_of: Web/API/Document/createElement +--- +<div>{{APIRef("DOM")}}</div> + + + +<p>In einem <a href="/de/docs/Web/HTML">HTML </a>Dokument erstellt die <strong><code>Document.createElement()</code></strong> Methode ein spezifiziertes HTML Element oder ein {{domxref("HTMLUnknownElement")}} wenn der gegebene Elementname ein unbekannter ist.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>var <em>element</em></var> = <var>document</var>.createElement(<em><var>tagName</var></em>, [optionen]); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><strong><code>tagName</code></strong></dt> + <dd>Ein String der den Typ des zu erstellenden Elements spezifiziert. Der/Die/Das {{domxref("Node.nodeName", "nodeName")}} des erstellten Elements ist mit dem Wert von <code>tagName</code> initialisiert. Benutze keine qualifizierten Namen (wie "html:a") mit dieser Methode.</dd> + <dt><code>optionen</code> {{optional_inline}}</dt> + <dd>Ein optionales <code>ElementCreationOptions</code>-Objekt, welches eine einzige Eigenschaft namens <code>is</code> besitzt, deren Wert der Name des Tags für ein benutzerdefiniertes Element ist. Dieses benutzerdefinierte Element muss vorher mit <code>customElements.define()</code> definiert werden. Für mehr Informationen siehe {{anch("Web component example")}}.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Das neue <code><a href="/de/docs/Web/API/Element">Element</a></code>.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Grundlegendes_Beispiel">Grundlegendes Beispiel</h3> + +<p>Dies erstellt ein neues <code><div></code> und fügt es vor dem Element mit der ID <code>div1</code> ein.</p> + +<div> +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <title>||Arbeiten mit Elementen||</title> +</head> +<body> + <div id="div1">Der obere Text wurde dynamisch erstellt.</div> +</body> +</html></pre> +</div> + +<h4 id="JavaScript"><span style="line-height: normal;">JavaScript</span></h4> + +<pre class="brush:js">document.body.onload = addElement; + +function addElement () { + // erstelle ein neues div Element + // und gib ihm etwas Inhalt + var newDiv = document.createElement("div"); + var newContent = document.createTextNode("Hi there and greetings!"); + newDiv.appendChild(newContent); // füge den Textknoten zum neu erstellten div hinzu. + + // füge das neu erstellte Element und seinen Inhalt ins DOM ein + var currentDiv = document.getElementById("div1"); + document.body.insertBefore(newDiv, currentDiv); +} +</pre> + +<p>{{EmbedLiveSample("Basic_example", 500, 50)}}</p> + +<h3 id="Web-Komponentenbeispiel">Web-Komponentenbeispiel </h3> + +<p>Das folgende Beispiel wurde aus dem Beispiel expanding-list-web-component entnommen (Siehe es live). In diesem Fall erweitert unser Custom-Element die {{domxref("HTMLUListElement")}}, welche das {{htmlelement("ul")}} Element repräsentiert. </p> + +<pre><code>// Erstelle eine Klasse für das Element +class ExpandingList extends HTMLUListElement { + constructor() { + // Rufe immer super() in einem Konstruktor auf. + super(); + + // Konstruktordefinition wurde der kürze halber weggelassen + ... + } +} + +// Definiere das neue Element +customElements.define('expanding-list', ExpandingList, { extends: "ul" });</code></pre> + +<p>Würden wir eine Instanz dieses Elements programmatisch erstellen wollen, so würden wir einen Aufruf über den folgenden Ausschnitt machen: </p> + +<pre><code>let expandingList = document.createElement('ul', { is : 'expanding-list' })</code></pre> + +<p>Dem neuen Element wird ein <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is">is</a></code> Attribut hinzugefügt, dessen Wert das Custom-Element's Tag-Name ist. </p> + +<div class="note"> +<p><strong>Notiz:</strong> Für Backwards-Kompatiblität mit früheren Versionen der Spezifikationen des Custom-Elements, erlauben einige Browser einen String, statt einem Objekt, als Parameter zu übergeben, wobei der Wert des Strings der Tag-Name des Custom-Elements ist. </p> +</div> + +<h2 id="Notizen">Notizen</h2> + +<ul> + <li>Beim Aufruf auf ein als Dokument-Objekt gekennzeichnetes HTML-Dokument schreibt <code>createElement()</code> seine Argumente in Kleinbuchstaben, bevor es das diese erstellt.</li> + <li>Um ein Element mit qualifizierem Namen und namespace URl zu erstellen nutze {{ domxref("document.createElementNS()") }} stattessen .</li> + <li>Vor Gecko 2.0 {{ geckoRelease("2.0") }}, konntest du abgewinkelte Klammern (< und >) um <code>tagName</code> im Quirks-Modus setzen; seit Gecko 2.0 verhält sich die Funktion im Quirks-Modus und im Standard-Modus gleich.</li> + <li>Seit Gecko 19.0 {{geckoRelease("19.0")}} <code>createElement(null)</code> hat das gleiche bewirkt wie <code>createElement("null")</code>. Bemerke, dass Opera funktioniert mit null ebenfalls, während Chrome und Internet Explorer beide Fehler ausgeben würden.</li> + <li>Seit Gecko 22.0 {{geckoRelease("22.0")}} benutzt <code>createElement()</code> nicht mehr die {{domxref("HTMLSpanElement")}} Schnittstelle, wenn das Argument "bgsounds", "multicol", oder "image" ist. Stattdessen wird <code>HTMLUnknownElement</code> für"bgsound" und "multicol" verwendet, und {{domxref("HTMLElement")}} <code>HTMLElement</code> wird für "image" verwendet.</li> + <li>Die Gecko Implementierung von <code>createElement</code> ist nicht konform mit der DOM Spezifikation für XUL und XHTML Dokumente: <code>localName</code> und <code>namespaceURI</code> werden beim erstellten Element nicht auf <code>null</code> gesetzt.<code>.</code> Siehe auch {{ Bug(280692) }} für weitere Details.</li> +</ul> + +<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-document-createelement", "Document.createElement")}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-2141741547">DOM 2 Core: createElement</a></li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML5: APIs in HTML documents</a></li> +</ul> + +<h2 id="Browser-Kompatibiltät">Browser-Kompatibiltät</h2> + +<p>{{Compat("api.Document.createElement")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + + + +<ul> + <li>{{domxref("Node.removeChild()")}}</li> + <li>{{domxref("Node.replaceChild()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> + <li>{{domxref("Node.hasChildNodes()")}}</li> + <li>{{domxref("document.createElementNS()")}} — um die Namespace-URL explizit anzugeben.</li> +</ul> diff --git a/files/de/web/api/document/createelementns/index.html b/files/de/web/api/document/createelementns/index.html new file mode 100644 index 0000000000..3f310fdb49 --- /dev/null +++ b/files/de/web/api/document/createelementns/index.html @@ -0,0 +1,175 @@ +--- +title: Document.createElementNS() +slug: Web/API/Document/createElementNS +translation_of: Web/API/Document/createElementNS +--- +<div>{{ApiRef("DOM")}}</div> + +<div>Erzeugt ein Element mit der angegebenen Namespace-URL und einem Namen.</div> + +<div> </div> + +<div>Um ein Element zu definieren, ohne eine Namespace-URL anzugeben, verwenden Sie die Methode <a href="createElement" title="createElement">createElement</a>.</div> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="brush: js"><var>var element</var> = <var>document</var>.createElementNS(<var>namespaceURI</var>, <var>qualifiedName</var>[, options]); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>namespaceURI</code></dt> + <dd>Ein String, der die mit dem Element verknüpfte <a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/glossary.html#dt-namespaceURI">Namespace-URL</a> angibt. Die Eigenschaft <a href="/en-US/docs/DOM/element.namespaceURI">namespaceURI</a> des neu erstellten Elements wird mit dem Wert von <code>namespaceURI</code> initialisiert (siehe <a href="#Valid Namespace URIs">Gültige Namespace-URLs</a>).</dd> + <dt><code>qualifiedName</code></dt> + <dd>Ein String, der den Namen des Elements angibt. Die Eigenschaft <a href="/en-US/docs/DOM/element.nodeName">nodeName</a> des neu erstellten Elements wird mit dem Wert von <code>qualifiedName</code> initialisiert.</dd> + <dt><code>options</code><span class="inlineIndicator optional optionalInline">Optional</span></dt> + <dd>Das optionale Objekt <code>ElementCreationOptions</code> enthält eine einzelne Eigenschaft mit Namen <code>is</code>, dessen Wert der Tag-Name eines zuvor mit <code>customElements.define()</code> definierten angepassten Elements ist. Aus Gründen der Abwärtskompatibilität erlauben einige Browser hier auch die Übergabe eines Strings mit dem Taf-Namen (s. <a class="external external-icon" href="https://www.w3.org/TR/custom-elements/">Custom Elements specification</a>). Siehe <a class="external external-icon" href="https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml">Extending native HTML elements</a> für weitere Informationen zur Verwendung dieses Parameters.</dd> + <dd>Das neue Element erhält ein Attribut mit Namen <code>is</code> dessen Wert den Tag-Namen des Elements enthält. Angepasste Elemente sind ein experimentelles Feature, das nich in allen Browsern verfügbar ist.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Das neu erstelle <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element" title="The Element interface represents an object of a Document. This interface describes methods and properties common to all kinds of elements. Specific behaviors are described in interfaces which inherit from Element but add additional functionality."><code>Element</code></a>.</p> + +<h2 id="Example" name="Example"><a id="Valid Namespace URIs" name="Valid Namespace URIs">Gültige Namespace-URLs</a></h2> + +<ul> + <li>HTML - <code>http://www.w3.org/1999/xhtml</code></li> + <li>SVG - <code>http://www.w3.org/2000/svg</code></li> + <li>XBL - <code>http://www.mozilla.org/xbl</code></li> + <li>XUL - <code>http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</code></li> +</ul> + +<h2 id="Example" name="Example">Beispiel</h2> + +<p>Dies erstellt ein neues Element vom Typ <div> im <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a>-Namespace und fügt es dem vbox-Element hinzu. Obwohl dies kein besonders sinnvolles <a href="/en-US/docs/XUL" title="XUL">XUL</a>-Document ist, demonstriert es die Verwendung von Elementen verschiedener Namespaces innerhalb eines Dokuments:</p> + +<pre class="brush:xml"><?xml version="1.0"?> +<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml" + title="||Working with elements||" + onload="init()"> + +<script type="text/javascript"><![CDATA[ + var container; + var newdiv; + var txtnode; + + function init(){ + container = document.getElementById("ContainerBox"); + newdiv = document.createElementNS("http://www.w3.org/1999/xhtml","div"); + txtnode = document.createTextNode("This is text that was constructed dynamically with createElementNS and createTextNode then inserted into the document using appendChild."); + newdiv.appendChild(txtnode); + container.appendChild(newdiv); + } + +]]></script> + + <vbox id='ContainerBox' flex='1'> + <html:div> + The script on this page will add dynamic content below: + </html:div> + </vbox> + +</page> +</pre> + +<div class="note"> +<p>Das obige Beispiel verwendet ein Inline-Skript, was für XHTML-Dokumente nicht empfohlen wird. Dieses Beispiel ist eigentlich ein XUL-Dokument mit eingebettetem XHTML. Nichts desto trotz bleibt die Empfehlung bestehen.</p> +</div> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezigikation</th> + <th scope="col">Status</th> + <th scope="col">Kpmmentar</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', "#dom-document-createelementns", "Document.createElement")}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<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 (WebKit)</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>options</code> argument</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(50)}}<sup>[2][3]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</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 Phone</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>[1] In vorangegangenen Versionen dieser Spezifikation war dieses Argument ein einfacher String, dessen Wert der Tag-Name eines angepassten Elements ist. Aus Gründen der Abwärtskompatibilität akzeptiert Chrome hier beide Formate</p> + +<p>[2] Siehe [1] oben: Wie Chrome, akzeptiert hier auch Firefox einen String anstelle eines Objekts. Allerdings erst ab Version 51 aufwärts. In Version 50 muss <code>options</code> ein Objekt sein.</p> + +<p>[3] Um in Firefox mit angepassten Elementen zu experimentieren müssen die Einstellungen <code>dom.webcomponents.enabled</code> und <code>dom.webcomponents.customelements.enabled</code> auf <code>true</code> gesetzt werden.</p> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li><a href="createElement">document.createElement</a></li> + <li><a href="createTextNode">document.createTextNode</a></li> + <li><a href="../Node/namespaceURI">Node.namespaceURI</a></li> + <li><a class="external" href="http://www.w3.org/TR/1999/REC-xml-names-19990114">Namespaces in XML</a></li> +</ul> diff --git a/files/de/web/api/document/createtextnode/index.html b/files/de/web/api/document/createtextnode/index.html new file mode 100644 index 0000000000..53fae2cc1c --- /dev/null +++ b/files/de/web/api/document/createtextnode/index.html @@ -0,0 +1,131 @@ +--- +title: Document.createTextNode() +slug: Web/API/Document/createTextNode +tags: + - API + - DOM + - Méthode + - Referenz + - Textknoten + - Textnode +translation_of: Web/API/Document/createTextNode +--- +<div>{{APIRef("DOM")}}</div> + +<p>Erzeugt einen Textknoten.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>var text</var> = document.createTextNode(<var>data</var>); +</pre> + +<ul> + <li><code>text</code> ist ein Textknoten</li> + <li><code>data</code> ist eine Zeichenkette oder ein Ausdruck, der eine Zeichenkette erzeugt. Entity-Definitionen (&...;) werden nicht umgesetzt.</li> +</ul> + +<h2 id="Example">Example</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>createTextNode example</title> +<script> +function addTextNode(text) { + var newtext = document.createTextNode(text), + p1 = document.getElementById("p1"); + + p1.appendChild(newtext); +} +</script> +</head> + +<body> + <button onclick="addTextNode('JA! ');">JA!</button> + <button onclick="addTextNode('NEIN! ');">NEIN!</button> + <button onclick="addTextNode('WIR SCHAFFEN DAS! ');">WIR SCHAFFEN DAS!</button> + + <hr /> + + <p id="p1">Erste Zeile des Absatzes.</p> +</body> +</html> +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM3 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</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 Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/api/document/createtreewalker/index.html b/files/de/web/api/document/createtreewalker/index.html new file mode 100644 index 0000000000..61e526b92c --- /dev/null +++ b/files/de/web/api/document/createtreewalker/index.html @@ -0,0 +1,241 @@ +--- +title: Document.createTreeWalker() +slug: Web/API/Document/createTreeWalker +tags: + - API + - DOM + - DOM-Referenz + - Document + - Dokument + - Méthode +translation_of: Web/API/Document/createTreeWalker +--- +<div>{{ApiRef("Document")}}</div> + +<p>Die Methode <strong><code>Document.createTreeWalker()</code></strong> erzeugt ein neues {{domxref("TreeWalker")}} Objekt und gibt dieses zurück.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>treeWalker</em> = <em>document</em>.createTreeWalker(<em>wurzel</em>, <em>anzeigeFilter</em>, <em>filter</em>, <em>entityReferenceExpansion</em>); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><em>wurzel</em></dt> + <dd>Ist der Ursprungs- oder Wurzelknoten {{domxref("Node")}} des {{domxref("TreeWalker")}}-Durchlaufens. Normalerweise ist dies ein Element, das zum Dokument gehört.</dd> + + <dt><em>anzeigeFilter {{optional_inline}}</em></dt> + <dd>Optionale <code>unsigned long</code>Bitmaske, erstellt durch bitweise ODER-Verknüpfung der Konstanten von <code><a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter">NodeFilter</a></code>. Erlaubt eine bequeme Filterung auf bestimmte Knotentypen. Der Standardwert ist <code>0xFFFFFFFF</code>, auch repräsentiert durch die <code>SHOW_ALL</code>-Konstante. + <table class="standard-table"> + <tbody> + <tr> + <td class="header">Konstante</td> + <td class="header">numerischer Wert</td> + <td class="header">Beschreibung</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ALL</code></td> + <td><code>-1</code> (Maximalwert von <code>unsigned long</code>)</td> + <td>Zeigt alle Knoten.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td> + <td><code>2</code></td> + <td>Zeigt Attribut-Knoten {{domxref("Attr")}}. Das ist nur sinnvoll, wenn der {{domxref("TreeWalker")}} mit einem {{domxref("Attr")}}-Knoten als Wurzel erzeugt wird. In diesem Fall erscheint der Attribut-Knoten an der ersten Position bei der Durchquerung. Da Attribute nie Kind-Knoten anderer Knoten sind, erscheinen sie nicht, wenn der Dokumentenbaum durchlaufen wird.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td> + <td><code>8</code></td> + <td>Zeigt {{domxref("CDATASection")}}-Knoten.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_COMMENT</code></td> + <td><code>128</code></td> + <td>Zeigt {{domxref("Comment")}}-Knoten.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_DOCUMENT</code></td> + <td><code>256</code></td> + <td>Zeigt {{domxref("Document")}}-Knoten.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td> + <td><code>1024</code></td> + <td>Zeigt {{domxref("DocumentFragment")}}-Knoten.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td> + <td><code>512</code></td> + <td>Zeigt {{domxref("DocumentType")}}-Knoten.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ELEMENT</code></td> + <td><code>1</code></td> + <td>Zeigt {{domxref("Element")}}-Knoten.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td> + <td><code>32</code></td> + <td>Zeigt {{domxref("Entity")}}-Knoten. Dies ist nur sinnvoll, wenn ein {{domxref("TreeWalker")}} mit einem {{domxref("Entity")}}-Knoten als Wurzel erzeugt wird. In diesem Fall erscheint der {{domxref("Entity")}}-Knoten an der ersten Position bei der Durchquerung. Da Entity-Knoten nie Kind-Knoten anderer Knoten sind, erscheinen sie nicht, wenn der Dokumentenbaum durchlaufen wird.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td> + <td><code>16</code></td> + <td>Shows {{domxref("EntityReference")}} nodes.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}</td> + <td><code>2048</code></td> + <td>Zeigt {{domxref("Notation")}}-Knoten. Dies ist nur sinnvoll, wenn ein {{domxref("TreeWalker")}} mit einem {{domxref("Notation")}}-Knoten als Wurzel erzeugt wird. In diesem Fall erscheint der {{domxref("Notation")}}-Knoten an der ersten Position bei der Durchquerung. Da Entity-Knoten nie Kind-Knoten anderer Knoten sind, erscheinen sie nicht, wenn der Dokumentenbaum durchlaufen wird.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td> + <td><code>64</code></td> + <td>Zeigt {{domxref("ProcessingInstruction")}}-Knoten.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_TEXT</code></td> + <td><code>4</code></td> + <td>Zeigt {{domxref("Text")}}-Knoten.</td> + </tr> + </tbody> + </table> + </dd> + + <dt><em>filter <em>{{optional_inline}}</em></em></dt> + <dd>Ein optionaler {{domxref("NodeFilter")}}. Muss ein ein Objekt mit einer Methode namens <code>acceptNode</code> sein, die vom {{domxref("TreeWalker")}} aufgerufen wird. Diese Methode entscheidet, ob ein übergebener Knoten, der schon von <code>anzeigeFilter</code> durchgelassen wurde, ausgegeben wird oder nicht.</dd> + + <dt><em>entityReferenceExpansion<em> {{optional_inline}}</em></em> <em>{{obsolete_inline}}</em></dt> + <dd>Optionaler {{domxref("Boolean")}}-Schalter. Entscheidet, ob der Teilbaum unter einer {{domxref("EntityReference")}} ausgelassen werden soll, wenn das Element ausgelassen wird.</dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Das folgende Beispiel läuft über alle Knoten im <code>body</code>, filtert die Menge auf Elementknoten und gibt im <code>filter</code> jeden Knoten als durchlässig an (die Filterung auf die Elementknoten hätte auch in der <code>acceptNode()</code>-Methode erfolgen können). +Mithilfe des <code>treeWalker</code> werden alle durchgelassenen Knoten in ein Array gesammelt.</p> + +<pre class="brush: js">var treeWalker = document.createTreeWalker( + document.body, + NodeFilter.SHOW_ELEMENT, + { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } }, + false +); + +var nodeList = []; + +while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode); +</pre> + +<h2 id="Spezfikationen">Spezfikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezfikation</th> + <th scope="col">Status</th> + <th scope="col">Bemerkung</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-document-createtreewalker', 'Document.createTreeWalker')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td><code>expandEntityReferences</code>-Parameter wurde entfernt. <code>whatToShow</code>- und <code>filter</code>-Parameter wurden als optional markiert.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#NodeIteratorFactory-createTreeWalker', 'Document.createTreeWalker')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>Initiale Definition</td> + </tr> + </tbody> +</table> + +<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>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>grundsätzliche Unterstützung</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.8.1")}}</td> + <td>9.0</td> + <td>9.0</td> + <td>3.0</td> + </tr> + <tr> + <td><code>whatToShow</code> und <code>filter</code> optional</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("12")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.0</td> + </tr> + <tr> + <td><code>expandEntityReferences</code></td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.8.1")}}<br> + In {{CompatGeckoDesktop("12")}} entfernt.</td> + <td>9.0</td> + <td>9.0</td> + <td>3.0</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>grundsätzliche Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.8.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>9.0</td> + <td>3.0</td> + </tr> + <tr> + <td><code>whatToShow</code> und <code>filter</code> optional</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("12")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.0</td> + </tr> + <tr> + <td><code>expandEntityReferences</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8.1")}}<br> + In {{CompatGeckoDesktop("12")}} entfernt</td> + <td>{{CompatVersionUnknown}}</td> + <td>9.0</td> + <td>3.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Schnittstelle des Ergebnis-Objekts: {{domxref("TreeWalker")}}.</li> + <li><a href="http://msdn.microsoft.com/en-us/library/ie/ff975302(v=vs.85).aspx">createTreeWalker auf MSDN</a></li> +</ul> diff --git a/files/de/web/api/document/dir/index.html b/files/de/web/api/document/dir/index.html new file mode 100644 index 0000000000..532837e9dd --- /dev/null +++ b/files/de/web/api/document/dir/index.html @@ -0,0 +1,95 @@ +--- +title: Document.dir +slug: Web/API/Document/dir +translation_of: Web/API/Document/dir +--- +<p>{{ApiRef("")}}</p> + +<p>Die <code><strong>Document.dir</strong></code> Eigenschaft ist ein {{domxref("DOMString")}}, welcher die direktionaler Bedeutung von einem Text eines Dokuments repräsentiert. Entweder von links nach rechts (Standard) oder rechts nach links. Mögliche Werte sind <code>'rtl'</code> rechts nach links, und <code>'ltr',</code> links nach rechts.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>dirStr</em> = <em>document.</em>dir; +<em>document.dir</em> = <em>dirStr;</em> +</pre> + +<h2 id="Specifications" name="Specifications">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("HTML WHATWG", "dom.html#the-dir-attribute:dom-dir", "Document.dir")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Initiale Spezifikation</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 (WebKit)</th> + </tr> + <tr> + <td>Basis Unterstützung</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</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 Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basis Unterstützung</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Vor Firefox 23, hat die <code>Document.dir</code> Eigenschaft "ltr" wiedergegeben. unabhängig der Einstellung von dem dir-Attribut im Haupt-Element (root) {{htmlelement("html")}}. Und wenn eine Richtung im <code><html></code> gesetzt war, hatte die Veränderung der Sichtbarkeit keinen Effekt (obwohl der spätere Abruf des <code>Document.dir</code> wird behaupten, dass die Direktionalität geändert wurde). Wenn ein solches Attribut nicht im <code><html></code> gesetzt ist und die Eigenschaft geändert wurde, werden beide sichtbaren direktionale geändert und die <code>document.dir</code> Eigenschaft wird die Änderung korrekt wiedergeben.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533731.aspx" rel="freelink">http://msdn.microsoft.com/en-us/library/ms533731.aspx</a></li> +</ul> diff --git a/files/de/web/api/document/document/index.html b/files/de/web/api/document/document/index.html new file mode 100644 index 0000000000..ce3bddf174 --- /dev/null +++ b/files/de/web/api/document/document/index.html @@ -0,0 +1,45 @@ +--- +title: Document() +slug: Web/API/Document/Document +tags: + - API + - DOM + - Document + - Dokument + - Méthode + - Reference +translation_of: Web/API/Document/Document +--- +<div>{{APIRef}}</div> + +<p>Die <strong><code>Document</code></strong> Methode erstellt ein neues {{domxref("Document")}} Objekt das als Webseite im Browser geladen werden kann und bietet Möglichkeiten auf diese Inhalte zuzugreifen.</p> + +<h2 id="Konstruktor">Konstruktor</h2> + +<pre class="syntaxbox notranslate">new Document(); +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-document-document','Document')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + + + +<div>{{Compat("api.Document.Document")}}</div> diff --git a/files/de/web/api/document/documentelement/index.html b/files/de/web/api/document/documentelement/index.html new file mode 100644 index 0000000000..aac46ae3ea --- /dev/null +++ b/files/de/web/api/document/documentelement/index.html @@ -0,0 +1,42 @@ +--- +title: document.documentElement +slug: Web/API/Document/documentElement +translation_of: Web/API/Document/documentElement +--- +<p>{{ApiRef}}</p> + +<h2 id="Summary" name="Summary">Zusammenfassung</h2> + +<p><strong>Lesbar, nicht schreibbar</strong></p> + +<p>Gibt das <a href="/en-US/docs/DOM/element"><code>Element</code></a> zurück, das die Wurzel des <code><a href="/en-US/docs/DOM/document">document</a></code> ist (zum Beispiel, das <code><html></code> Element für HTML Dokumente).</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>element</em> = document.documentElement; +</pre> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush:js">var rootElement = document.documentElement; +var firstTier = rootElement.childNodes; + +// firstTier ist die NodeList von direkten Kindern des Wurzel-Elementes +for (var i = 0; i < firstTier.length; i++) { + // hier irgendwas mit den direkten Kindern des Wurzel-Elementes mit Hilfe + // von firstTier[i] erledigen +}</pre> + +<h2 id="Notes" name="Notes">Beobachtungen</h2> + +<p>Dieses Objekt ist lesbar aber nicht schreibbar. Es ist praktisch um auf die Wurzel eines beliebigen Dokumentes zuzugreifen.</p> + +<p>HTML Dokumente enthalten typischerweise ein einziges Tochter-Element<span style="line-height: 1.5;">, </span><code style="font-style: normal; line-height: 1.5;"><html></code><span style="line-height: 1.5;">, manchmal mit einem DOCTYPE. XML-Doumente enthalten oft mehrere Tochter-Elemente, einen DOCTYPE und </span><a href="/en-US/docs/DOM/ProcessingInstruction" style="line-height: 1.5;">Verarbeitungshinweise</a><span style="line-height: 1.5;">.</span></p> + +<p>Deswegen sollte <code>document.documentElement</code> statt <code>{{Domxref("document.firstElementChild")}}</code> benutzt werden, um auf das Wurzel-Element zuzugreifen.</p> + +<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-87CD092">DOM Level 2 Core: Document.documentElement</a></li> +</ul> diff --git a/files/de/web/api/document/fullscreenchange_event/index.html b/files/de/web/api/document/fullscreenchange_event/index.html new file mode 100644 index 0000000000..7c8026858c --- /dev/null +++ b/files/de/web/api/document/fullscreenchange_event/index.html @@ -0,0 +1,87 @@ +--- +title: fullscreenchange +slug: Web/API/Document/fullscreenchange_event +translation_of: Web/API/Document/fullscreenchange_event +--- +<p>Das <code>onfullscreenchange</code> Event wird gesendet, wenn der Browser den Vollbildmodus startet oder beendet.</p> + +<h2 id="Allgemeine_Information">Allgemeine Information</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Speifikation</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Fullscreen</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Schnittstelle</dt> + <dd style="margin: 0 0 0 120px;">Event</dd> + <dt style="float: left; text-align: right; width: 120px;">Blubbert</dt> + <dd style="margin: 0 0 0 120px;">Ja</dd> + <dt style="float: left; text-align: right; width: 120px;">Abbrechbar</dt> + <dd style="margin: 0 0 0 120px;">Nein</dd> + <dt style="float: left; text-align: right; width: 120px;">Ziel</dt> + <dd style="margin: 0 0 0 120px;">Dokument</dd> + <dt style="float: left; text-align: right; width: 120px;">Standardaktion</dt> + <dd style="margin: 0 0 0 120px;">Keine</dd> +</dl> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush:js;">// Diese API hat noch immer Vendor Prefixe in den Browsern, die sie implementieren +document.addEventListener("fullscreenchange", function( event ) { + + // Das Event selber hat keine Informationen über darüber, ob sich der Browser + // im Vollbildmodus befindet, aber man kann diesen über die Fullscreen API + // erhalten + if ( document.fullscreen ) { + + // Das Ziel des Events ist immer das Dokument, + // aber man kann das eigentliche Element im Vollbildmodus über die API + // abrufen + document.fullscreenElement; + } + +});</pre> + +<h2 id="Verwandte_Events">Verwandte Events</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla_event_reference/fullscreenerror"><code>fullscreenerror</code></a></li> +</ul> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de-DE/docs/Web/API/Fullscreen_API">Fullscreen API</a></li> +</ul> diff --git a/files/de/web/api/document/getelementbyid/index.html b/files/de/web/api/document/getelementbyid/index.html new file mode 100644 index 0000000000..dfb6cc0d36 --- /dev/null +++ b/files/de/web/api/document/getelementbyid/index.html @@ -0,0 +1,131 @@ +--- +title: Document.getElementById() +slug: Web/API/Document/getElementById +tags: + - API + - DOM + - Méthode + - Referenz +translation_of: Web/API/Document/getElementById +--- +<div>{{ ApiRef("DOM") }}</div> + +<div> </div> + +<div>Gibt eine Referenz zu einem Element anhand seiner <a href="/en-US/docs/DOM/element.id" title="en-US/docs/DOM/element.id">ID</a> zurück.</div> + +<div> </div> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="eval"><em>element</em> = document.getElementById(<em>id</em>); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<ul> + <li><code>element </code>ist eine Referenz zu einem <a href="/en-US/docs/DOM/element" title="en-US/docs/DOM/element">Element</a>-Objekt oder <code>null</code> wenn sich kein Element mit der angegebenen ID im Dokument befindet.</li> + <li><code>id </code>ist ein String, der auf Groß- und Kleinschreibung achtet und die einmalige ID des gesuchten Elements darstellt.</li> +</ul> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <title>getElementById Beispiel</title> + <script> + function changeColor(newColor) { + var elem = document.getElementById("para1"); + elem.style.color = newColor; + } + </script> +</head> +<body> + <p id="para1">Irgendein Text</p> + <button onclick="changeColor('blue');">Blau</button> + <button onclick="changeColor('red');">Rot</button> +</body> +</html> +</pre> + +<h2 id="Notes" name="Notes">Anmerkungen</h2> + +<p>Neue Benutzer sollten beachten, dass die Groß- und Kleinschreibung bei "Id" im Namen der Methode korrekt sein <em>muss</em>, damit der Code funktioniert - 'getElementByID' funktioniert <em>nicht</em>, auch wenn es richtig zu sein scheint.</p> + +<p>Wenn kein Element mit der angegebenen id existiert, gibt die Funktion <code>null </code>zurück. Beachte, dass der ID-Parameter auf Groß- und Kleinschreibung achtet. Daraus folgt, dass <code>document.getElementById("<strong>M</strong>ain") </code>anstatt des Elements <code><div id="main"></code> <code>null</code> zurückgibt, weil "M" und "m" für den Zweck der Methode unterschiedlich sind.</p> + +<p><strong>Elemente die sich nicht im Dokument befinden </strong>werden nicht von <code>getElementById </code>gesucht. Wenn man ein Element erstellt und ihm eine ID zuweist, so muss man das Element mit <code><a href="https://developer.mozilla.org/en-US/docs/DOM/Node.insertBefore" title="en-US/docs/DOM/Node.insertBefore">insertBefore</a></code> oder einer ähnlichen Methode in den Dokumentenbaum einfügen, bevor man darauf mit <code>getElementById</code> zugreifen kann.</p> + +<pre class="brush: js">var element = document.createElement("div"); +element.id = 'testqq'; +var el = document.getElementById('testqq'); // el wird null! +</pre> + +<p><strong>Nicht-HTML-Dokumente. </strong>Die DOM-Implementierung muss eine Information enthalten, welche angibt, welches Attribut vom Typ ID ist. Attribute mit dem Namen "id" sind solange nicht vom Typ ID bis sie in der Dokumenttypdefinition als solche definiert werden. Das <code>id</code>-Attribut ist in gebräuchlichen Fällen wie bei <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/XUL" title="en-US/docs/XUL">XUL</a> und anderen als ID-Typ definiert. Implementierungen, die nicht wissen, ob ein Attribut vom Typ ID ist oder nicht geben erwartungsgemäß <code>null </code>zurück.</p> + +<p><strong style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 1;">Browserkompatibilität</strong></p> + +<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>1.0</td> + <td>{{ CompatGeckoDesktop(1.0) }}</td> + <td>5.5</td> + <td>7.0</td> + <td>1.0</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 Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoMobile(1.0) }}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<p><code>getElementById</code> wurde in DOM Level 1 für HTML Dokumente eingeführt und in DOM Level 2 zu allen Dokumenten verschoben. </p> + +<ul> + <li>DOM Level 2 Spezifikation: <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBId">getElementById</a></li> +</ul> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/DOM/document" title="en-US/docs/DOM/document">document</a> Referenz für andere Methoden und Eigenschaften, die man benutzen kann um Referenzen zu Elementen im Dokument zu bekommen.</li> + <li><a href="/en-US/docs/Web/API/document.querySelector">document.querySelector()</a> für Selektoren mit Abfragen wie <code>'div.myclass'</code></li> + <li><a href="/en-US/docs/xml/xml:id" title="en-US/docs/xml/id">xml:id</a> - hat eine Hilfsmethode, die es <code>getElementById </code>erlaubt, "xml:id" in XML-Dokumenten zu erhalten (wie es z.B. von Ajax-Aufrufen zurückgegeben wird)</li> +</ul> diff --git a/files/de/web/api/document/getelementsbyclassname/index.html b/files/de/web/api/document/getelementsbyclassname/index.html new file mode 100644 index 0000000000..182fef2f42 --- /dev/null +++ b/files/de/web/api/document/getelementsbyclassname/index.html @@ -0,0 +1,105 @@ +--- +title: Document.getElementsByClassName() +slug: Web/API/Document/getElementsByClassName +tags: + - API + - DOM + - DOM Element Methoden + - Gecko + - Gecko DOM Referenz + - HTML5 + - Méthode + - Referenz +translation_of: Web/API/Document/getElementsByClassName +--- +<p id="Summary">{{APIRef("DOM")}}</p> + +<p>Gibt ein Array-ähnliches Objekt von allen Kindelementen welche den gegebenen Klassennamen besitzen. Wenn dies auf das document-Objekt ausgeführt wird, wird das gesamte Dokument durchsucht, inklusive des root-Knoten. Man kann ebenfalls {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} mit jedem Element aufrufen; es werden nur Nachfolgende Elemente des gegebenenen root-Element zurückgegeben.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>var elements</var> = document.getElementsByClassName(<em>names</em>); // oder: +<var>var elements</var> = rootElement.getElementsByClassName(<em>names</em>);</pre> + +<ul> + <li><var>elements</var> ist eine live {{ domxref("HTMLCollection") }} von gefunden Elementen.</li> + <li><var>names</var> ist ein String der eine Liste der gefundenen Klassennamen repräsentiert; Klassennamen sind durch Leerzeichen getrennt.</li> + <li>getElementsByClassName kann auf jedes Element aufgerufen werden und nicht nur auf <em>document</em>. Das Element, auf dass diese Funktion aufgerufen wird, wird als root-Element genutzt.</li> +</ul> + +<h2 id="Examples" name="Examples">Beispiele</h2> + +<p>Alle Elemente der Klasse 'test' holen:</p> + +<pre class="brush: js">document.getElementsByClassName('test');</pre> + +<p>Alle Elemente die sowohl die Klassen 'red' und 'test' verwenden selektieren:</p> + +<pre class="brush: js">document.getElementsByClassName('red test');</pre> + +<p>Alle Elemente der Klasse 'test' die innerhalb eines Elements mit der ID 'main' selektieren:</p> + +<pre class="brush: js">document.getElementById('main').getElementsByClassName('test');</pre> + +<p>Man kann auch Methoden von Array.prototype auf {{ domxref("HTMLCollection") }} anwenden, in dem die <var>HTMLCollection</var> in dem sie an die <var>this</var> Werte der Methoden übergeben wird. Hier finden wir alle div-Elemente der Klasse 'test':</p> + +<pre class="brush: js">var testElements = document.getElementsByClassName('test'); +var testDivs = Array.prototype.filter.call(testElements, function(testElement){ + return testElement.nodeName === 'DIV'; +});</pre> + +<h2 id="Browserkompabilität">Browserkompabilitä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>{{ CompatVersionUnknown() }}</td> + <td>3.0</td> + <td>9.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>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<ul> + <li><a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname" title="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname"><span class="external">W3C: getElementsByClassName</span></a></li> +</ul> diff --git a/files/de/web/api/document/head/index.html b/files/de/web/api/document/head/index.html new file mode 100644 index 0000000000..63b389112d --- /dev/null +++ b/files/de/web/api/document/head/index.html @@ -0,0 +1,73 @@ +--- +title: Document.head +slug: Web/API/Document/head +tags: + - Referenz +translation_of: Web/API/Document/head +--- +<p>{{APIRef("DOM")}}</p> + +<p class="syntaxbox">Gibt das {{HTMLElement("head")}} Element des aktuellen Dokuments aus. Ist mehr als ein <code><head></code> Element vorhanden, wird das erste Element ausgegeben.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>var objRef</em> = document.head; +</pre> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush: js">// in HTML: <head id="my-document-head"> +var aHead = document.head; + +alert(aHead.id); // "my-document-head"; + +alert( document.head === document.querySelector("head") ); // true +</pre> + +<h2 id="Example" name="Example">Anmerkungen</h2> + +<p><code>document.head</code> ist nur lesbar. Der Versuch dieser Eigenschaft einen Wert zu zuweisen, wird ohne Ausgabe einer Fehlermeldung fehlschlagen, oder, bei verwendetem<br> + <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">ECMAScript Strict Mode</a> in einem Gecko Browser, mit einem <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypeError">TypeError</a></code> quittiert.</p> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="spectable 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#dom-document-head','Document.head')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1','dom.html#dom-document-head','Document.head')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','dom.html#dom-document-head','Document.head')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p> </p> + + + +<p>{{Compat("api.Document.head")}}</p> + +<p> </p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("document.body")}}</li> +</ul> diff --git a/files/de/web/api/document/importnode/index.html b/files/de/web/api/document/importnode/index.html new file mode 100644 index 0000000000..8420b6f794 --- /dev/null +++ b/files/de/web/api/document/importnode/index.html @@ -0,0 +1,93 @@ +--- +title: Document.importNode() +slug: Web/API/Document/importNode +tags: + - API + - DOM + - Dokument + - Knoten + - Kopie + - Méthode + - Referenz + - importNode +translation_of: Web/API/Document/importNode +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">Die {{domxref("Document")}}-Methode <code><strong>importNode()</strong></code> erzeugt eine neue Kopie eines konkreten Knotens ({{domxref("Node")}}) oder Dokumenten-Fragments ({{domxref("DocumentFragment")}}) eines anderen Dokuments, so dass diese dann in das aktuelle Dokument eingefügt werden kann. </span> An dieser Stelle ist es noch nicht im Dokumentenbaum eingefügt, um das zu erreichen, muss eine Methode wie {{domxref("Node.appendChild", "appendChild()")}} oder {{domxref("Node.insertBefore", "insertBefore()")}} aufgerufen werden.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>knoten</em> = <em>document</em>.importNode(<em>externerKnoten</em>, <em>deep</em>); +</pre> + +<dl> + <dt><code>externerKnoten</code></dt> + <dd>Der neue Knoten oder das neue Dokumenten-Fragment, welches in das aktuelle Dokument importiert werden soll. Nach dem Import ist der Elternknoten <code>null</code>, da der neue Knoten noch nicht in den Dokumentenbaum eingefügt wurde.</dd> + <dt><code>deep</code></dt> + <dd>Ein boolscher Wert der anzeigt, ob der komplette Unterbaum von<code>externalNode </code>importiert werden soll. Ist dieser Parameter <code>true</code>, werden <code>externalNode</code> so wie all seine Nachfahren kopiert; Ist er <code>false</code>, wird nur der einzelne Knoten, <code>externalNode</code>, importiert.</dd> +</dl> + +<div class="note"> +<p>In der DOM4-Spezifikation, ist <code>deep</code> als optionales Argument angeführt. Wird es weggelassen, verhält sich die Methode als ob der Wert von <code>deep</code><strong><code>true </code></strong>wäre, was zu standardmäßigen tiefen Kopieren führt. Um flach zu kopieren, muss <code>deep</code> explizit auf <code>false</code> gesetzt werden.</p> + +<p>Dieses Verhalten wurde in der letzten Spezifikation geändert, der Wert von <code>deep</code> wird bei Weglassen auf <strong><code>false </code></strong>gesetzt. Obwohl es immer noch optional ist, empfehlen wir für Vorwärts- und Rückwärtskompatibilität das <code>deep</code>-Argument immer explizit anzugeben. Seit Gecko 28.0 {{geckoRelease(28)}} ist eine Konsolenwarnung implementiert, wenn das Argument weggelassen wird. Seit Gecko 29.0 {{geckoRelease(29)}}) ist flaches Kopieren das Standardverhalten.</p> +</div> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush: js">var iframe = document.getElementsByTagName("iframe")[0]; +var oldNode = iframe.contentWindow.document.getElementById("myNode"); +var newNode = document.importNode(oldNode, true); +document.getElementById("container").appendChild(newNode); +</pre> + +<h2 id="Notes" name="Notes">Anmerkungen</h2> + +<p>Der Originalknoten wird nicht aus dem Ursprungsdokument entfernt. Der importierte Knoten ist des Weiteren eine Kopie des ursprünglichen.</p> + +<p> </p> + +<p>Nodes from external documents should be cloned using <a href="/de/docs/Web/API/Document/importNode" title="Die Document-Methode importNode() erzeugt eine neue Kopie eines konkreten Knotens (Node) oder Dokumenten-Fragments (DocumentFragment) eines anderen Dokuments, so dass diese dann in das aktuelle Dokument eingefügt werden kann. "><code>document.importNode()</code></a> (or adopted using <a href="/de/docs/Web/API/Document/adoptNode" title="Überträgt einen Knoten. Der Knoten und sein Unterbaum werden aus dem Dokument, in dem sie sich befinden entfernt (so vorhanden), und sein ownerDocument wird zu dem aktuellen Dokument geändert. Der Knoten kann dann in das aktuelle Dokument eingefügt werden."><code>document.adoptNode()</code></a>) before they can be inserted into the current document. For more on the <a class="new" href="/de/docs/Web/API/Node/ownerDocument" rel="nofollow" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben. Bitte überlege, mitzuwirken!"><code>Node.ownerDocument</code></a> issues, see the <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">W3C DOM FAQ</a>.</p> + +<p>Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for improved future compatibility.</p> + +<p> </p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikationen</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-document-importnode", "document.importNode()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#Core-Document-importNode", "document.importNode()")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("api.Document.importNode")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("document.adoptNode()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> +</ul> diff --git a/files/de/web/api/document/index.html b/files/de/web/api/document/index.html new file mode 100644 index 0000000000..f9b00cacfc --- /dev/null +++ b/files/de/web/api/document/index.html @@ -0,0 +1,405 @@ +--- +title: Document +slug: Web/API/Document +tags: + - DOM + - Gecko + - Gecko DOM Referenz +translation_of: Web/API/Document +--- +<div>{{ ApiRef("DOM") }}</div> + +<div></div> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Jede im Browswer geladene Webseite hat ihr eigenen <code>document</code> Objekt. Das <code>Document</code> Interface dient als Einstiegspunkt in den Inhalt der Webseite (der <a href="/en-US/docs/Using_the_W3C_DOM_Level_1_Core" title="Using_the_W3C_DOM_Level_1_Core">DOM tree</a>, beinhaltet Elemente wie {{HTMLElement("body")}} und {{HTMLElement("table")}}) und unterstützt Funktionen, die global für das Dokument gelten(z.B. das Aufrufen der URL der Seite und das Erstellen neuer Elemente im Dokument).</p> + +<p>Ein Dokument-Objekt kann von verschiedenen APIs bezogen werden:</p> + +<ul> + <li>Meistens arbeiten Sie mit dem Dokument, in dem das Skript läuft, indem Sie <code>document</code> in den <a href="/en-US/docs/HTML/Element/Script" title="HTML/Element/Script">scripts</a> des Dokuments verwenden. (Dasselbe Dokument kann auch als {{domxref("window.document")}} bezeichnet werden.)</li> + <li>Das Dokument eines Iframes über die <code><a href="/en-US/docs/Web/API/HTMLIFrameElement#Properties" title="DOM/HTMLIFrameElement#Properties">contentDocument</a></code> Eigenschaften des Iframes.</li> + <li>Die <a href="/en-US/docs/Web/API/XMLHttpRequest#responseXML" title="XMLHttpRequest#responseXML"><code>responseXML</code> of an <code>XMLHttpRequest</code> object</a>.</li> + <li>Das Dokument, zu dem ein bestimmter Knoten oder ein Element gehört, kann über die {{domxref("Node.ownerDocument","ownerDocument")}} -Eigenschaft des Knotens abgerufen werden.</li> +</ul> + +<p>Depending on the kind of the document (e.g. <a href="/en-US/docs/HTML" title="HTML">HTML</a> or <a href="/en-US/docs/XML" title="XML">XML</a>), different APIs may be available on the document object.</p> + +<ul> + <li>All document objects implement the <a href="http://dom.spec.whatwg.org/#interface-document"><code>Document</code></a> interface (and hence the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces). Thus, the "core" properties and methods documented on this page are available for all kinds of documents.</li> + <li>In contemporary browsers, some documents (e.g. those served with the <code>text/html</code> content type) also implement the {{domxref("HTMLDocument")}} interface.</li> + <li>In heutigen Browsern, SVG Dokumente implementieren das {{domxref("SVGDocument")}} Interface.</li> +</ul> + +<p>In der Zukunft, alle diese Interfaces werden zusammengefasst zum <code>Document</code> Interface.</p> + +<h2 id="Properties" name="Properties">Eigenschaften</h2> + +<div class="note"> +<p><strong>Hinweis:</strong> Das <code>Document</code> Interface erbt auch vom {{domxref("Node")}} und {{domxref("EventTarget")}} Interface.</p> +</div> + +<dl> + <dt>{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}</dt> + <dd>Provides access to all elements with an id. This is a legacy non-standard interface, you should use the {{domxref("Document.getElementById()")}} method instead.</dd> + <dt>{{domxref("Document.async")}} {{Deprecated_inline}}</dt> + <dd>Used with {{domxref("document.load")}} to indicate an asynchronous request.</dd> + <dt>{{domxref("Document.characterSet")}} {{experimental_inline}}</dt> + <dd>Returns the character set being used by the document.</dd> + <dt>{{domxref("Document.compatMode")}} {{experimental_inline}}</dt> + <dd>Indicates whether the document is rendered in Quirks or Strict mode.</dd> + <dt>{{domxref("Document.contentType")}} {{experimental_inline}}</dt> + <dd>Returns the Content-Type from the MIME Header of the current document.</dd> + <dt>{{domxref("Document.doctype")}}</dt> + <dd>Returns the Document Type Definition (DTD) of the current document.</dd> + <dt>{{domxref("Document.documentElement")}}</dt> + <dd>Returns the Element that is a direct child of the document. For HTML documents, this is normally the HTML element.</dd> + <dt>{{domxref("Document.documentURI")}}</dt> + <dd>Returns the document URL.</dd> + <dt>{{domxref("Document.domConfig")}} {{Deprecated_inline}}</dt> + <dd>Should return a {{domxref("DOMConfiguration")}} object.</dd> + <dt>{{domxref("Document.implementation")}}</dt> + <dd>Returns the DOM implementation associated with the current document.</dd> + <dt>{{domxref("Document.inputEncoding")}} {{Deprecated_inline}}</dt> + <dd>Returns the encoding used when the document was parsed.</dd> + <dt>{{domxref("Document.lastStyleSheetSet")}}</dt> + <dd>Returns the name of the style sheet set that was last enabled. Has the value <code>null</code> until the style sheet is changed by setting the value of {{domxref("Document.selectedStyleSheetSet","selectedStyleSheetSet")}}.</dd> + <dt>{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}</dt> + <dd><code>true</code> if this document is synthetic, such as a standalone image, video, audio file, or the like.</dd> + <dt>{{domxref("Document.mozFullScreen")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> + <dd><code>true</code> when the document is in {{domxref("Using_full-screen_mode","full-screen mode")}}.</dd> + <dt>{{domxref("Document.mozFullScreenElement")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> + <dd>The element that's currently in full screen mode for this document.</dd> + <dt>{{domxref("Document.mozFullScreenEnabled")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> + <dd><code>true</code> if calling {{domxref("element.mozRequestFullscreen()")}} would succeed in the curent document.</dd> + <dt>{{domxref("Document.pointerLockElement")}} {{experimental_inline}}</dt> + <dd>Returns the element set as the target for mouse events while the pointer is locked. <code>null</code> if lock is pending, pointer is unlocked, or if the target is in another document.</dd> + <dt>{{domxref("Document.preferredStyleSheetSet")}}</dt> + <dd>Returns the preferred style sheet set as specified by the page author.</dd> + <dt>{{domxref("Document.selectedStyleSheetSet")}}</dt> + <dd>Returns which style sheet set is currently in use.</dd> + <dt>{{domxref("Document.styleSheets")}}</dt> + <dd>Returns a list of the style sheet objects on the current document.</dd> + <dt>{{domxref("Document.styleSheetSets")}}</dt> + <dd>Returns a list of the style sheet sets available on the document.</dd> + <dt>{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}</dt> + <dd>Returns the encoding as determined by the XML declaration.</dd> + <dt>{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}</dt> + <dd>Returns <code>true</code> if the XML declaration specifies the document to be standalone (<em>e.g.,</em> An external part of the DTD affects the document's content), else <code>false</code>.</dd> + <dt>{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}</dt> + <dd>Returns the version number as specified in the XML declaration or <code>"1.0"</code> if the declaration is absent.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p> + +<p>{{page("/en-US/docs/Web/API/ParentNode","Properties")}}</p> + +<h3 id="Erweiterung_für_HTML_Dokumente">Erweiterung für HTML Dokumente</h3> + +<p>Das <code>Document</code> Interface für HTML Dokumente erbt vom {{domxref("HTMLDocument")}} Interface oder, ist seit HTML5 erweitert für solche Dokumente:</p> + +<dl> + <dt>{{domxref("Document.activeElement")}}</dt> + <dd>Returns the currently focused element.</dd> + <dt>{{domxref("Document.alinkColor")}} {{Deprecated_inline}}</dt> + <dd>Returns or sets the color of active links in the document body.</dd> + <dt>{{domxref("Document.anchors")}}</dt> + <dd>Returns a list of all of the anchors in the document.</dd> + <dt>{{domxref("Document.applets")}} {{Deprecated_inline}}</dt> + <dd>Returns an ordered list of the applets within a document.</dd> + <dt>{{domxref("Document.bgColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the background color of the current document.</dd> + <dt>{{domxref("Document.body")}}</dt> + <dd>Returns the {{HTMLElement("body")}} element of the current document.</dd> + <dt>{{domxref("Document.cookie")}}</dt> + <dd>Returns a semicolon-separated list of the cookies for that document or sets a single cookie.</dd> + <dt>{{domxref("Document.defaultView")}}</dt> + <dd>Returns a reference to the window object.</dd> + <dt>{{domxref("Document.designMode")}}</dt> + <dd>Gets/sets the ability to edit the whole document.</dd> + <dt>{{domxref("Document.dir")}}</dt> + <dd>Gets/sets directionality (rtl/ltr) of the document.</dd> + <dt>{{domxref("Document.domain")}}</dt> + <dd>Returns the domain of the current document.</dd> + <dt>{{domxref("Document.embeds")}}</dt> + <dd>Returns a list of the embedded {{HTMLElement('embed')}} elements within the current document.</dd> + <dt>{{domxref("Document.fgColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the foreground color, or text color, of the current document.</dd> + <dt>{{domxref("Document.forms")}}</dt> + <dd>Returns a list of the {{HTMLElement("form")}} elements within the current document.</dd> + <dt>{{domxref("Document.head")}}</dt> + <dd>Returns the {{HTMLElement("head")}} element of the current document.</dd> + <dt>{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Gets/sets the height of the current document.</dd> + <dt>{{domxref("Document.images")}}</dt> + <dd>Returns a list of the images in the current document.</dd> + <dt>{{domxref("Document.lastModified")}}</dt> + <dd>Returns the date on which the document was last modified.</dd> + <dt>{{domxref("Document.linkColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the color of hyperlinks in the document.</dd> + <dt>{{domxref("Document.links")}}</dt> + <dd>Returns a list of all the hyperlinks in the document.</dd> + <dt>{{domxref("Document.location")}}</dt> + <dd>Returns the URI of the current document.</dd> + <dt>{{domxref("Document.plugins")}}</dt> + <dd>Returns a list of the available plugins.</dd> + <dt>{{domxref("Document.readyState")}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns loading status of the document.</dd> + <dt>{{domxref("Document.referrer")}}</dt> + <dd>Returns the URI of the page that linked to this page.</dd> + <dt>{{domxref("Document.scripts")}}</dt> + <dd>Returns all the {{HTMLElement("script")}} elements on the document.</dd> + <dt>{{domxref("Document.title")}}</dt> + <dd>Returns the title of the current document.</dd> + <dt>{{domxref("Document.URL")}}</dt> + <dd>Returns a string containing the URL of the current document.</dd> + <dt>{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the color of visited hyperlinks.</dd> + <dt>{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Returns the width of the current document.</dd> +</dl> + +<h3 id="Event_handlers" name="Event_handlers">Event handlers</h3> + +<dl> + <dt>{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}</dt> + <dd>Returns the event handling code for the {{event("pointerlockchange")}} event.</dd> + <dt>{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}</dt> + <dd>Returns the event handling code for the {{event("pointerlockerror")}} event.</dd> + <dt>{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns the event handling code for the <code>readystatechange</code> event.</dd> +</dl> + +<h2 id="Methods" name="Methods">Methoden</h2> + +<div class="note"> +<p><strong>Hinweis:</strong> Das <code>Document</code> Interface erbt auch vom {{domxref("Node")}} und {{domxref("EventTarget")}} Interface.</p> +</div> + +<dl> + <dt>{{domxref("Document.adoptNode","Document.adoptNode(Node node)")}}</dt> + <dd>Adopt node from an external document.</dd> + <dt>{{domxref("Document.captureEvents","Document.captureEvents(String eventName)")}} {{Deprecated_inline}}</dt> + <dd>See {{domxref("window.captureEvents")}}.</dd> + <dt>{{domxref("Document.caretPositionFromPoint","Document.caretPositionFromPoint(Number x, Number y)")}}</dt> + <dd>Gets a {{domxref("CaretPosition")}} based on two coordinates.</dd> + <dt>{{domxref("Document.createAttribute","Document.createAttribute(String name)")}}</dt> + <dd>Creates a new {{domxref("Attr")}} object and returns it.</dd> + <dt>{{domxref("Document.createAttributeNS","Document.createAttributeNS(String namespace, String name)")}}</dt> + <dd>Creates a new attribute node in a given namespace and returns it.</dd> + <dt>{{domxref("Document.createCDATASection","Document.createCDATASection(String data)")}}</dt> + <dd>Creates a new CDATA node and returns it.</dd> + <dt>{{domxref("Document.createComment","Document.createComment(String comment)")}}</dt> + <dd>Creates a new comment node and returns it.</dd> + <dt>{{domxref("Document.createDocumentFragment()")}}</dt> + <dd>Creates a new document fragment.</dd> + <dt>{{domxref("Document.createElement","Document.createElement(String name)")}}</dt> + <dd>Creates a new element with the given tag name.</dd> + <dt>{{domxref("Document.createElementNS","Document.createElementNS(String namespace, String name)")}}</dt> + <dd>Creates a new element with the given tag name and namespace URI.</dd> + <dt>{{domxref("Document.createEntityReference","Document.createEntityReference(String name)")}} {{obsolete_inline}}</dt> + <dd>Creates a new entity reference object and returns it.</dd> + <dt>{{domxref("Document.createEvent","Document.createEvent(String interface)")}}</dt> + <dd>Creates an event object.</dd> + <dt>{{domxref("Document.createNodeIterator","Document.createNodeIterator(Node root[, Number whatToShow[, NodeFilter filter]])")}}</dt> + <dd>Creates a {{domxref("NodeIterator")}} object.</dd> + <dt>{{domxref("Document.createProcessingInstruction","Document.createProcessingInstruction(String target, String data)")}}</dt> + <dd>Creates a new {{domxref("ProcessingInstruction")}} object.</dd> + <dt>{{domxref("Document.createRange()")}}</dt> + <dd>Creates a {{domxref("Range")}} object.</dd> + <dt>{{domxref("Document.createTextNode","Document.createTextNode(String text)")}}</dt> + <dd>Creates a text node.</dd> + <dt>{{domxref("Document.createTreeWalker","Document.createTreeWalker(Node root[, Number whatToShow[, NodeFilter filter]])")}}</dt> + <dd>Creates a {{domxref("TreeWalker")}} object.</dd> + <dt>{{domxref("Document.elementFromPoint","Document.elementFromPoint(Number x, Number y)")}}</dt> + <dd>Returns the element visible at the specified coordinates.</dd> + <dt>{{domxref("Document.enableStyleSheetsForSet","Document.enableStyleSheetsForSet(String name)")}}</dt> + <dd>Enables the style sheets for the specified style sheet set.</dd> + <dt>{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}</dt> + <dd>Release the pointer lock.</dd> + <dt>{{domxref("Document.getElementsByClassName","Document.getElementsByClassName(String className)")}}</dt> + <dd>Returns a list of elements with the given class name.</dd> + <dt>{{domxref("Document.getElementsByTagName","Document.getElementsByTagName(String tagName)")}}</dt> + <dd>Returns a list of elements with the given tag name.</dd> + <dt>{{domxref("Document.getElementsByTagNameNS","Document.getElementsByTagNameNS(String namespace, String tagName)")}}</dt> + <dd>Returns a list of elements with the given tag name and namespace.</dd> + <dt>{{domxref("Document.importNode","Document.importNode(Node node, Boolean deep)")}}</dt> + <dd>Returns a clone of a node from an external document.</dd> + <dt>{{domxref("document.mozSetImageElement")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Allows you to change the element being used as the background image for a specified element ID.</dd> + <dt>{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}</dt> + <dd>Replaces entities, normalizes text nodes, etc.</dd> + <dt>{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Releases the current mouse capture if it's on an element in this document.</dd> + <dt>{{domxref("Document.releaseEvents")}} {{non-standard_inline}} {{Deprecated_inline}}</dt> + <dd>See {{domxref("window.releaseEvents")}}.</dd> + <dt>{{domxref("document.routeEvent")}} {{non-standard_inline}} {{obsolete_inline(24)}}</dt> + <dd>See {{domxref("window.routeEvent")}}.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p> + +<dl> + <dt>{{domxref("Document.getElementById","Document.getElementById(String id)")}}</dt> + <dd>Returns an object reference to the identified element.</dd> + <dt>{{domxref("Document.querySelector","Document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt> + <dd>Returns the first Element node within the document, in document order, that matches the specified selectors.</dd> + <dt>{{domxref("Document.querySelectorAll","Document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt> + <dd>Returns a list of all the Element nodes within the document that match the specified selectors.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("XPathEvaluator")}} interface:</p> + +<dl> + <dt>{{domxref("Document.createExpression","Document.createExpression(String expression, XPathNSResolver resolver)")}}</dt> + <dd>Compiles an <code><a href="/en-US/docs/XPathExpression" title="XPathExpression">XPathExpression</a></code> which can then be used for (repeated) evaluations.</dd> + <dt>{{domxref("Document.createNSResolver","Document.createNSResolver(Node resolver)")}}</dt> + <dd>Creates an {{domxref("XPathNSResolver")}} object.</dd> + <dt>{{domxref("Document.evaluate","Document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}</dt> + <dd>Evaluates an XPath expression.</dd> +</dl> + +<h3 id="Erweiterung_für_HTML_Dokumente_2">Erweiterung für HTML Dokumente</h3> + +<p>Das <code>Document</code> Interface für HTML Dokumente erbt vom {{domxref("HTMLDocument")}} Interface oder ist seit HTML5 erweitert für solche Dokumente:</p> + +<dl> + <dt>{{domxref("Document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt> + <dd>In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.</dd> + <dt>{{domxref("Document.close()")}}</dt> + <dd>Closes a document stream for writing.</dd> + <dt>{{domxref("Document.execCommand","Document.execCommand(String command[, Boolean showUI[, String value]])")}}</dt> + <dd>On an editable document, executes a formating command.</dd> + <dt>{{domxref("Document.getElementsByName","Document.getElementsByName(String name)")}}</dt> + <dd>Returns a list of elements with the given name.</dd> + <dt>{{domxref("Document.getSelection()")}}</dt> + <dd>Returns a {{domxref("Selection")}} object related to text selected in the document.</dd> + <dt>{{domxref("Document.hasFocus()")}}</dt> + <dd>Returns <code>true</code> if the focus is currently located anywhere inside the specified document.</dd> + <dt>{{domxref("Document.open()")}}</dt> + <dd>Opens a document stream for writing.</dd> + <dt>{{domxref("Document.queryCommandEnabled","Document.queryCommandEnabled(String command)")}}</dt> + <dd>Returns true if the formating command can be executed on the current range.</dd> + <dt>{{domxref("Document.queryCommandIndeterm","Document.queryCommandIndeterm(String command)")}}</dt> + <dd>Returns true if the formating command is in an indeterminate state on the current range.</dd> + <dt>{{domxref("Document.queryCommandState","Document.queryCommandState(String command)")}}</dt> + <dd>Returns true if the formating command has been executed on the current range.</dd> + <dt>{{domxref("Document.queryCommandSupported","Document.queryCommandSupported(String command)")}}</dt> + <dd>Returns true if the formating command is supported on the current range.</dd> + <dt>{{domxref("Document.queryCommandValue","Document.queryCommandValue(String command)")}}</dt> + <dd>Returns the current value of the current range for a formatting command.</dd> + <dt>{{domxref("Document.registerElement","Document.registerElement(String tagname[, Object options])")}}</dt> + <dd>Registers a new custom element in the browser and returns a constructor for the new element.</dd> + <dt>{{domxref("Document.write","Document.write(String text)")}}</dt> + <dd>Writes text in a document.</dd> + <dt>{{domxref("Document.writeln","Document.writeln(String text)")}}</dt> + <dd>Writes a line of text in a document.</dd> +</dl> + +<h2 id="Spezifikationen">Spezifikationen</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('DOM1','#i-Document','Document')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition for the interface</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','#i-Document','Document')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Supersede DOM 1</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','#i-Document','Document')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Supersede DOM 2</td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#interface-document','Document')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Intend to supersede DOM 3</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Turn the {{domxref("HTMLDocument")}} interface into a <code>Document</code> extension.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}</td> + <td>{{Spec2('DOM3 XPath')}}</td> + <td>Define the {{domxref("XPathEvaluator")}} interface which extend <code>Document</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML Editing','#dom-document-getselection','Document')}}</td> + <td>{{Spec2('HTML Editing')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('CSSOM')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<h3 id="Firefox_Hinweise">Firefox Hinweise</h3> + +<p>Mozilla defines a set of non-standard properties made only for XUL content:</p> + +<dl> + <dt>{{domxref("document.currentScript")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Returns the {{HTMLElement("script")}} element that is currently executing.</dd> + <dt>{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}</dt> + <dd>(<strong>Mozilla add-ons only!</strong>) Returns the {{Interface("nsIURI")}} object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).</dd> + <dt>{{domxref("document.popupNode")}}</dt> + <dd>Returns the node upon which a popup was invoked.</dd> + <dt>{{domxref("document.tooltipNode")}}</dt> + <dd>Returns the node which is the target of the current tooltip.</dd> +</dl> + +<p>Mozilla also define some non-standard methods:</p> + +<dl> + <dt>{{domxref("Document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}</dt> + <dd>This method never did anything and always threw an exception, so it was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd> + <dt>{{domxref("Document.getBoxObjectFor")}} {{obsolete_inline}}</dt> + <dd>Use the {{domxref("Element.getBoundingClientRect()")}} method instead.</dd> + <dt>{{domxref("Document.loadOverlay")}} {{Fx_minversion_inline("1.5")}}</dt> + <dd>Loads a <a href="/en-US/docs/XUL_Overlays" title="XUL_Overlays">XUL overlay</a> dynamically. This only works in XUL documents.</dd> + <dt>{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}</dt> + <dd>This method never did anything but throw an exception, and was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd> +</dl> + +<h3 id="Internet_Explorer_Hinweise">Internet Explorer Hinweise</h3> + +<p>Microsoft defines some non-standard properties:</p> + +<dl> + <dt>{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See <a href="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx">MSDN</a>.</dd> + <dt><span style="font-weight: normal; line-height: 1.5;">Internet Explorer does not support all methods from the <code>Node</code> interface in the <code>Document</code> interface:</span></dt> +</dl> + +<dl> + <dt>{{domxref("document.contains")}}</dt> + <dd>As a work-around, <code>document.body.contains()</code> can be used.</dd> +</dl> diff --git a/files/de/web/api/document/queryselector/index.html b/files/de/web/api/document/queryselector/index.html new file mode 100644 index 0000000000..7fadcd87ce --- /dev/null +++ b/files/de/web/api/document/queryselector/index.html @@ -0,0 +1,129 @@ +--- +title: Document.querySelector() +slug: Web/API/Document/querySelector +tags: + - API + - DOM + - Funktion + - Methode(2) + - Méthode + - Referenz + - Selektor + - Selektoren +translation_of: Web/API/Document/querySelector +--- +<div>{{ApiRef("DOM")}}</div> + +<p>Die Methode <code><strong>querySelector()</strong></code> von {{domxref("Document")}} gibt das erste {{domxref("Element")}} innerhalb eines Dokuments zurück, welches dem angegebenen Selektor bzw. Selektoren entspricht. Wurden keine Übereinstimmungen gefunden wird <code>null</code> zurückgegeben.</p> + +<div class="blockIndicator note"> +<p><strong>Hinweis:</strong> Der Abgleich erfolgt indem sämtliche Knoten des Dokuments und deren Unterknoten der Reihe nach mittels Tiefensuche in Hauptreihenfolge (<em>depth-first pre-order</em>) durchlaufen werden.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>element</var> = document.querySelector(<var>selectors</var>); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>selectors</code></dt> + <dd>Ein {{domxref("DOMString")}} mit einem oder mehreren Selektoren die abgeblichen werden sollen. Dieser String muss ein gültiger CSS-Selektor-String sein. Ist dies nicht der Fall, wird eine <code>SYNTAX_ERR</code> Exception ausgelöst. Weitere Informationen zu Selektoren und deren Verwaltung finden Sie unter <a href="/de/docs/Gecko-DOM-Referenz/DOM_Elemente_mittels_Selektoren_ermitteln">DOM Elemente mittels Selektoren ermitteln</a>.</dd> +</dl> + +<div class="note"> +<p><strong>Hinweis:</strong> Zeichen, die nicht zur Standard-CSS-Syntax gehören, müssen mit einem Backslash-Zeichen maskiert werden. Da JavaScript auch Backslash-Escape-Anweisungen verwendet, müssen Sie beim Schreiben von String-Literalen mit diesen Zeichen besonders vorsichtig sein. Weitere Informationen finden Sie unter {{anch("Sonderzeichen maskieren")}}.</p> +</div> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein {{domxref("Element")}}-Objekt, das das erste Element des Dokuments darstellt, das der angegebenen Gruppe von <a href="/de/docs/Web/CSS/CSS_Selectors">CSS-Selektoren</a> entspricht, oder <code>null</code>, wenn keine Übereinstimmungen vorhanden sind.</p> + +<p>Wenn Sie eine Liste aller Elemente benötigen, die mit den angegebenen Selektoren übereinstimmen, verwenden Sie stattdessen {{domxref("document.querySelectorAll()", "querySelectorAll()")}}.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<dl> + <dt><code>SYNTAX_ERR</code></dt> + <dd>Die Syntax der angegebenen Selektoren ist ungültig.</dd> +</dl> + +<h2 id="Nutzungshinweise">Nutzungshinweise</h2> + +<p>Wenn der angegebene Selektor mit einer ID übereinstimmt, die im Dokument fälschlicherweise mehrmals vorkommt, wird das erste Element mit dieser ID zurückgegeben.</p> + +<p><a href="/de/docs/Web/CSS/Pseudo-elements">CSS-Pseudoelemente</a> geben niemals Elemente zurück, wie in der <a href="https://www.w3.org/TR/selectors-api/#grammar">Selektoren-API</a> angegeben.</p> + +<h3 id="Sonderzeichen_maskieren">Sonderzeichen maskieren</h3> + +<p>Um mit einer ID oder Selektoren abzugleichen, die nicht der Standard-CSS-Syntax entsprechen (z. B. durch einen unzulässigen Doppelpunkt oder Leerzeichen), müssen Sie das Zeichen mit einem Backslash ("<code>\</code>") maskieren. Da der Backslash selbst ebenfalls ein Maskierungszeichen in JavaScript ist, müssen Sie ihn bei der Eingabe eines Stringliterals <em>zweimal</em> maskieren (einmal für den JavaScript String und einmal für <code>querySelector()</code>):</p> + +<pre class="brush: html"><div id="foo\bar"></div> +<div id="foo:bar"></div> + +<script> + console.log('#foo\bar'); // "#fooar" (\b is the backspace control character) + document.querySelector('#foo\bar'); // Does not match anything + + console.log('#foo\\bar'); // "#foo\bar" + console.log('#foo\\\\bar'); // "#foo\\bar" + document.querySelector('#foo\\bar'); // Match the first div + + document.querySelector('#foo:bar'); // Does not match anything + document.querySelector('#foo\\:bar'); // Match the second div +</script></pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Erstes_Element_ermitteln_das_mit_einer_Klasse_übereinstimmt">Erstes Element ermitteln, das mit einer Klasse übereinstimmt</h3> + +<p>In diesem Beispiel wird das erste Element im Dokument mit der Klasse "<code>myclass</code>" zurückgegeben:</p> + +<pre class="brush: js">var el = document.querySelector(".myclass"); +</pre> + +<h3 id="Ein_komplexerer_Selektor">Ein komplexerer Selektor</h3> + +<p>Selektoren können auch sehr mächtig sein, wie das folgende Beispiel zeigt. Hier wird das erste {{HTMLElement("input")}}-Element mit dem Namen "login" (<code><input name="login"/></code>) innerhalb eines {{HTMLElement("div")}}, dessen Klasse "user-panel main" ist (<code><div class="user-panel main"></code>), im Dokument zurückgegeben:</p> + +<pre class="brush: js">var el = document.querySelector("div.user-panel.main input[name='login']"); +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 2")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 1")}}</td> + <td>Initiale Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<div>{{Compat("api.Document.querySelector")}}</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Gecko-DOM-Referenz/DOM_Elemente_mittels_Selektoren_ermitteln">DOM Elemente mittels Selektoren ermitteln</a></li> + <li>{{domxref("Element.querySelector()")}}</li> + <li>{{domxref("Document.querySelectorAll()")}}</li> + <li>{{domxref("Element.querySelectorAll()")}}</li> + <li><a href="/de/docs/Code_snippets/QuerySelector">Code-Ausschnitte für querySelector</a></li> +</ul> diff --git a/files/de/web/api/document/queryselectorall/index.html b/files/de/web/api/document/queryselectorall/index.html new file mode 100644 index 0000000000..80ab2a83c2 --- /dev/null +++ b/files/de/web/api/document/queryselectorall/index.html @@ -0,0 +1,172 @@ +--- +title: Document.querySelectorAll() +slug: Web/API/Document/querySelectorAll +tags: + - API + - Document + - querySelectorAll +translation_of: Web/API/Document/querySelectorAll +--- +<div>{{APIRef("DOM")}}</div> + +<p>Die Methode <code><strong>querySelectorAll()</strong></code> von {{domxref("Document")}} gibt eine statische (nicht live) {{domxref("NodeList")}} zurück, die eine Liste der Elemente des Dokuments darstellt, die mit der angegebenen Selektorgruppe übereinstimmen.</p> + +<div class="blockIndicator note"> +<p><strong>Hinweis:</strong> Diese Methode wird basierend auf dem Mixin der Methode {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} von {{domxref("ParentNode")}} implementiert.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>selectors</code></dt> + <dd>Ein {{domxref("DOMString")}} der einen oder mehrere Selektoren zum Abgleich enthält. Dieser String muss ein valider <a href="/de/docs/Web/CSS/CSS_Selectors">CSS-Selektor</a>-String sein, andernfalls wird eine <code>SyntaxError</code> Exception ausgelöst. Weitere Informationen zu Selektoren und deren Verwaltung finden Sie unter <a href="https://developer.mozilla.org/de/docs/Gecko-DOM-Referenz/DOM_Elemente_mittels_Selektoren_ermitteln">DOM Elemente mittels Selektoren ermitteln</a>. Es können mehrere durch Kommata getrennte Selektoren angegeben werden.</dd> +</dl> + +<div class="note"> +<p><strong>Hinweis:</strong> Zeichen, die nicht zur Standard-CSS-Syntax gehören, müssen mit einem Backslash-Zeichen maskiert werden. Da JavaScript auch Backslash-Escape-Anweisungen verwendet, müssen Sie beim Schreiben von String-Literalen mit diesen Zeichen besonders vorsichtig sein. Weitere Informationen finden Sie unter {{anch("Sonderzeichen maskieren")}}.</p> +</div> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Eine statische (nicht-live) {{domxref("NodeList")}} mit je einem {{domxref("Element")}}-Objekt für jedes Element das mind. einem der angegebenen Selektoren entspricht oder eine leere {{domxref("NodeList")}} im Falle keiner Übereinstimmungen.</p> + +<div class="blockIndicator note"> +<p><strong>Hinweis:</strong> Wenn <code>selectors</code> ein <a href="/de/docs/Web/CSS/Pseudo-elements">CSS Pseudo-Element</a> enthält ist die zurückgegebene Liste immer leer.</p> +</div> + +<h3 id="Exceptions">Exceptions</h3> + +<dl> + <dt><code>SyntaxError</code></dt> + <dd>Die Syntax des <code>selectors</code>-String ist ungültig.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Eine_Liste_von_Übereinstimmungen_erhalten">Eine Liste von Übereinstimmungen erhalten</h3> + +<p>Um eine {{domxref("NodeList")}} aller {{HTMLElement("p")}}-Elemente des Dokuments zu erhalten:</p> + +<pre class="brush: js">var matches = document.querySelectorAll("p");</pre> + +<p>Das folgende Beispiel gibt eine Liste aller {{HTMLElement("div")}}-Elemente innerhalb des Dokuments zurück, deren Klasse entweder <code>"note"</code> oder <code>"alert"</code> ist:</p> + +<pre class="brush: js">var matches = document.querySelectorAll("div.note, div.alert"); +</pre> + +<p>Hier erhalten wir eine Liste von <code><p></code>-Elementen, deren unmittelbares übergeordnetes Element ein {{HTMLElement("div")}} mit der Klasse <code>"highlighted"</code> ist und die sich in einem Container befinden, dessen ID <code>"test"</code> ist.</p> + +<pre class="brush: js">var container = document.querySelector("#test"); +var matches = container.querySelectorAll("div.highlighted > p");</pre> + +<p>Das folgende Beispiel nutzt einen <a href="/de/docs/Web/CSS/Attribute_selectors">Attribut-Selektor</a>, um eine Liste von {{HTMLElement("iframe")}}-Elementen im Dokument zurückzugeben, die ein <code>"data-src"</code> Attribut besitzen:</p> + +<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre> + +<p>Hier wird ein Attribut-Selektor verwendet, um eine Aufzählung der Listenelemente zurückzugeben, die in einer Liste mit der ID <code>"userlist"</code> enthalten sind und deren Attribut <code>"data-active"</code> den Wert <code>"1"</code> hat:</p> + +<pre class="brush: js">var container = document.querySelector("#userlist"); +var matches = container.querySelectorAll("li[data-active='1']");</pre> + +<h3 id="Auf_Übereinstimmungen_zugreifen">Auf Übereinstimmungen zugreifen</h3> + +<p>Sobald die {{domxref("NodeList")}} der übereinstimmenden Elemente zurückgegeben wird, können Sie sie wie jedes Array untersuchen. Wenn das Array leer ist (d. h. die Eigenschaft <code>length</code> 0 ist), wurden keine Übereinstimmungen gefunden.</p> + +<p>Ansonsten können Sie einfach die Standard-Array-Notation verwenden, um auf den Inhalt der Liste zuzugreifen. Sie können jede allgemeine Schleifenanweisung verwenden, wie etwa:</p> + +<pre class="brush: js">var highlightedItems = userList.querySelectorAll(".highlighted"); + +highlightedItems.forEach(function(userItem) { + deleteUser(userItem); +});</pre> + +<h2 id="Benutzerhinweise">Benutzerhinweise</h2> + +<p><code>querySelectorAll()</code> verhält sich anders als die meisten JavaScript-DOM-Bibliotheken, was zu unerwarteten Ergebnissen führen kann.</p> + +<h3 id="HTML">HTML</h3> + +<p>Betrachten Sie dieses HTML mit seinen drei geschachtelten {{HTMLElement("div")}} Blöcken.</p> + +<pre class="brush: html"><div class="outer"> + <div class="select"> + <div class="inner"> + </div> + </div> +</div></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var select = document.querySelector('.select'); +var inner = select.querySelectorAll('.outer .inner'); +inner.length; // 1, not 0! +</pre> + +<p>Wenn Sie in diesem Beispiel <code>".outer .inner"</code> im Kontext des <code><div></code> mit der Klasse <code>"select"</code> auswählen, wird das Element mit der Klasse <code>".inner"</code> immer noch gefunden, obwohl <code>.outer</code> kein Nachkomme des Basis-Elements ist, auf dem die Suche durchgeführt wird (<code>".select"</code>). Standardmäßig überprüft <code>querySelectorAll()</code> nur, ob sich das letzte Element im Selektor im Suchbereich befindet.</p> + +<p>Die {{cssxref(":scope")}} Pseudo-Klasse stellt das erwartete Verhalten wieder her, bei dem Selektoren nur mit Nachkommen des Basis-Elements übereinstimmen:</p> + +<pre class="brush: js">var select = document.querySelector('.select'); +var inner = select.querySelectorAll(':scope .outer .inner'); +inner.length; // 0 +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Lebender Standard</td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("Selectors API Level 2")}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td>Initiale Definition</td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 1")}}</td> + <td>Originale Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("api.Document.querySelectorAll")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="https://developer.mozilla.org/de/docs/Gecko-DOM-Referenz/DOM_Elemente_mittels_Selektoren_ermitteln">DOM Elemente mittels Selektoren ermitteln</a></li> + <li><a href="/de/docs/Web/CSS/Attribute_selectors">Attribut-Selektoren</a> im CSS-Leitfaden</li> + <li><a href="/de/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Attribut-Selektoren</a> im MDN Lernbereich</li> + <li>{{domxref("Element.querySelector()")}} und {{domxref("Element.querySelectorAll()")}}</li> + <li>{{domxref("Document.querySelector()")}}</li> + <li>{{domxref("DocumentFragment.querySelector()")}} und {{domxref("DocumentFragment.querySelectorAll()")}}</li> + <li>{{domxref("ParentNode.querySelector()")}} und {{domxref("ParentNode.querySelectorAll()")}}</li> + <li><a class="new" href="/de/docs/Code_snippets/QuerySelector" rel="nofollow">Code-Ausschnitte für <code>querySelector()</code></a></li> +</ul> diff --git a/files/de/web/api/document/readystate/index.html b/files/de/web/api/document/readystate/index.html new file mode 100644 index 0000000000..da2593e9c7 --- /dev/null +++ b/files/de/web/api/document/readystate/index.html @@ -0,0 +1,111 @@ +--- +title: Document.readyState +slug: Web/API/Document/readyState +tags: + - API + - HTML DOM + - Property + - Referenz +translation_of: Web/API/Document/readyState +--- +<div>{{APIRef("DOM")}} {{ gecko_minversion_header("1.9.2") }}</div> + +<h2 id="Summary" name="Summary">Zusammenfassung</h2> + +<p>Die Eigenschaft <strong>Document.readyState</strong> eines {{ domxref("document") }}-Objektes beschreibt dessen Ladezustand.</p> + +<h3 id="Werte">Werte</h3> + +<p>Die Eigenschaft <strong>readyState</strong> kann folgende Werte haben:</p> + +<dl> + <dt>loading</dt> + <dd>Das Dokument wird noch geladen.</dd> + <dt>interactive</dt> + <dd>Das Dokument selbst wurde vollständig eingelesen und verarbeitet, aber das Laden weiterer Bestandteile wie Bilder, Stylesheets und Frames ist noch nicht abgeschlossen.<br> + Dieser Status zeigt an, dass das Ereignis {{event("DOMContentLoaded")}} ausgelöst wurde.</dd> + <dt>complete</dt> + <dd>Das Dokument und seine Bestandteile wurden geladen.<br> + Dieser Status zeigt an, dass das Ereignis {{event("load")}} ausgelöst wurde.</dd> +</dl> + +<p>Ändert sich der Wert dieser Eigenschaft, wird das Ereignis {{event("readystatechange")}} des zugehörigen {{domxref("document") }}-Objekts augelöst.</p> + +<h2 id="Syntax"><span>Syntax</span></h2> + +<pre class="brush: js"><em>var string</em> = document.readyState; +</pre> + +<h2 id="Beispiele"><span>Beispiele</span></h2> + +<h3 id="Verschiedene_Ladezustände">Verschiedene Ladezustände</h3> + +<pre class="brush: js"><span>switch (document.readyState) { + case "loading": + // Das Dokument wird noch geladen. + break; + case "interactive": + // Das Dokument wurde geladen. Wir können nun die DOM-Elemente ansprechen. + var span = document.createElement("span"); + span.textContent = "A <span> element."; + document.body.appendChild(span); + break; + case "complete": + // Die Seite ist komplett geladen. + console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText); + break; +}</span> +</pre> + +<h3 id="readystatechange_als_eine_Alternative_zum_Ereignis_DOMContentLoaded">readystatechange als eine Alternative zum Ereignis DOMContentLoaded</h3> + +<pre class="brush:js">// Alternative zum Ereignis DOMContentLoaded +document.onreadystatechange = function () { + if (document.readyState == "interactive") { + initApplication(); + } +}</pre> + +<h3 id="readystatechange_als_eine_Alternative_zum_Ereignis_load">readystatechange als eine Alternative zum Ereignis load</h3> + +<pre class="brush: js">// Alternative zum Ereignis load +document.onreadystatechange = function () { + if (document.readyState == "complete") { + initApplication(); + } +}</pre> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="spectable 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", "#current-document-readiness", "Document readiness")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initiale Spezifikation.</td> + </tr> + </tbody> +</table> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{event("readystatechange")}}</li> + <li>{{event("DOMContentLoaded")}}</li> + <li>{{event("load")}}</li> +</ul> diff --git a/files/de/web/api/document/referrer/index.html b/files/de/web/api/document/referrer/index.html new file mode 100644 index 0000000000..8c1cd8d888 --- /dev/null +++ b/files/de/web/api/document/referrer/index.html @@ -0,0 +1,46 @@ +--- +title: Document.referrer +slug: Web/API/Document/referrer +tags: + - Referenz +translation_of: Web/API/Document/referrer +--- +<div>{{APIRef("DOM")}}</div> + +<p>Gibt den <a href="http://www.w3.org/Addressing/#background">URI</a> der Seite aus, von der die aktuelle Seite aufgerufen wurde.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">var <var>string</var> = <var>document</var>.referrer; +</pre> + +<h3 id="Wert">Wert</h3> + +<p>Der Wert ist eine leere Zeichenkette, wenn der Benutzer direkt auf die Seite navigiert ist (nicht über einen Link, sondern z.B. über ein Lesezeichen). Da es sich bei dieser Eigenschaft lediglich um einen String handelt, ist der Zugriff auf das DOM der referenzierenden Seite nicht möglich.</p> + +<p>Innerhalb eines {{HTMLElement("iframe")}}, wird der <code>Document.referrer</code> anfänglich auf den identischen Wert wie {{domxref("HTMLHyperlinkElementUtils/href", "href")}} der {{domxref("Window/location", "Window.location")}} des übergeordneten Fensters gesetzt.</p> + +<h2 id="Specification" name="Specification">Spezifikation</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('HTML WHATWG', '#dom-document-referrer-dev', 'document.referrer')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten erstellt. Wenn Sie einen Beitrag zu den Daten leisten möchten, dann laden Sie sich bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> herunter und senden Sie uns eine Pull-Anfrage.</div> + +<p>{{Compat("api.Document.referrer")}}</p> diff --git a/files/de/web/api/document/registerelement/index.html b/files/de/web/api/document/registerelement/index.html new file mode 100644 index 0000000000..f563250e8e --- /dev/null +++ b/files/de/web/api/document/registerelement/index.html @@ -0,0 +1,113 @@ +--- +title: Document.registerElement() +slug: Web/API/Document/registerElement +tags: + - API + - DOM + - Veraltet + - Web Components +translation_of: Web/API/Document/registerElement +--- +<p>{{APIRef("DOM")}}</p> + +<div class="warning"> +<p><strong>Warnung: </strong>document.registerElement() läuft zu Gunsten von <a href="/en-US/docs/Web/API/CustomElementRegistry/define">customElements.define()</a> aus.</p> +</div> + +<p>{{draft}}</p> + +<p>Die <code><strong>document.registerElement()</strong></code>-Methode registriert ein neues <a href="/en-US/docs/Web/Web_Components/Custom_Elements">benutzerdefiniertes Element</a> im Browser und gibt einen Konstruktor für das neue Element zurück.</p> + +<div class="note"> +<p><strong>Hinweis:</strong> Dies ist eine experimentelle Technologie. Der Browser, der sie benutzen soll, muss Web Components unterstützen. Siehe <a href="/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Web Components in Firefox erlauben</a>.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>constructor</em> = document.registerElement(<em>tag-name</em>, <em>options</em>);</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><em>tag-name</em></dt> + <dd>Der Name des benutzerdefinierten Elements. Der Name muss einen Bindestrich (-) enthalten, zum Beispiel <code>my-tag</code>.</dd> + <dt><em>options {{optional_inline}}</em></dt> + <dd> + <p>Ein Objekt mit den Eigenschaften <strong>prototype</strong>, auf dem das benutzerdefinierte Element basieren soll, und <strong>extends</strong>, einem bestehenden Tag, der erweitert werden soll. Beide sind optional.</p> + </dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Hier ist ein einfaches Beispiel:</p> + +<pre class="brush: js">var Mytag = document.registerElement('my-tag'); +</pre> + +<p>Der Tag ist num im Browser registriert. Die <code>Mytag</code>-Variable enthält einen Konstruktor, der benutzt werden kann, um ein <code>my-tag</code>-Element wie folgt im Dokument zu erzeugen:</p> + +<pre class="brush: js">document.body.appendChild(new Mytag());</pre> + +<p>Das fügt ein leeres <code>my-tag</code>-Element ein, dass sichtbar wird, wenn die Entwicklerwerkzeuge des Browsers benutzt werden aber nicht, wenn mit Hilfe des Brwoser der Quellcode betrachtet wird. So lange dem Tag kein Inhalt beigefügt wird, wird es auch in der normalen Browser-Ansicht nicht sichtbar sein. Inhalt kann beispielsweise folgendermaßen hinzugefügt werden:</p> + +<pre class="brush: js">var mytag = document.getElementsByTagName("my-tag")[0]; +mytag.textContent = "I am a my-tag element."; +</pre> + +<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>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>35</td> + <td>31<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>25</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>Grundlegende Unterstützung</td> + <td>4.4.4</td> + <td>31<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Diese API ist hinter einer Einstellung versteckt.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a dir="ltr" href="/en-US/docs/Web/Web_Components/Custom_Elements">Custom Elements</a></li> +</ul> diff --git a/files/de/web/api/document/title/index.html b/files/de/web/api/document/title/index.html new file mode 100644 index 0000000000..9c54e274a6 --- /dev/null +++ b/files/de/web/api/document/title/index.html @@ -0,0 +1,70 @@ +--- +title: Document.title +slug: Web/API/Document/title +translation_of: Web/API/Document/title +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">Die Eigenschaft <strong><code>document.title</code></strong> holt oder setzt den aktuellen <a href="/en-US/docs/Web/HTML/Element/title">Titel</a> des Dokuments.</span></p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <var>docTitle</var> = <var>document</var>.title; +</pre> + +<p><em>docTitle</em> ist eine Zeichenfolge, die den Titel des Dokuments enthält. Wenn der Titel durch das Setzen von <code>document.title</code> überschrieben wurde, enthält er diesen Wert. Andernfalls enthält er den im Markup angegebenen Titel (siehe {{Anch("Anmerkungen")}} unten).</p> + +<pre class="syntaxbox"><em>document</em>.title = <em>newTitle</em>; +</pre> + +<p><code>newTitle</code> ist der neue Titel des Dokuments. Die Zuweisung beeinflusst den Rückgabewert von <code>document.title</code>, den für das Dokument angezeigten Titel (z.B. in der Titelleiste des Fensters oder Tabs), und sie beeinflusst auch das DOM des Dokuments (z.B. den Inhalt des Elements <code><title></code> in einem HTML-Dokument).</p> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush:js"><!DOCTYPE html> +<html> +<head> + <title>Hallo Welt!</title> +</head> +<body> + + <script> + alert(document.title); // zeigt "Hallo Welt!" + document.title = "Tschüss Welt!"; + alert(document.title); // zeigt "Tschüss Welt!" + </script> + +</body> +</html> +</pre> + +<h2 id="Anmerkungen">Anmerkungen</h2> + +<p>Diese Eigenschaft gilt für HTML-, SVG-, XUL- und andere Dokumente in Gecko.</p> + +<p>Bei HTML-Dokumenten ist der Anfangswert von <code>document.title</code> der Textinhalt des Elements <code><title></code>. Bei XUL ist es der Wert des {{XULAttr("title")}} Attributs des {{XULElem("window")}} oder eines anderen XUL-Elements der obersten Ebene.</p> + +<p>In XUL hat der Zugriff auf <code>document.title</code>, bevor das Dokument vollständig geladen ist, ein undefiniertes Verhalten: <code>document.title</code> gibt möglicherweise eine leere Zeichenfolge zurück, und das Setzen von <code>document.title</code> hat möglicherweise keine Wirkung.</p> + +<h2 id="Spezifikationen">Spezifikationen</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','#document.title','document.title')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + + + +<p>{{Compat("api.Document.title")}}</p> diff --git a/files/de/web/api/document/url/index.html b/files/de/web/api/document/url/index.html new file mode 100644 index 0000000000..29770925ee --- /dev/null +++ b/files/de/web/api/document/url/index.html @@ -0,0 +1,19 @@ +--- +title: Document.URL +slug: Web/API/Document/URL +translation_of: Web/API/Document/URL +--- +<div>{{APIRef("DOM")}}</div> + +<p>Die schreibgeschützte Eigenschaft <code><strong>URL</strong></code> des {{domxref("Document")}} interface gibt den Ort des Dokuments als String zurück.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="brush: js">var <em>string</em> = document.URL +</pre> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-46183437">DOM Level 2 HTML: URL</a></li> +</ul> diff --git a/files/de/web/api/document/width/index.html b/files/de/web/api/document/width/index.html new file mode 100644 index 0000000000..5fc3e1c80a --- /dev/null +++ b/files/de/web/api/document/width/index.html @@ -0,0 +1,45 @@ +--- +title: Document.width +slug: Web/API/Document/width +translation_of: Web/API/Document/width +--- +<div>{{APIRef("DOM")}} {{Obsolete_header}}</div> + +<div class="note"> +<p><strong>Note:</strong> Starting in {{Gecko("6.0")}},<code> document.width </code>is no longer supported. Instead, use <code>document.body.clientWidth</code>. See {{domxref("element.clientWidth")}}.</p> +</div> + +<p>Gibt die Breite des {{HTMLElement("body")}} Elements des aktuellen Dokuments in Pixeln zurück.</p> + +<p>Wird nicht vom Internet Explorer unterstützt.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>pixels</em> = document.width; +</pre> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush:js">function init() { + alert("Die Breite des Dokuments beträgt " + document.width + " Pixel."); +} +</pre> + +<h2 id="Alternatives" name="Alternatives">Alternativen</h2> + +<pre class="syntaxbox">document.body.clientWidth /* Breite des <body> */ +document.documentElement.clientWidth /* Breite des <html> */ +window.innerWidth /* Breite des Browserfensters */ +</pre> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<p>HTML5</p> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{domxref("document.height")}}</li> + <li>{{domxref("Element.clientWidth")}}</li> + <li>{{domxref("Element.scrollWidth")}}</li> +</ul> diff --git a/files/de/web/api/document/write/index.html b/files/de/web/api/document/write/index.html new file mode 100644 index 0000000000..3b25f6b658 --- /dev/null +++ b/files/de/web/api/document/write/index.html @@ -0,0 +1,85 @@ +--- +title: Document.write() +slug: Web/API/Document/write +tags: + - API + - DOM + - Document + - Méthode + - Referenz +translation_of: Web/API/Document/write +--- +<div>{{ ApiRef("DOM") }}</div> + +<p>Schreibt eine Zeichenfolge in einen Dokument-Stream, der zuvor mittels <a href="/en-US/docs/Web/API/document.open">document.open()</a> geöffnet wurde.</p> + +<div class="note">Hinweis: da <code>document.write</code> in einen Dokument-<strong>Stream </strong>schreibt, wird beim Aufruf von <code>document.write</code> auf ein geschlossenes (fertig geladenes) Dokument dieses automatisch wieder mittels <code>document.open</code> geöffnet, <a href="https://developer.mozilla.org/en-US/docs/Web/API/document.open#Notes">wodurch das Dokument geleert wird</a>.</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js">document.write(<em>markup</em>); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>markup</code></dt> + <dd>Ein String, der in das Dokument geschrieben wird.</dd> +</dl> + +<h3 id="Beispiel">Beispiel</h3> + +<pre class="brush: html"><html> + +<head> + <title>write example</title> + + <script> + function newContent() { + alert("load new content"); + document.open(); + document.write("<h1>Raus mit dem Alten - rein mit dem Neuen!</h1>"); + document.close(); + } + </script> +</head> + +<body onload="newContent();"> + <p>originaler Dokumenten-Inhalt</p> +</body> + +</html> +</pre> + +<h2 id="Hinweise">Hinweise</h2> + +<p>Wird die Ausgabe auf ein Dokument angewendet, das zuvor nicht mittels <a href="/en-US/docs/Web/API/document.open"><code>document.open()</code></a> geöffnet wurde, löst dies ein implizites <code>document.open</code> aus. Sobald Sie den Schreibvorgang beendet haben, empfiehlt es sich <a href="/en-US/docs/Web/API/document.close"><code>document.close()</code></a> aufzurufen, um dem Browser mitzuteilen, dass das Dokument vollständig geladen werden kann. Der geschriebene Text wird in das Strukturmodell des Dokuments eingelesen. Im vorherigen Beispiel wird das <code>h1</code>-Element automatisch in einen Knoten im Dokument umgewandelt.</p> + +<p>Wird der <code>document.write()</code> Aufruf in ein im HTML eingeschlossenes <code><script></code> Tag eingebunden, wird <code>document.open()</code> nicht aufgerufen. Zum Beispiel:</p> + +<pre class="brush: html"><script> + document.write("<h1>Main title</h1>") +</script> +</pre> + +<div class="note"><strong>Hinweis:</strong> <code>document.write</code> und <code>document.writeln</code> <a href="/en-US/docs/Archive/Web/Writing_JavaScript_for_HTML">funktionieren nicht in XHTML Documenten</a> (Sie erhalten einen "Operation is not supported" [<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>] Fehler in der Fehlerkonsole). Dies tritt auf, sobald Sie eine lokale Datei mit der Erweiterung .xhtml laden oder eine Datei öffnen, die mit dem <code>application/xhtml+xml</code>-<a href="/en-US/docs/Glossary/MIME_type">MIME-Typ</a> vom Server gesendet wurde. Weitere Informationen erhalten Sie in der <a class="external" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">W3C XHTML FAQ</a>.</div> + +<div class="note"><strong>Hinweis:</strong> <code>document.write</code> in <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer">verzögert geladenen</a> oder <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async">asynchronen</a> Scripten wird ignoriert und Sie erhalten eine Nachricht ähnlich dieser in der Fehlerkonsole: "A call to <code>document.write()</code> from an asynchronously-loaded external script was ignored".</div> + +<div class="note"><strong>Hinweis </strong>(Nur Microsoft Edge): ein wiederholter Aufruf von<code>document.write</code> in einem <code><iframe></code> erzeugt den Fehler "SCRIPT70: Permission denied".</div> + +<div class="note"><strong>Hinweis </strong>(Chrome Version 55+): per <code>document.write()</code> injizierte <code><script></code>-Elemente werden bei einer 2G Verbindung nach einem HTTP Cache Miss nicht ausgeführt.</div> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75233634">DOM Level 2 HTML: <code>write()</code> Methode</a></li> + <li><a class="external" href="http://www.w3.org/TR/2011/WD-html5-author-20110705/apis-in-html-documents.html#dynamic-markup-insertion">Dynamische Markup-Einfügung in HTML</a></li> +</ul> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{ domxref("element.innerHTML") }}</li> + <li>{{ domxref("document.createElement()") }}</li> +</ul> diff --git a/files/de/web/api/document/writeln/index.html b/files/de/web/api/document/writeln/index.html new file mode 100644 index 0000000000..6581924105 --- /dev/null +++ b/files/de/web/api/document/writeln/index.html @@ -0,0 +1,60 @@ +--- +title: Document.writeln() +slug: Web/API/Document/writeln +translation_of: Web/API/Document/writeln +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>Schreibt eine Textfolge, gefolgt von einem Zeilenumbruchzeichen, in ein Dokument.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="eval notranslate">document.writeln(<em>line</em>); +</pre> + +<h3 id="Parameters" name="Parameters">Parameters</h3> + +<ul> + <li><code>line</code> ist eine Zeichenfolge welche eine Textzeile enthält.</li> +</ul> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="notranslate">document.writeln("<p>enter password:</p>"); +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p><strong>document.writeln</strong> ist dasselbe wie {{domxref("document.write")}} aber fügt einen Zeilenumbruch hinzu.</p> + +<div class="note"><strong>Note:</strong> <strong>document.writeln</strong> (like <strong>document.write</strong>) does not work in XHTML documents (you'll get a "Operation is not supported" (<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>) error on the error console). This is the case if opening a local file with a .xhtml file extension or for any document served with an application/xhtml+xml MIME type. More information is available in the <a class="external" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite" title="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">W3C XHTML FAQ</a>.</div> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Bemerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "#dom-document-writeln", "document.writeln()")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-35318390", "document.writeln()")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + + + +<p>{{Compat("api.Document.writeln")}}</p> |