From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/api/document/adoptnode/index.html | 53 +++ files/de/web/api/document/alinkcolor/index.html | 30 ++ files/de/web/api/document/body/index.html | 140 +++++++ .../de/web/api/document/createattribute/index.html | 76 ++++ .../api/document/createdocumentfragment/index.html | 137 +++++++ files/de/web/api/document/createelement/index.html | 153 ++++++++ .../de/web/api/document/createelementns/index.html | 175 +++++++++ .../de/web/api/document/createtextnode/index.html | 131 +++++++ .../web/api/document/createtreewalker/index.html | 241 ++++++++++++ files/de/web/api/document/dir/index.html | 95 +++++ files/de/web/api/document/document/index.html | 45 +++ .../de/web/api/document/documentelement/index.html | 42 +++ .../api/document/fullscreenchange_event/index.html | 87 +++++ .../de/web/api/document/getelementbyid/index.html | 131 +++++++ .../api/document/getelementsbyclassname/index.html | 105 ++++++ files/de/web/api/document/head/index.html | 73 ++++ files/de/web/api/document/importnode/index.html | 93 +++++ files/de/web/api/document/index.html | 405 +++++++++++++++++++++ files/de/web/api/document/queryselector/index.html | 129 +++++++ .../web/api/document/queryselectorall/index.html | 172 +++++++++ files/de/web/api/document/readystate/index.html | 111 ++++++ files/de/web/api/document/referrer/index.html | 46 +++ .../de/web/api/document/registerelement/index.html | 113 ++++++ files/de/web/api/document/title/index.html | 70 ++++ files/de/web/api/document/url/index.html | 19 + files/de/web/api/document/width/index.html | 45 +++ files/de/web/api/document/write/index.html | 85 +++++ files/de/web/api/document/writeln/index.html | 60 +++ 28 files changed, 3062 insertions(+) create mode 100644 files/de/web/api/document/adoptnode/index.html create mode 100644 files/de/web/api/document/alinkcolor/index.html create mode 100644 files/de/web/api/document/body/index.html create mode 100644 files/de/web/api/document/createattribute/index.html create mode 100644 files/de/web/api/document/createdocumentfragment/index.html create mode 100644 files/de/web/api/document/createelement/index.html create mode 100644 files/de/web/api/document/createelementns/index.html create mode 100644 files/de/web/api/document/createtextnode/index.html create mode 100644 files/de/web/api/document/createtreewalker/index.html create mode 100644 files/de/web/api/document/dir/index.html create mode 100644 files/de/web/api/document/document/index.html create mode 100644 files/de/web/api/document/documentelement/index.html create mode 100644 files/de/web/api/document/fullscreenchange_event/index.html create mode 100644 files/de/web/api/document/getelementbyid/index.html create mode 100644 files/de/web/api/document/getelementsbyclassname/index.html create mode 100644 files/de/web/api/document/head/index.html create mode 100644 files/de/web/api/document/importnode/index.html create mode 100644 files/de/web/api/document/index.html create mode 100644 files/de/web/api/document/queryselector/index.html create mode 100644 files/de/web/api/document/queryselectorall/index.html create mode 100644 files/de/web/api/document/readystate/index.html create mode 100644 files/de/web/api/document/referrer/index.html create mode 100644 files/de/web/api/document/registerelement/index.html create mode 100644 files/de/web/api/document/title/index.html create mode 100644 files/de/web/api/document/url/index.html create mode 100644 files/de/web/api/document/width/index.html create mode 100644 files/de/web/api/document/write/index.html create mode 100644 files/de/web/api/document/writeln/index.html (limited to 'files/de/web/api/document') 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 +--- +
{{ ApiRef("DOM") }}
+ +
 
+ +

Ü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.

+ +

Unterstützt seit Gecko 1.9 (Firefox 3)

+ +

Syntax

+ +
knoten = document.adoptNode(externerKnoten);
+
+ +
+
   knoten
+
Ist der übertragene Knoten, welcher nun dieses Dokument als sein ownerDocument hat.  Der Elternknoten (parentNode) is null, da er noch nicht in den Dokumentenbaum eingefügt wurde. Zu beachten ist, dass knoten und externerKnoten nach dem Funktionsaufruf das gleiche Objekt sind.  
+
externerKnoten
+
Ist der Knoten eines anderes Dokumentes, der übertragen werden soll.
+
+ +

Beispiel

+ +

{{todo}}

+ +

Anmerkungen

+ +

Es kann oassieren, dass der Aufruf von adoptNode fehlschlägt, wenn der Ursprungsknoten von einer anderen Implementierung kommt, was aber bei Browser-Implementierungen kein Problem darstellen sollte.

+ + +

Nodes from external documents should be cloned using document.importNode() (or adopted using document.adoptNode()) before they + can be inserted into the current document. For more on the Node.ownerDocument issues, see the + W3C DOM FAQ.

+ +

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.

+ +

Spezifikation

+ + + +

Siehe auch

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

{{APIRef("DOM")}} {{ Deprecated_header() }}

+ +

Gibt das Farbattribut eines aktiven Links im Dokumenten body wieder oder setzt es. Ein Link wird in der Zeit eines mousedown und mouseup Events als "aktiv" bezeichnet .

+ +

Syntax

+ +
color = document.alinkColor
+document.alinkColor =color
+
+ +

color ist ein String der den Namen der Farbe (z.B., "blue", "darkblue", etc.) oder  den Hexadezimalwert der Farbe(z.B., #0000FF) enthält. Die Farben samt zugehöriger Hexadezimalcodes können zum Teil hier oder auf ähnlichen Seiten eingesehen werden: https://html-color-codes.info/

+ +

Anmerkungen

+ +

Der Default Wert dieser Eigenschaft in Mozilla Firefox ist rot (#ee0000 in hexadezimal).

+ +

document.alinkColor ist laut DOM Level 2 HTML veraltet. Eine Alternative wäre der CSS Selektor {{ Cssxref(":active") }}.

+ +

Eine weitere Alternative ist document.body.aLink, obwohl diese laut HTML 4.01 ebenfalls veraltet ist und der CSS Selektor präferiert wird.

+ +

Gecko unterstützt sowohl alinkColor/:active als auch{{ Cssxref(":focus") }}. Der Internet Explorer 6 und 7 unterstützen lediglich alinkColor/:active für HTML anchor (<a>) links und verhält sich ähnlich wie :focus bei Gecko. :focus wird im IE nicht unterstützt.

+ +

Browser compatibility

+ +

{{Compat("api.Document.alinkColor")}}

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 +--- +
{{APIRef("DOM")}}
+ +

Gibt den {{HTMLElement("body")}} oder {{HTMLElement("frameset")}} Knoten des aktuellen Dokuments wieder, oder null falls keines dieser Elemente existiert.

+ +

Syntax

+ +
var objRef = document.body;
+document.body = objRef;
+ +

Beispiel

+ +
// 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"
+
+ +

Anmerkungen

+ +

document.body ist das Element, welches den Inhalt eines Dokuments enthält. In Dokumenten mit <body> Inhalt, gibt das <body> Element den Inhalt aus, in Frameset Dokumenten wiederum, wird das äußerste <frameset> Element ausgegeben.

+ +

Da body setzbar ist, wird das Setzen eines neuen Body Elements alle aktuellen Elemente des existierenden <body> Elements entfernen.

+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG','dom.html#dom-document-body','Document.body')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1','dom.html#dom-document-body','Document.body')}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C','dom.html#dom-document-body','Document.body')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('DOM2 HTML','html.html#ID-56360201','Document.body')}}{{Spec2('DOM2 HTML')}} 
{{SpecName('DOM1','level-one-html.html#attribute-body','Document.body')}}{{Spec2('DOM1')}}Initiale Definition.
+ +

Browser Kompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1{{CompatVersionUnknown}}269.6 (möglicherweise früher)4 (möglicherweise früher)
+
+ +
+

 

+ +
+
    +
  1. +

    Obwohl document.body eine sehr gute Methode ist, um das <body> Element in HTML anzusprechen, wird es von Firefox nicht unterstützt, wenn der Content-Type nicht text/html oder application/xhtml+xml ist. Eine sicherere Methode um das <body> Element anzusprechen ist es, document.getElementsByTagName("body") zu verwenden, welches einen Array mit einem einzigen Item ausgibt. Das ist übertragbar auf HTML und XHTML. Bei denen ist der Content-Type nicht im HTTP response header angegeben.

    +
    2. +
+
+ +

 

+ + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}5 (probably earlier)
+
+ +

Siehe auch

+ + 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 +--- +
{{ ApiRef("DOM") }}
+ +

createAttribute erstellt einen neuen Attributsknoten und gibt ihn zurück.

+ +

Syntax

+ +
attribute = document.createAttribute(name)
+
+ +

Parameter

+ + + +

Beispiel

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

Bemerkungen

+ +

Der Rückgabewert ist ein Knoten des Typs attribute. Sobald man diesen wie im vorangegangenen Beispiel hat, kann man ihren Wert festlegen, indem man der nodeValue property einen String zuweist, oder in der alternativen Form durch Benutzung der setAttribute() Methode. Der DOM beschränkt auf diese Art nicht, welche Arten von Attributen an das jeweilige Element zugewiesen werden dürfen.

+ +

Spezifikation

+ + + +

Siehe auch

+ + 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 +--- +
{{ApiRef("DOM")}}
+ +

Erzeugt ein neues {{domxref("DocumentFragment")}} Objekt.

+ +

Syntax

+ +
var fragment = document.createDocumentFragment();
+
+ +

fragment ist hierbei eine Referenz zu einem neu erstellten, leeren {{domxref("DocumentFragment")}} Objekt.

+ +

Beschreibung

+ +

DocumentFragments 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.

+ +

Da das gesamte DocumentFragment nur im Speicher vorliegt ("in memory") 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 reflow (die Berechnung der Element Positionen und Geometrie). Dementsprechend führt die Nutzung von DocumentFragments zu einer besseren Performance.

+ +

Beispiel

+ +

Dieses Beispiel erzeugt eine Liste gängiger Browser.

+ +

HTML

+ +
<ul id="ul">
+</ul>
+ +

JavaScript

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

Resultat

+ +

{{EmbedLiveSample("Example", 600, 140)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpecificationStatusAnmerkungen
{{SpecName('DOM WHATWG', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}{{Spec2('DOM WHATWG')}}Initiale Definition in der DOM 1 Spezifikation
+ +

Browserkompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidEdgeIE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + 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 +--- +
{{APIRef("DOM")}}
+ + + +

In einem HTML Dokument erstellt die Document.createElement() Methode ein spezifiziertes HTML Element oder ein {{domxref("HTMLUnknownElement")}} wenn der gegebene Elementname ein unbekannter ist.

+ +

Syntax

+ +
var element = document.createElement(tagName, [optionen]);
+
+ +

Parameter

+ +
+
tagName
+
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 tagName initialisiert. Benutze keine qualifizierten Namen (wie "html:a") mit dieser Methode.
+
optionen {{optional_inline}}
+
Ein optionales ElementCreationOptions-Objekt, welches eine einzige Eigenschaft namens is besitzt, deren Wert der Name des Tags für ein benutzerdefiniertes Element ist. Dieses benutzerdefinierte Element muss vorher mit customElements.define() definiert werden. Für mehr Informationen siehe {{anch("Web component example")}}.
+
+ +

Rückgabewert

+ +

Das neue Element.

+ +

Beispiele

+ +

Grundlegendes Beispiel

+ +

Dies erstellt ein neues <div> und fügt es vor dem Element mit der ID div1 ein.

+ +
+

HTML

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>||Arbeiten mit Elementen||</title>
+</head>
+<body>
+  <div id="div1">Der obere Text wurde dynamisch erstellt.</div>
+</body>
+</html>
+
+ +

JavaScript

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

{{EmbedLiveSample("Basic_example", 500, 50)}}

+ +

Web-Komponentenbeispiel 

+ +

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. 

+ +
// 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" });
+ +

Würden wir eine Instanz dieses Elements programmatisch erstellen wollen, so würden wir einen Aufruf über den folgenden Ausschnitt machen: 

+ +
let expandingList = document.createElement('ul', { is : 'expanding-list' })
+ +

Dem neuen Element wird ein is Attribut hinzugefügt, dessen Wert das Custom-Element's Tag-Name ist. 

+ +
+

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

+
+ +

Notizen

+ + + +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}{{Spec2('DOM WHATWG')}}
+ + + +

Browser-Kompatibiltät

+ +

{{Compat("api.Document.createElement")}}

+ +

Siehe auch

+ + + + 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 +--- +
{{ApiRef("DOM")}}
+ +
Erzeugt ein Element mit der angegebenen Namespace-URL und einem Namen.
+ +
 
+ +
Um ein Element zu definieren, ohne eine Namespace-URL anzugeben, verwenden Sie die Methode createElement.
+ +

Syntax

+ +
var element = document.createElementNS(namespaceURI, qualifiedName[, options]);
+
+ +

Parameter

+ +
+
namespaceURI
+
Ein String, der die mit dem Element verknüpfte Namespace-URL angibt. Die Eigenschaft namespaceURI des neu erstellten Elements wird mit dem Wert von namespaceURI initialisiert (siehe Gültige Namespace-URLs).
+
qualifiedName
+
Ein String, der den Namen des Elements angibt. Die Eigenschaft nodeName des neu erstellten Elements wird mit dem Wert von qualifiedName initialisiert.
+
optionsOptional
+
Das optionale Objekt ElementCreationOptions enthält eine einzelne Eigenschaft mit Namen  is, dessen Wert der Tag-Name eines zuvor mit customElements.define() 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. Custom Elements specification). Siehe Extending native HTML elements für weitere Informationen zur Verwendung dieses Parameters.
+
Das neue Element erhält ein Attribut mit Namen is dessen Wert den Tag-Namen des Elements enthält. Angepasste Elemente sind ein experimentelles Feature, das nich in allen Browsern verfügbar ist.
+
+ +

Rückgabewert

+ +

Das neu erstelle Element.

+ +

Gültige Namespace-URLs

+ + + +

Beispiel

+ +

Dies erstellt ein neues Element vom Typ <div> im XHTML-Namespace und fügt es dem vbox-Element hinzu. Obwohl dies kein besonders sinnvolles XUL-Document ist, demonstriert es die Verwendung von Elementen verschiedener Namespaces innerhalb eines Dokuments:

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

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.

+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezigikationStatusKpmmentar
{{SpecName('DOM WHATWG', "#dom-document-createelementns", "Document.createElement")}}{{Spec2('DOM WHATWG')}} 
+ +

Browser-Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
options argument{{CompatVersionUnknown}}[1]{{CompatNo}}{{CompatGeckoDesktop(50)}}[2][3]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[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

+ +

[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  options ein Objekt sein.

+ +

[3] Um in Firefox mit angepassten Elementen zu experimentieren müssen die Einstellungen  dom.webcomponents.enabled und dom.webcomponents.customelements.enabled auf true gesetzt werden.

+ +

Siehe auch

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

Erzeugt einen Textknoten.

+ +

Syntax

+ +
var text = document.createTextNode(data);
+
+ + + +

Example

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

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpecifikationStatusKommentar
{{SpecName("DOM3 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}{{Spec2("DOM3 Core")}}Keine Änderung
{{SpecName("DOM2 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}{{Spec2("DOM2 Core")}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
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 +--- +
{{ApiRef("Document")}}
+ +

Die Methode Document.createTreeWalker() erzeugt ein neues {{domxref("TreeWalker")}} Objekt und gibt dieses zurück.

+ +

Syntax

+ +
treeWalker = document.createTreeWalker(wurzel, anzeigeFilter, filter, entityReferenceExpansion);
+
+ +

Parameter

+ +
+
wurzel
+
Ist der Ursprungs- oder Wurzelknoten {{domxref("Node")}} des {{domxref("TreeWalker")}}-Durchlaufens. Normalerweise ist dies ein Element, das zum Dokument gehört.
+ +
anzeigeFilter {{optional_inline}}
+
Optionale unsigned longBitmaske, erstellt durch bitweise ODER-Verknüpfung der Konstanten von NodeFilter. Erlaubt eine bequeme Filterung auf bestimmte Knotentypen. Der Standardwert ist 0xFFFFFFFF, auch repräsentiert durch die SHOW_ALL-Konstante. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Konstantenumerischer WertBeschreibung
NodeFilter.SHOW_ALL-1 (Maximalwert von unsigned long)Zeigt alle Knoten.
NodeFilter.SHOW_ATTRIBUTE {{deprecated_inline}}2Zeigt 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.
NodeFilter.SHOW_CDATA_SECTION {{deprecated_inline}}8Zeigt {{domxref("CDATASection")}}-Knoten.
NodeFilter.SHOW_COMMENT128Zeigt {{domxref("Comment")}}-Knoten.
NodeFilter.SHOW_DOCUMENT256Zeigt {{domxref("Document")}}-Knoten.
NodeFilter.SHOW_DOCUMENT_FRAGMENT1024Zeigt {{domxref("DocumentFragment")}}-Knoten.
NodeFilter.SHOW_DOCUMENT_TYPE512Zeigt {{domxref("DocumentType")}}-Knoten.
NodeFilter.SHOW_ELEMENT1Zeigt {{domxref("Element")}}-Knoten.
NodeFilter.SHOW_ENTITY {{deprecated_inline}}32Zeigt {{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.
NodeFilter.SHOW_ENTITY_REFERENCE {{deprecated_inline}}16Shows {{domxref("EntityReference")}} nodes.
NodeFilter.SHOW_NOTATION {{deprecated_inline}}2048Zeigt {{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.
NodeFilter.SHOW_PROCESSING_INSTRUCTION64Zeigt {{domxref("ProcessingInstruction")}}-Knoten.
NodeFilter.SHOW_TEXT4Zeigt {{domxref("Text")}}-Knoten.
+
+ +
filter {{optional_inline}}
+
Ein optionaler {{domxref("NodeFilter")}}. Muss ein ein Objekt mit einer Methode namens acceptNode sein, die vom {{domxref("TreeWalker")}} aufgerufen wird. Diese Methode entscheidet, ob ein übergebener Knoten, der schon von anzeigeFilter durchgelassen wurde, ausgegeben wird oder nicht.
+ +
entityReferenceExpansion {{optional_inline}} {{obsolete_inline}}
+
Optionaler {{domxref("Boolean")}}-Schalter. Entscheidet, ob der Teilbaum unter einer {{domxref("EntityReference")}} ausgelassen werden soll, wenn das Element ausgelassen wird.
+
+ +

Beispiel

+ +

Das folgende Beispiel läuft über alle Knoten im body, filtert die Menge auf Elementknoten und gibt im filter jeden Knoten als durchlässig an (die Filterung auf die Elementknoten hätte auch in der acceptNode()-Methode erfolgen können). +Mithilfe des treeWalker werden alle durchgelassenen Knoten in ein Array gesammelt.

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

Spezfikationen

+ + + + + + + + + + + + + + + + + + + +
SpezfikationStatusBemerkung
{{SpecName('DOM WHATWG', '#dom-document-createtreewalker', 'Document.createTreeWalker')}}{{Spec2('DOM WHATWG')}}expandEntityReferences-Parameter wurde entfernt. whatToShow- und filter-Parameter wurden als optional markiert.
{{SpecName('DOM2 Traversal_Range', 'traversal.html#NodeIteratorFactory-createTreeWalker', 'Document.createTreeWalker')}}{{Spec2('DOM2 Traversal_Range')}}Initiale Definition
+ +

Browser-Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
grundsätzliche Unterstützung1.0{{CompatGeckoDesktop("1.8.1")}}9.09.03.0
whatToShow und filter optional1.0{{CompatGeckoDesktop("12")}}{{CompatNo}}{{CompatVersionUnknown}}3.0
expandEntityReferences1.0{{CompatGeckoDesktop("1.8.1")}}
+ In {{CompatGeckoDesktop("12")}} entfernt.		9.09.03.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
grundsätzliche Unterstützung{{CompatVersionUnknown}}{{CompatGeckoMobile("1.8.1")}}{{CompatVersionUnknown}}9.03.0
whatToShow und filter optional{{CompatVersionUnknown}}{{CompatGeckoDesktop("12")}}{{CompatNo}}{{CompatVersionUnknown}}3.0
expandEntityReferences{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8.1")}}
+ In {{CompatGeckoDesktop("12")}} entfernt		{{CompatVersionUnknown}}9.03.0
+
+ +

Siehe auch

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

{{ApiRef("")}}

+ +

Die Document.dir 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 'rtl' rechts nach links, und 'ltr', links nach rechts.

+ +

Syntax

+ +
dirStr = document.dir;
+document.dir = dirStr;
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationenStatusKommentar
{{SpecName("HTML WHATWG", "dom.html#the-dir-attribute:dom-dir", "Document.dir")}}{{Spec2("HTML WHATWG")}}Initiale Spezifikation
+ +

Browserkompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basis Unterstützung{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}} [1]{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basis Unterstützung{{ CompatUnknown() }}{{CompatVersionUnknown}}{{CompatVersionUnknown}} [1]{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] Vor Firefox 23, hat die Document.dir Eigenschaft "ltr" wiedergegeben. unabhängig der Einstellung von dem dir-Attribut im Haupt-Element (root) {{htmlelement("html")}}. Und wenn eine Richtung im <html> gesetzt war, hatte die Veränderung der Sichtbarkeit keinen Effekt (obwohl der spätere Abruf des Document.dir wird behaupten, dass die Direktionalität geändert wurde). Wenn ein solches Attribut nicht im <html> gesetzt ist und die Eigenschaft geändert wurde, werden beide sichtbaren direktionale geändert und die document.dir  Eigenschaft wird die Änderung korrekt wiedergeben.

+ +

Siehe auch

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

Die Document Methode erstellt ein neues {{domxref("Document")}} Objekt das als Webseite im Browser geladen werden kann und bietet Möglichkeiten auf diese Inhalte zuzugreifen.

+ +

Konstruktor

+ +
new Document();
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG','#dom-document-document','Document')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

Browser-Kompatibilität

+ + + +
{{Compat("api.Document.Document")}}
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 +--- +

{{ApiRef}}

+ +

Zusammenfassung

+ +

Lesbar, nicht schreibbar

+ +

Gibt das Element zurück, das die Wurzel des document ist (zum Beispiel, das <html> Element für HTML Dokumente).

+ +

Syntax

+ +
var element = document.documentElement;
+
+ +

Beispiel

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

Beobachtungen

+ +

Dieses Objekt ist lesbar aber nicht schreibbar. Es ist praktisch um auf die Wurzel eines beliebigen Dokumentes zuzugreifen.

+ +

HTML Dokumente enthalten typischerweise ein einziges Tochter-Element, <html>, manchmal mit einem DOCTYPE. XML-Doumente enthalten oft mehrere Tochter-Elemente, einen DOCTYPE und Verarbeitungshinweise.

+ +

Deswegen sollte document.documentElement statt {{Domxref("document.firstElementChild")}} benutzt werden, um auf das Wurzel-Element zuzugreifen.

+ +

Spezifikation

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

Das onfullscreenchange Event wird gesendet, wenn der Browser den Vollbildmodus startet oder beendet.

+ +

Allgemeine Information

+ +
+
Speifikation
+
Fullscreen
+
Schnittstelle
+
Event
+
Blubbert
+
Ja
+
Abbrechbar
+
Nein
+
Ziel
+
Dokument
+
Standardaktion
+
Keine
+
+ +

Eigenschaften

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
+ +

Beispiel

+ +
// 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;
+    }
+
+});
+ +

Verwandte Events

+ + + +

Siehe auch

+ + 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 +--- +
{{ ApiRef("DOM") }}
+ +
 
+ +
Gibt eine Referenz zu einem Element anhand seiner ID zurück.
+ +
 
+ +

Syntax

+ +
element = document.getElementById(id);
+
+ +

Parameter

+ + + +

Beispiel

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

Anmerkungen

+ +

Neue Benutzer sollten beachten, dass die Groß- und Kleinschreibung bei "Id" im Namen der Methode korrekt sein muss, damit der Code funktioniert - 'getElementByID' funktioniert nicht, auch wenn es richtig zu sein scheint.

+ +

Wenn kein Element mit der angegebenen id existiert, gibt die Funktion null zurück. Beachte, dass der ID-Parameter auf Groß- und Kleinschreibung achtet. Daraus folgt, dass document.getElementById("Main") anstatt des Elements <div id="main"> null zurückgibt, weil "M" und "m" für den Zweck der Methode unterschiedlich sind.

+ +

Elemente die sich nicht im Dokument befinden werden nicht von getElementById gesucht. Wenn man ein Element erstellt und ihm eine ID zuweist, so muss man das Element mit insertBefore oder einer ähnlichen Methode in den Dokumentenbaum einfügen, bevor man darauf mit getElementById zugreifen kann.

+ +
var element = document.createElement("div");
+element.id = 'testqq';
+var el = document.getElementById('testqq'); // el wird null!
+
+ +

Nicht-HTML-Dokumente. 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 id-Attribut ist in gebräuchlichen Fällen wie bei XHTML, XUL und anderen als ID-Typ definiert. Implementierungen, die nicht wissen, ob ein Attribut vom Typ ID ist oder nicht geben erwartungsgemäß null zurück.

+ +

Browserkompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop(1.0) }}5.57.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile(1.0) }}6.06.01.0
+
+ +

Spezifikation

+ +

getElementById wurde in DOM Level 1 für HTML Dokumente eingeführt und in DOM Level 2 zu allen Dokumenten verschoben. 

+ + + +

Siehe auch

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

{{APIRef("DOM")}}

+ +

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.

+ +

Syntax

+ +
var elements = document.getElementsByClassName(names); // oder:
+var elements = rootElement.getElementsByClassName(names);
+ + + +

Beispiele

+ +

Alle Elemente der Klasse 'test' holen:

+ +
document.getElementsByClassName('test');
+ +

Alle Elemente die sowohl die Klassen 'red' und 'test' verwenden selektieren:

+ +
document.getElementsByClassName('red test');
+ +

Alle Elemente der Klasse 'test' die innerhalb eines Elements mit der ID 'main' selektieren:

+ +
document.getElementById('main').getElementsByClassName('test');
+ +

Man kann auch Methoden von Array.prototype auf {{ domxref("HTMLCollection") }} anwenden, in dem die HTMLCollection  in dem sie an die this Werte der Methoden übergeben wird. Hier finden wir alle div-Elemente der Klasse 'test':

+ +
var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+    return testElement.nodeName === 'DIV';
+});
+ +

Browserkompabilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}3.09.0{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Spezifikation

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

{{APIRef("DOM")}}

+ +

Gibt das {{HTMLElement("head")}} Element des aktuellen Dokuments aus. Ist mehr als ein <head>  Element vorhanden, wird das erste Element ausgegeben.

+ +

Syntax

+ +
var objRef = document.head;
+
+ +

Beispiel

+ +
// in HTML: <head id="my-document-head">
+var aHead = document.head;
+
+alert(aHead.id); // "my-document-head";
+
+alert( document.head === document.querySelector("head") ); // true
+
+ +

Anmerkungen

+ +

document.head ist nur lesbar. Der Versuch dieser Eigenschaft einen Wert zu zuweisen, wird ohne Ausgabe einer Fehlermeldung fehlschlagen, oder, bei verwendetem
+ ECMAScript Strict Mode in einem Gecko Browser, mit einem TypeError quittiert.

+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML WHATWG')}}Initiale Definition.
{{SpecName('HTML5.1','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML5 W3C')}} 
+ +

Browser Kompatibilität

+ +

 

+ + + +

{{Compat("api.Document.head")}}

+ +

 

+ +

Siehe auch

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

Die {{domxref("Document")}}-Methode importNode() 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.  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.

+ +

Syntax

+ +
var knoten = document.importNode(externerKnoten, deep);
+
+ +
+
externerKnoten
+
Der neue Knoten oder das neue Dokumenten-Fragment, welches in das aktuelle Dokument importiert werden soll. Nach dem Import ist der Elternknoten null, da der neue Knoten noch nicht in den Dokumentenbaum eingefügt wurde.
+
deep
+
Ein boolscher Wert der anzeigt, ob der komplette Unterbaum vonexternalNode importiert werden soll. Ist dieser Parameter true, werden externalNode so wie all seine Nachfahren kopiert; Ist er false, wird nur der einzelne Knoten, externalNode, importiert.
+
+ +
+

In der DOM4-Spezifikation, ist deep als optionales Argument angeführt. Wird es weggelassen, verhält sich die Methode als ob der Wert von deeptrue wäre, was zu standardmäßigen tiefen Kopieren führt. Um flach zu kopieren, muss deep explizit auf false gesetzt werden.

+ +

Dieses Verhalten wurde in der letzten Spezifikation geändert, der Wert von deep wird bei Weglassen auf false gesetzt. Obwohl es immer noch optional ist, empfehlen wir für Vorwärts- und Rückwärtskompatibilität das deep-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.

+
+ +

Beispiel

+ +
var iframe = document.getElementsByTagName("iframe")[0];
+var oldNode = iframe.contentWindow.document.getElementById("myNode");
+var newNode = document.importNode(oldNode, true);
+document.getElementById("container").appendChild(newNode);
+
+ +

Anmerkungen

+ +

Der Originalknoten wird nicht aus dem Ursprungsdokument entfernt. Der importierte Knoten ist des Weiteren eine Kopie des ursprünglichen.

+ +

 

+ +

Nodes from external documents should be cloned using document.importNode() (or adopted using document.adoptNode()) before they can be inserted into the current document. For more on the Node.ownerDocument issues, see the W3C DOM FAQ.

+ +

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.

+ +

 

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpezifikationenStatusKommentar
{{SpecName("DOM WHATWG", "#dom-document-importnode", "document.importNode()")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM2 Core", "core.html#Core-Document-importNode", "document.importNode()")}}{{Spec2("DOM2 Core")}}Ursprüngliche Definition
+ +

Browserkompatibilität

+ +
+ + +

{{Compat("api.Document.importNode")}}

+
+ +

Siehe auch

+ + 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 +--- +
{{ ApiRef("DOM") }}
+ +
+ +

Zusammenfassung

+ +

Jede im Browswer geladene Webseite hat ihr eigenen document Objekt.  Das Document Interface dient als Einstiegspunkt in den Inhalt der Webseite (der DOM tree, 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).

+ +

Ein Dokument-Objekt kann von verschiedenen APIs bezogen werden:

+ + + +

Depending on the kind of the document (e.g. HTML or XML), different APIs may be available on the document object.

+ + + +

In der Zukunft, alle diese Interfaces werden zusammengefasst zum Document Interface.

+ +

Eigenschaften

+ +
+

Hinweis: Das Document Interface erbt auch vom {{domxref("Node")}} und {{domxref("EventTarget")}} Interface.

+
+ +
+
{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}
+
Provides access to all elements with an id. This is a legacy non-standard interface, you should use the {{domxref("Document.getElementById()")}} method instead.
+
{{domxref("Document.async")}} {{Deprecated_inline}}
+
Used with {{domxref("document.load")}} to indicate an asynchronous request.
+
{{domxref("Document.characterSet")}} {{experimental_inline}}
+
Returns the character set being used by the document.
+
{{domxref("Document.compatMode")}} {{experimental_inline}}
+
Indicates whether the document is rendered in Quirks or Strict mode.
+
{{domxref("Document.contentType")}} {{experimental_inline}}
+
Returns the Content-Type from the MIME Header of the current document.
+
{{domxref("Document.doctype")}}
+
Returns the Document Type Definition (DTD) of the current document.
+
{{domxref("Document.documentElement")}}
+
Returns the Element that is a direct child of the document. For HTML documents, this is normally the HTML element.
+
{{domxref("Document.documentURI")}}
+
Returns the document URL.
+
{{domxref("Document.domConfig")}} {{Deprecated_inline}}
+
Should return a {{domxref("DOMConfiguration")}} object.
+
{{domxref("Document.implementation")}}
+
Returns the DOM implementation associated with the current document.
+
{{domxref("Document.inputEncoding")}} {{Deprecated_inline}}
+
Returns the encoding used when the document was parsed.
+
{{domxref("Document.lastStyleSheetSet")}}
+
Returns the name of the style sheet set that was last enabled. Has the value null until the style sheet is changed by setting the value of {{domxref("Document.selectedStyleSheetSet","selectedStyleSheetSet")}}.
+
{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}
+
true if this document is synthetic, such as a standalone image, video, audio file, or the like.
+
{{domxref("Document.mozFullScreen")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
+
true when the document is in {{domxref("Using_full-screen_mode","full-screen mode")}}.
+
{{domxref("Document.mozFullScreenElement")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
+
The element that's currently in full screen mode for this document.
+
{{domxref("Document.mozFullScreenEnabled")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
+
true if calling {{domxref("element.mozRequestFullscreen()")}} would succeed in the curent document.
+
{{domxref("Document.pointerLockElement")}} {{experimental_inline}}
+
Returns the element set as the target for mouse events while the pointer is locked. null if lock is pending, pointer is unlocked, or if the target is in another document.
+
{{domxref("Document.preferredStyleSheetSet")}}
+
Returns the preferred style sheet set as specified by the page author.
+
{{domxref("Document.selectedStyleSheetSet")}}
+
Returns which style sheet set is currently in use.
+
{{domxref("Document.styleSheets")}}
+
Returns a list of the style sheet objects on the current document.
+
{{domxref("Document.styleSheetSets")}}
+
Returns a list of the style sheet sets available on the document.
+
{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}
+
Returns the encoding as determined by the XML declaration.
+
{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}
+
Returns true if the XML declaration specifies the document to be standalone (e.g., An external part of the DTD affects the document's content), else false.
+
{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}
+
Returns the version number as specified in the XML declaration or "1.0" if the declaration is absent.
+
+ +

The Document interface is extended with the {{domxref("ParentNode")}} interface:

+ +

{{page("/en-US/docs/Web/API/ParentNode","Properties")}}

+ +

Erweiterung für HTML Dokumente

+ +

Das Document Interface für HTML Dokumente erbt vom {{domxref("HTMLDocument")}} Interface oder, ist seit HTML5 erweitert für solche Dokumente:

+ +
+
{{domxref("Document.activeElement")}}
+
Returns the currently focused element.
+
{{domxref("Document.alinkColor")}} {{Deprecated_inline}}
+
Returns or sets the color of active links in the document body.
+
{{domxref("Document.anchors")}}
+
Returns a list of all of the anchors in the document.
+
{{domxref("Document.applets")}} {{Deprecated_inline}}
+
Returns an ordered list of the applets within a document.
+
{{domxref("Document.bgColor")}} {{Deprecated_inline}}
+
Gets/sets the background color of the current document.
+
{{domxref("Document.body")}}
+
Returns the {{HTMLElement("body")}} element of the current document.
+
{{domxref("Document.cookie")}}
+
Returns a semicolon-separated list of the cookies for that document or sets a single cookie.
+
{{domxref("Document.defaultView")}}
+
Returns a reference to the window object.
+
{{domxref("Document.designMode")}}
+
Gets/sets the ability to edit the whole document.
+
{{domxref("Document.dir")}}
+
Gets/sets directionality (rtl/ltr) of the document.
+
{{domxref("Document.domain")}}
+
Returns the domain of the current document.
+
{{domxref("Document.embeds")}}
+
Returns a list of the embedded {{HTMLElement('embed')}} elements within the current document.
+
{{domxref("Document.fgColor")}} {{Deprecated_inline}}
+
Gets/sets the foreground color, or text color, of the current document.
+
{{domxref("Document.forms")}}
+
Returns a list of the {{HTMLElement("form")}} elements within the current document.
+
{{domxref("Document.head")}}
+
Returns the {{HTMLElement("head")}} element of the current document.
+
{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}
+
Gets/sets the height of the current document.
+
{{domxref("Document.images")}}
+
Returns a list of the images in the current document.
+
{{domxref("Document.lastModified")}}
+
Returns the date on which the document was last modified.
+
{{domxref("Document.linkColor")}} {{Deprecated_inline}}
+
Gets/sets the color of hyperlinks in the document.
+
{{domxref("Document.links")}}
+
Returns a list of all the hyperlinks in the document.
+
{{domxref("Document.location")}}
+
Returns the URI of the current document.
+
{{domxref("Document.plugins")}}
+
Returns a list of the available plugins.
+
{{domxref("Document.readyState")}} {{gecko_minversion_inline("1.9.2")}}
+
Returns loading status of the document.
+
{{domxref("Document.referrer")}}
+
Returns the URI of the page that linked to this page.
+
{{domxref("Document.scripts")}}
+
Returns all the {{HTMLElement("script")}} elements on the document.
+
{{domxref("Document.title")}}
+
Returns the title of the current document.
+
{{domxref("Document.URL")}}
+
Returns a string containing the URL of the current document.
+
{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}
+
Gets/sets the color of visited hyperlinks.
+
{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}
+
Returns the width of the current document.
+
+ +

Event handlers

+ +
+
{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}
+
Returns the event handling code for the {{event("pointerlockchange")}} event.
+
{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}
+
Returns the event handling code for the {{event("pointerlockerror")}} event.
+
{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}
+
Returns the event handling code for the readystatechange event.
+
+ +

Methoden

+ +
+

Hinweis: Das Document Interface erbt auch vom {{domxref("Node")}} und {{domxref("EventTarget")}} Interface.

+
+ +
+
{{domxref("Document.adoptNode","Document.adoptNode(Node node)")}}
+
Adopt node from an external document.
+
{{domxref("Document.captureEvents","Document.captureEvents(String eventName)")}} {{Deprecated_inline}}
+
See {{domxref("window.captureEvents")}}.
+
{{domxref("Document.caretPositionFromPoint","Document.caretPositionFromPoint(Number x, Number y)")}}
+
Gets a {{domxref("CaretPosition")}} based on two coordinates.
+
{{domxref("Document.createAttribute","Document.createAttribute(String name)")}}
+
Creates a new {{domxref("Attr")}} object and returns it.
+
{{domxref("Document.createAttributeNS","Document.createAttributeNS(String namespace, String name)")}}
+
Creates a new attribute node in a given namespace and returns it.
+
{{domxref("Document.createCDATASection","Document.createCDATASection(String data)")}}
+
Creates a new CDATA node and returns it.
+
{{domxref("Document.createComment","Document.createComment(String comment)")}}
+
Creates a new comment node and returns it.
+
{{domxref("Document.createDocumentFragment()")}}
+
Creates a new document fragment.
+
{{domxref("Document.createElement","Document.createElement(String name)")}}
+
Creates a new element with the given tag name.
+
{{domxref("Document.createElementNS","Document.createElementNS(String namespace, String name)")}}
+
Creates a new element with the given tag name and namespace URI.
+
{{domxref("Document.createEntityReference","Document.createEntityReference(String name)")}} {{obsolete_inline}}
+
Creates a new entity reference object and returns it.
+
{{domxref("Document.createEvent","Document.createEvent(String interface)")}}
+
Creates an event object.
+
{{domxref("Document.createNodeIterator","Document.createNodeIterator(Node root[, Number whatToShow[, NodeFilter filter]])")}}
+
Creates a {{domxref("NodeIterator")}} object.
+
{{domxref("Document.createProcessingInstruction","Document.createProcessingInstruction(String target, String data)")}}
+
Creates a new {{domxref("ProcessingInstruction")}} object.
+
{{domxref("Document.createRange()")}}
+
Creates a {{domxref("Range")}} object.
+
{{domxref("Document.createTextNode","Document.createTextNode(String text)")}}
+
Creates a text node.
+
{{domxref("Document.createTreeWalker","Document.createTreeWalker(Node root[, Number whatToShow[, NodeFilter filter]])")}}
+
Creates a {{domxref("TreeWalker")}} object.
+
{{domxref("Document.elementFromPoint","Document.elementFromPoint(Number x, Number y)")}}
+
Returns the element visible at the specified coordinates.
+
{{domxref("Document.enableStyleSheetsForSet","Document.enableStyleSheetsForSet(String name)")}}
+
Enables the style sheets for the specified style sheet set.
+
{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}
+
Release the pointer lock.
+
{{domxref("Document.getElementsByClassName","Document.getElementsByClassName(String className)")}}
+
Returns a list of elements with the given class name.
+
{{domxref("Document.getElementsByTagName","Document.getElementsByTagName(String tagName)")}}
+
Returns a list of elements with the given tag name.
+
{{domxref("Document.getElementsByTagNameNS","Document.getElementsByTagNameNS(String namespace, String tagName)")}}
+
Returns a list of elements with the given tag name and namespace.
+
{{domxref("Document.importNode","Document.importNode(Node node, Boolean deep)")}}
+
Returns a clone of a node from an external document.
+
{{domxref("document.mozSetImageElement")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
+
Allows you to change the element being used as the background image for a specified element ID.
+
{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}
+
Replaces entities, normalizes text nodes, etc.
+
{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
+
Releases the current mouse capture if it's on an element in this document.
+
{{domxref("Document.releaseEvents")}} {{non-standard_inline}} {{Deprecated_inline}}
+
See {{domxref("window.releaseEvents")}}.
+
{{domxref("document.routeEvent")}} {{non-standard_inline}} {{obsolete_inline(24)}}
+
See {{domxref("window.routeEvent")}}.
+
+ +

The Document interface is extended with the {{domxref("ParentNode")}} interface:

+ +
+
{{domxref("Document.getElementById","Document.getElementById(String id)")}}
+
Returns an object reference to the identified element.
+
{{domxref("Document.querySelector","Document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}
+
Returns the first Element node within the document, in document order, that matches the specified selectors.
+
{{domxref("Document.querySelectorAll","Document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}
+
Returns a list of all the Element nodes within the document that match the specified selectors.
+
+ +

The Document interface is extended with the {{domxref("XPathEvaluator")}} interface:

+ +
+
{{domxref("Document.createExpression","Document.createExpression(String expression, XPathNSResolver resolver)")}}
+
Compiles an XPathExpression which can then be used for (repeated) evaluations.
+
{{domxref("Document.createNSResolver","Document.createNSResolver(Node resolver)")}}
+
Creates an {{domxref("XPathNSResolver")}} object.
+
{{domxref("Document.evaluate","Document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}
+
Evaluates an XPath expression.
+
+ +

Erweiterung für HTML Dokumente

+ +

Das Document Interface für HTML Dokumente erbt vom {{domxref("HTMLDocument")}} Interface oder ist seit HTML5 erweitert für solche Dokumente:

+ +
+
{{domxref("Document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}
+
In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.
+
{{domxref("Document.close()")}}
+
Closes a document stream for writing.
+
{{domxref("Document.execCommand","Document.execCommand(String command[, Boolean showUI[, String value]])")}}
+
On an editable document, executes a formating command.
+
{{domxref("Document.getElementsByName","Document.getElementsByName(String name)")}}
+
Returns a list of elements with the given name.
+
{{domxref("Document.getSelection()")}}
+
Returns a {{domxref("Selection")}} object related to text selected in the document.
+
{{domxref("Document.hasFocus()")}}
+
Returns true if the focus is currently located anywhere inside the specified document.
+
{{domxref("Document.open()")}}
+
Opens a document stream for writing.
+
{{domxref("Document.queryCommandEnabled","Document.queryCommandEnabled(String command)")}}
+
Returns true if the formating command can be executed on the current range.
+
{{domxref("Document.queryCommandIndeterm","Document.queryCommandIndeterm(String command)")}}
+
Returns true if the formating command is in an indeterminate state on the current range.
+
{{domxref("Document.queryCommandState","Document.queryCommandState(String command)")}}
+
Returns true if the formating command has been executed on the current range.
+
{{domxref("Document.queryCommandSupported","Document.queryCommandSupported(String command)")}}
+
Returns true if the formating command is supported on the current range.
+
{{domxref("Document.queryCommandValue","Document.queryCommandValue(String command)")}}
+
Returns the current value of the current range for a formatting command.
+
{{domxref("Document.registerElement","Document.registerElement(String tagname[, Object options])")}}
+
Registers a new custom element in the browser and returns a constructor for the new element.
+
{{domxref("Document.write","Document.write(String text)")}}
+
Writes text in a document.
+
{{domxref("Document.writeln","Document.writeln(String text)")}}
+
Writes a line of text in a document.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('DOM1','#i-Document','Document')}}{{Spec2('DOM1')}}Initial definition for the interface
{{SpecName('DOM2 Core','#i-Document','Document')}}{{Spec2('DOM2 Core')}}Supersede DOM 1
{{SpecName('DOM3 Core','#i-Document','Document')}}{{Spec2('DOM3 Core')}}Supersede DOM 2
{{SpecName('DOM WHATWG','#interface-document','Document')}}{{Spec2('DOM WHATWG')}}Intend to supersede DOM 3
{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}{{Spec2('HTML WHATWG')}}Turn the {{domxref("HTMLDocument")}} interface into a Document extension.
{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}{{Spec2('DOM3 XPath')}}Define the {{domxref("XPathEvaluator")}} interface which extend Document.
{{SpecName('HTML Editing','#dom-document-getselection','Document')}}{{Spec2('HTML Editing')}}Extend the Document interface
{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}{{Spec2('CSSOM View')}}Extend the Document interface
{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}{{Spec2('CSSOM')}}Extend the Document interface
{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}{{Spec2('Pointer Lock')}}Extend the Document interface
+ +

Browser Kompatibilität

+ +

Firefox Hinweise

+ +

Mozilla defines a set of non-standard properties made only for XUL content:

+ +
+
{{domxref("document.currentScript")}} {{gecko_minversion_inline("2.0")}}
+
Returns the {{HTMLElement("script")}} element that is currently executing.
+
{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}
+
(Mozilla add-ons only!) Returns the {{Interface("nsIURI")}} object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).
+
{{domxref("document.popupNode")}}
+
Returns the node upon which a popup was invoked.
+
{{domxref("document.tooltipNode")}}
+
Returns the node which is the target of the current tooltip.
+
+ +

Mozilla also define some non-standard methods:

+ +
+
{{domxref("Document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}
+
This method never did anything and always threw an exception, so it was removed in Gecko 14.0 {{geckoRelease("14.0")}}.
+
{{domxref("Document.getBoxObjectFor")}} {{obsolete_inline}}
+
Use the {{domxref("Element.getBoundingClientRect()")}} method instead.
+
{{domxref("Document.loadOverlay")}} {{Fx_minversion_inline("1.5")}}
+
Loads a XUL overlay dynamically. This only works in XUL documents.
+
{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}
+
This method never did anything but throw an exception, and was removed in Gecko 14.0 {{geckoRelease("14.0")}}.
+
+ +

Internet Explorer Hinweise

+ +

Microsoft defines some non-standard properties:

+ +
+
{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}
+
Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See MSDN.
+
Internet Explorer does not support all methods from the Node interface in the Document interface:
+
+ +
+
{{domxref("document.contains")}}
+
As a work-around, document.body.contains() can be used.
+
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 +--- +
{{ApiRef("DOM")}}
+ +

Die Methode querySelector() 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 null zurückgegeben.

+ +
+

Hinweis: Der Abgleich erfolgt indem sämtliche Knoten des Dokuments und deren Unterknoten der Reihe nach mittels Tiefensuche in Hauptreihenfolge (depth-first pre-order) durchlaufen werden.

+
+ +

Syntax

+ +
element = document.querySelector(selectors);
+
+ +

Parameter

+ +
+
selectors
+
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 SYNTAX_ERR Exception ausgelöst. Weitere Informationen zu Selektoren und deren Verwaltung finden Sie unter DOM Elemente mittels Selektoren ermitteln.
+
+ +
+

Hinweis: 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")}}.

+
+ +

Rückgabewert

+ +

Ein {{domxref("Element")}}-Objekt, das das erste Element des Dokuments darstellt, das der angegebenen Gruppe von CSS-Selektoren entspricht, oder null, wenn keine Übereinstimmungen vorhanden sind.

+ +

Wenn Sie eine Liste aller Elemente benötigen, die mit den angegebenen Selektoren übereinstimmen, verwenden Sie stattdessen {{domxref("document.querySelectorAll()", "querySelectorAll()")}}.

+ +

Exceptions

+ +
+
SYNTAX_ERR
+
Die Syntax der angegebenen Selektoren ist ungültig.
+
+ +

Nutzungshinweise

+ +

Wenn der angegebene Selektor mit einer ID übereinstimmt, die im Dokument fälschlicherweise mehrmals vorkommt, wird das erste Element mit dieser ID zurückgegeben.

+ +

CSS-Pseudoelemente geben niemals Elemente zurück, wie in der Selektoren-API angegeben.

+ +

Sonderzeichen maskieren

+ +

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 ("\") maskieren. Da der Backslash selbst ebenfalls ein Maskierungszeichen in JavaScript ist, müssen Sie ihn bei der Eingabe eines Stringliterals zweimal maskieren (einmal für den JavaScript String und einmal für querySelector()):

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

Beispiele

+ +

Erstes Element ermitteln, das mit einer Klasse übereinstimmt

+ +

In diesem Beispiel wird das erste Element im Dokument mit der Klasse "myclass" zurückgegeben:

+ +
var el = document.querySelector(".myclass");
+
+ +

Ein komplexerer Selektor

+ +

Selektoren können auch sehr mächtig sein, wie das folgende Beispiel zeigt. Hier wird das erste {{HTMLElement("input")}}-Element mit dem Namen "login" (<input name="login"/>) innerhalb eines {{HTMLElement("div")}}, dessen Klasse "user-panel main" ist (<div class="user-panel main">), im Dokument zurückgegeben:

+ +
var el = document.querySelector("div.user-panel.main input[name='login']");
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 2")}} 
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Initiale Definition
+ +

Browserkompatibilität

+ + + +
{{Compat("api.Document.querySelector")}}
+ +

Siehe auch

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

Die Methode querySelectorAll() 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.

+ +
+

Hinweis: Diese Methode wird basierend auf dem Mixin der Methode {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} von {{domxref("ParentNode")}} implementiert.

+
+ +

Syntax

+ +
elementList = parentNode.querySelectorAll(selectors);
+
+ +

Parameter

+ +
+
selectors
+
Ein {{domxref("DOMString")}} der einen oder mehrere Selektoren zum Abgleich enthält. Dieser String muss ein valider CSS-Selektor-String sein, andernfalls wird eine SyntaxError Exception ausgelöst. Weitere Informationen zu Selektoren und deren Verwaltung finden Sie unter DOM Elemente mittels Selektoren ermitteln. Es können mehrere durch Kommata getrennte Selektoren angegeben werden.
+
+ +
+

Hinweis: 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")}}.

+
+ +

Rückgabewert

+ +

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.

+ +
+

Hinweis: Wenn selectors ein CSS Pseudo-Element enthält ist die zurückgegebene Liste immer leer.

+
+ +

Exceptions

+ +
+
SyntaxError
+
Die Syntax des selectors-String ist ungültig.
+
+ +

Beispiele

+ +

Eine Liste von Übereinstimmungen erhalten

+ +

Um eine {{domxref("NodeList")}} aller {{HTMLElement("p")}}-Elemente des Dokuments zu erhalten:

+ +
var matches = document.querySelectorAll("p");
+ +

Das folgende Beispiel gibt eine Liste aller {{HTMLElement("div")}}-Elemente innerhalb des Dokuments zurück, deren Klasse entweder "note" oder "alert" ist:

+ +
var matches = document.querySelectorAll("div.note, div.alert");
+
+ +

Hier erhalten wir eine Liste von <p>-Elementen, deren unmittelbares übergeordnetes Element ein {{HTMLElement("div")}} mit der Klasse "highlighted" ist und die sich in einem Container befinden, dessen ID "test" ist.

+ +
var container = document.querySelector("#test");
+var matches = container.querySelectorAll("div.highlighted > p");
+ +

Das folgende Beispiel nutzt einen Attribut-Selektor, um eine Liste von {{HTMLElement("iframe")}}-Elementen im Dokument zurückzugeben, die ein "data-src" Attribut besitzen:

+ +
var matches = document.querySelectorAll("iframe[data-src]");
+ +

Hier wird ein Attribut-Selektor verwendet, um eine Aufzählung der Listenelemente zurückzugeben, die in einer Liste mit der ID "userlist" enthalten sind und deren Attribut "data-active" den Wert "1" hat:

+ +
var container = document.querySelector("#userlist");
+var matches = container.querySelectorAll("li[data-active='1']");
+ +

Auf Übereinstimmungen zugreifen

+ +

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 length 0 ist), wurden keine Übereinstimmungen gefunden.

+ +

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:

+ +
var highlightedItems = userList.querySelectorAll(".highlighted");
+
+highlightedItems.forEach(function(userItem) {
+  deleteUser(userItem);
+});
+ +

Benutzerhinweise

+ +

querySelectorAll() verhält sich anders als die meisten JavaScript-DOM-Bibliotheken, was zu unerwarteten Ergebnissen führen kann.

+ +

HTML

+ +

Betrachten Sie dieses HTML mit seinen drei geschachtelten {{HTMLElement("div")}} Blöcken.

+ +
<div class="outer">
+  <div class="select">
+    <div class="inner">
+    </div>
+  </div>
+</div>
+ +

JavaScript

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, not 0!
+
+ +

Wenn Sie in diesem Beispiel ".outer .inner" im Kontext des <div> mit der Klasse "select" auswählen, wird das Element mit der Klasse ".inner" immer noch gefunden, obwohl .outer kein Nachkomme des Basis-Elements ist, auf dem die Suche durchgeführt wird (".select"). Standardmäßig überprüft querySelectorAll() nur, ob sich das letzte Element im Selektor im Suchbereich befindet.

+ +

Die {{cssxref(":scope")}} Pseudo-Klasse stellt das erwartete Verhalten wieder her, bei dem Selektoren nur mit Nachkommen des Basis-Elements übereinstimmen:

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM WHATWG")}}Lebender Standard
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("Selectors API Level 2")}}Keine Änderung
{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM4")}}Initiale Definition
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Originale Definition
+ +

Browserkompatibilität

+ +
+ + +

{{Compat("api.Document.querySelectorAll")}}

+
+ +

Siehe auch

+ + 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 +--- +
{{APIRef("DOM")}} {{ gecko_minversion_header("1.9.2") }}
+ +

Zusammenfassung

+ +

Die Eigenschaft Document.readyState eines {{ domxref("document") }}-Objektes beschreibt dessen Ladezustand.

+ +

Werte

+ +

Die Eigenschaft readyState kann folgende Werte haben:

+ +
+
loading
+
Das Dokument wird noch geladen.
+
interactive
+
Das Dokument selbst wurde vollständig eingelesen und verarbeitet, aber das Laden weiterer Bestandteile wie Bilder, Stylesheets und Frames ist noch nicht abgeschlossen.
+ Dieser Status zeigt an, dass das Ereignis {{event("DOMContentLoaded")}} ausgelöst wurde.
+
complete
+
Das Dokument und seine Bestandteile wurden geladen.
+ Dieser Status zeigt an, dass das Ereignis {{event("load")}} ausgelöst wurde.
+
+ +

Ändert sich der Wert dieser Eigenschaft, wird das Ereignis {{event("readystatechange")}} des zugehörigen {{domxref("document") }}-Objekts augelöst.

+ +

Syntax

+ +
var string = document.readyState;
+
+ +

Beispiele

+ +

Verschiedene Ladezustände

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

readystatechange als eine Alternative zum Ereignis DOMContentLoaded

+ +
// Alternative zum Ereignis DOMContentLoaded
+document.onreadystatechange = function () {
+  if (document.readyState == "interactive") {
+    initApplication();
+  }
+}
+ +

readystatechange als eine Alternative zum Ereignis load

+ +
// Alternative zum Ereignis load
+document.onreadystatechange = function () {
+  if (document.readyState == "complete") {
+    initApplication();
+  }
+}
+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("HTML WHATWG", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML WHATWG')}} 
{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML5.1')}} 
{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML5 W3C')}}Initiale Spezifikation.
+ +

Siehe auch

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

Gibt den URI der Seite aus, von der die aktuelle Seite aufgerufen wurde.

+ +

Syntax

+ +
var string = document.referrer;
+
+ +

Wert

+ +

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.

+ +

Innerhalb eines {{HTMLElement("iframe")}}, wird der Document.referrer anfänglich auf den identischen Wert wie {{domxref("HTMLHyperlinkElementUtils/href", "href")}} der {{domxref("Window/location", "Window.location")}} des übergeordneten Fensters gesetzt.

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', '#dom-document-referrer-dev', 'document.referrer')}}{{Spec2('HTML WHATWG')}}
+ +

Browser Kompatibilität

+ + + +

{{Compat("api.Document.referrer")}}

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

{{APIRef("DOM")}}

+ +
+

Warnung: document.registerElement() läuft zu Gunsten von customElements.define() aus.

+
+ +

{{draft}}

+ +

Die document.registerElement()-Methode registriert ein neues benutzerdefiniertes Element im Browser und gibt einen Konstruktor für das neue Element zurück.

+ +
+

Hinweis: Dies ist eine experimentelle Technologie. Der Browser, der sie benutzen soll, muss Web Components unterstützen. Siehe Web Components in Firefox erlauben.

+
+ +

Syntax

+ +
var constructor = document.registerElement(tag-name, options);
+ +

Parameter

+ +
+
tag-name
+
Der Name des benutzerdefinierten Elements. Der Name muss einen Bindestrich (-) enthalten, zum Beispiel my-tag.
+
options {{optional_inline}}
+
+

Ein Objekt mit den Eigenschaften prototype, auf dem das benutzerdefinierte Element basieren soll, und extends, einem bestehenden Tag, der erweitert werden soll. Beide sind optional.

+
+
+ +

Beispiel

+ +

Hier ist ein einfaches Beispiel:

+ +
var Mytag = document.registerElement('my-tag');
+
+ +

Der Tag ist num im Browser registriert. Die Mytag-Variable enthält einen Konstruktor, der benutzt werden kann, um ein my-tag-Element wie folgt im Dokument zu erzeugen:

+ +
document.body.appendChild(new Mytag());
+ +

Das fügt ein leeres my-tag-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:

+ +
var mytag = document.getElementsByTagName("my-tag")[0];
+mytag.textContent = "I am a my-tag element.";
+
+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung3531[1]{{CompatNo}}25{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung4.4.431[1]{{CompatNo}}25{{CompatNo}}
+
+ +

[1] Diese API ist hinter einer Einstellung versteckt.

+ +

Siehe auch

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

Die Eigenschaft document.title holt oder setzt den aktuellen Titel des Dokuments.

+ +

Syntax

+ +
var docTitle = document.title;
+
+ +

docTitle ist eine Zeichenfolge, die den Titel des Dokuments enthält. Wenn der Titel durch das Setzen von document.title überschrieben wurde, enthält er diesen Wert. Andernfalls enthält er den im Markup angegebenen Titel (siehe {{Anch("Anmerkungen")}} unten).

+ +
document.title = newTitle;
+
+ +

newTitle ist der neue Titel des Dokuments. Die Zuweisung beeinflusst den Rückgabewert von document.title, 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 <title> in einem HTML-Dokument).

+ +

Beispiel

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

Anmerkungen

+ +

Diese Eigenschaft gilt für HTML-, SVG-, XUL- und andere Dokumente in Gecko.

+ +

Bei HTML-Dokumenten ist der Anfangswert von document.title der Textinhalt des Elements <title>. Bei XUL ist es der Wert des {{XULAttr("title")}} Attributs des {{XULElem("window")}} oder eines anderen XUL-Elements der obersten Ebene.

+ +

In XUL hat der Zugriff auf document.title, bevor das Dokument vollständig geladen ist, ein undefiniertes Verhalten: document.title gibt möglicherweise eine leere Zeichenfolge zurück, und das Setzen von document.title hat möglicherweise keine Wirkung.

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG','#document.title','document.title')}}{{Spec2('HTML WHATWG')}}
+ +

Browser-Kompatibilität

+ + + +

{{Compat("api.Document.title")}}

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 +--- +
{{APIRef("DOM")}}
+ +

Die schreibgeschützte Eigenschaft URL des {{domxref("Document")}} interface gibt den Ort des Dokuments als String zurück.

+ +

Syntax

+ +
var string = document.URL
+
+ +

Spezifikation

+ + 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 +--- +
{{APIRef("DOM")}} {{Obsolete_header}}
+ +
+

Note: Starting in {{Gecko("6.0")}}, document.width is no longer supported. Instead, use document.body.clientWidth. See {{domxref("element.clientWidth")}}.

+
+ +

Gibt die Breite des {{HTMLElement("body")}} Elements des aktuellen Dokuments in Pixeln zurück.

+ +

Wird nicht vom Internet Explorer unterstützt.

+ +

Syntax

+ +
pixels = document.width;
+
+ +

Beispiel

+ +
function init() {
+    alert("Die Breite des Dokuments beträgt " + document.width + " Pixel.");
+}
+
+ +

Alternativen

+ +
document.body.clientWidth              /* Breite des <body> */
+document.documentElement.clientWidth   /* Breite des <html> */
+window.innerWidth                      /* Breite des Browserfensters */
+
+ +

Spezifikation

+ +

HTML5

+ +

Siehe auch

+ + 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 +--- +
{{ ApiRef("DOM") }}
+ +

Schreibt eine Zeichenfolge in einen Dokument-Stream, der zuvor mittels document.open() geöffnet wurde.

+ +
Hinweis: da document.write in einen Dokument-Stream schreibt, wird beim Aufruf von document.write auf ein geschlossenes (fertig geladenes) Dokument dieses automatisch wieder mittels document.open geöffnet, wodurch das Dokument geleert wird.
+ +

Syntax

+ +
document.write(markup);
+
+ +

Parameter

+ +
+
markup
+
Ein String, der in das Dokument geschrieben wird.
+
+ +

Beispiel

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

Hinweise

+ +

Wird die Ausgabe auf ein Dokument angewendet, das zuvor nicht mittels document.open() geöffnet wurde, löst dies ein implizites document.open aus. Sobald Sie den Schreibvorgang beendet haben, empfiehlt es sich document.close() 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 h1-Element automatisch in einen Knoten im Dokument umgewandelt.

+ +

Wird der document.write() Aufruf in ein im HTML eingeschlossenes <script> Tag eingebunden, wird document.open() nicht aufgerufen. Zum Beispiel:

+ +
<script>
+  document.write("<h1>Main title</h1>")
+</script>
+
+ +
Hinweis: document.write und document.writeln funktionieren nicht in XHTML Documenten (Sie erhalten einen "Operation is not supported" [NS_ERROR_DOM_NOT_SUPPORTED_ERR] Fehler in der Fehlerkonsole). Dies tritt auf, sobald Sie eine lokale Datei mit der Erweiterung .xhtml laden oder eine Datei öffnen, die mit dem application/xhtml+xml-MIME-Typ vom Server gesendet wurde. Weitere Informationen erhalten Sie in der W3C XHTML FAQ.
+ +
Hinweis: document.write in verzögert geladenen oder asynchronen Scripten wird ignoriert und Sie erhalten eine Nachricht ähnlich dieser in der Fehlerkonsole: "A call to document.write() from an asynchronously-loaded external script was ignored".
+ +
Hinweis (Nur Microsoft Edge): ein wiederholter Aufruf vondocument.write in einem <iframe> erzeugt den Fehler "SCRIPT70: Permission denied".
+ +
Hinweis (Chrome Version 55+): per document.write() injizierte <script>-Elemente werden bei einer 2G Verbindung nach einem HTTP Cache Miss nicht ausgeführt.
+ +

Spezifikationen

+ + + +

Siehe auch

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

{{ ApiRef("DOM") }}

+ +

Schreibt eine Textfolge, gefolgt von einem Zeilenumbruchzeichen, in ein Dokument.

+ +

Syntax

+ +
document.writeln(line);
+
+ +

Parameters

+ + + +

Beispiel

+ +
document.writeln("<p>enter password:</p>");
+
+ +

Notes

+ +

document.writeln ist dasselbe wie {{domxref("document.write")}} aber fügt einen Zeilenumbruch hinzu.

+ +
Note: document.writeln (like document.write) does not work in XHTML documents (you'll get a "Operation is not supported" (NS_ERROR_DOM_NOT_SUPPORTED_ERR) 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 W3C XHTML FAQ.
+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusBemerkung
{{SpecName("HTML WHATWG", "#dom-document-writeln", "document.writeln()")}}{{Spec2("HTML WHATWG")}}
{{SpecName("DOM2 HTML", "html.html#ID-35318390", "document.writeln()")}}{{Spec2("DOM2 HTML")}}
+ +

Browser Kompatibilität

+ + + +

{{Compat("api.Document.writeln")}}

-- cgit v1.2.3-54-g00ecf