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/element/classlist/index.html | 300 ++++++++++++ files/de/web/api/element/classname/index.html | 128 +++++ .../api/element/getboundingclientrect/index.html | 62 +++ files/de/web/api/element/hasattribute/index.html | 129 +++++ files/de/web/api/element/index.html | 522 +++++++++++++++++++++ files/de/web/api/element/innerhtml/index.html | 204 ++++++++ .../web/api/element/insertadjacenthtml/index.html | 144 ++++++ files/de/web/api/element/queryselector/index.html | 89 ++++ .../de/web/api/element/queryselectorall/index.html | 206 ++++++++ .../de/web/api/element/removeattribute/index.html | 42 ++ .../web/api/element/requestfullscreen/index.html | 118 +++++ files/de/web/api/element/scrollintoview/index.html | 85 ++++ files/de/web/api/element/scrollleft/index.html | 83 ++++ files/de/web/api/element/scrollwidth/index.html | 49 ++ files/de/web/api/element/setattribute/index.html | 48 ++ 15 files changed, 2209 insertions(+) create mode 100644 files/de/web/api/element/classlist/index.html create mode 100644 files/de/web/api/element/classname/index.html create mode 100644 files/de/web/api/element/getboundingclientrect/index.html create mode 100644 files/de/web/api/element/hasattribute/index.html create mode 100644 files/de/web/api/element/index.html create mode 100644 files/de/web/api/element/innerhtml/index.html create mode 100644 files/de/web/api/element/insertadjacenthtml/index.html create mode 100644 files/de/web/api/element/queryselector/index.html create mode 100644 files/de/web/api/element/queryselectorall/index.html create mode 100644 files/de/web/api/element/removeattribute/index.html create mode 100644 files/de/web/api/element/requestfullscreen/index.html create mode 100644 files/de/web/api/element/scrollintoview/index.html create mode 100644 files/de/web/api/element/scrollleft/index.html create mode 100644 files/de/web/api/element/scrollwidth/index.html create mode 100644 files/de/web/api/element/setattribute/index.html (limited to 'files/de/web/api/element') diff --git a/files/de/web/api/element/classlist/index.html b/files/de/web/api/element/classlist/index.html new file mode 100644 index 0000000000..4e1f9b25df --- /dev/null +++ b/files/de/web/api/element/classlist/index.html @@ -0,0 +1,300 @@ +--- +title: Element.classList +slug: Web/API/Element/classList +translation_of: Web/API/Element/classList +--- +
{{APIRef("DOM")}}
+ +

Das Element.classList ist eine read-only Eigenschaft, welche die aktuelle {{domxref("DOMTokenList")}} Sammlung der Klassen-Attribute des Elements zurückgibt.

+ +

Die Benutzung von classList ist eine angenehme Alternative zum Ansprechen der Klassen eines Elements als die leerzeichengetrennte Zeichenfolge via {{domxref("element.className")}}. 

+ +

Syntax

+ +
const elementClasses = elementNodeReference.classList;
+
+ +

elementClasses ist eine DOMTokenList, welche die Klassen-Attribute der elementNodeReference repräsentiert. Wenn das Klassen-Attribut nicht gesetzt wurde oder elementClasses.length leer ist, wird 0 zurückgegeben. Element.classList selbst ist nur lesbar (read-only), obgleich es modifiziert werden kann, indem die Methoden add() und remove() angewendet werden.

+ +

Methoden

+ +
+
add( String [, String [, ...]] )
+
Fügt angegebene Klassenwerte hinzu. Wenn diese Klassen bereits im Attribut des Elements vorhanden sind, werden sie ignoriert.
+
remove( String [, String [, ...]] )
+
Ausgewählte Klassenwerte entfernen.
+ Bemerkung: Entfernen eines nicht vorhandenen Klassenwertes wirft keinen Fehler.
+
item ( Number )
+
Rückgabewert nach Index in der Sammlung.
+
toggle ( String [, force] )
+
Wenn nur ein Argument vorhanden ist: Klassenwert umschalten; d.h. wenn die Klasse existiert, dann entfernt es diese und gibt false zurück, wenn nicht, dann fügt es diese hinzu und gibt true zurück.
+
Wenn ein zweites Argument vorhanden ist: Wenn das zweite Argument auf true basiert, fügt es den angegebenen Klassenwert hinzu. Wenn es false auswertet, entfernt es ihn.
+
contains( String )
+
Überprüft, ob der angegebene Klassenwert im Klassenattribut des Elements vorhanden ist.
+
replace( oldClass, newClass )
+
Ersetzt einen vorhandenen Klassenwert.
+
+ +

Beispiele

+ +
const div = document.createElement('div');
+div.className = 'foo';
+
+// Status zum Beginn: <div class="foo"></div>
+console.log(div.outerHTML);
+
+// classList-API zum Entfernen und Ergänzen von Klassen nutzen
+div.classList.remove("foo");
+div.classList.add("anotherclass");
+
+// <div class="anotherclass"></div>
+console.log(div.outerHTML);
+
+// Wenn visible gesetzt ist entferne es, sonst füge es hinzu
+div.classList.toggle("visible");
+
+// Hinzufügen/Enfernen von visible, abhängig von der Bedingung, ob i kleiner 10 ist
+div.classList.toggle("visible", i < 10 );
+
+console.log(div.classList.contains("foo"));
+
+// Mehrere Klassen hinzufügen / entfernen
+div.classList.add("foo", "bar", "baz");
+div.classList.remove("foo", "bar", "baz");
+
+// Mehrere Klassen mittels Spread-Syntax hinzufügen / entfernen
+const cls = ["foo", "bar"];
+div.classList.add(...cls);
+div.classList.remove(...cls);
+
+// Klasse "foo" durch "bar" ersetzen
+div.classList.replace("foo", "bar");
+ +
+

Firefox-Versionen vor 26 setzen nicht die Nutzung die Nutzung von mehreren Argumenten in den Methoden add/remove/toggle um. Siehe https://bugzilla.mozilla.org/show_bug.cgi?id=814014

+
+ +

Polyfill

+ +
// Source: https://gist.github.com/k-gun/c2ea7c49edf7b757fe9561ba37cb19ca
+/**
+ * Element.prototype.classList for IE8/9, Safari.
+ * @author    Kerem Güneş <k-gun@mail.com>
+ * @copyright Released under the MIT License <https://opensource.org/licenses/MIT>
+ * @version   1.2
+ * @see       https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
+ */
+;(function() {
+    // Helpers.
+    var trim = function(s) {
+            return s.replace(/^\s+|\s+$/g, '');
+        },
+        regExp = function(name) {
+            return new RegExp('(^|\\s+)'+ name +'(\\s+|$)');
+        },
+        forEach = function(list, fn, scope) {
+            for (var i = 0; i < list.length; i++) {
+                fn.call(scope, list[i]);
+            }
+        };
+
+    // Class list object with basic methods.
+    function ClassList(element) {
+        this.element = element;
+    }
+
+    ClassList.prototype = {
+        add: function() {
+            forEach(arguments, function(name) {
+                if (!this.contains(name)) {
+                    this.element.className = trim(this.element.className +' '+ name);
+                }
+            }, this);
+        },
+        remove: function() {
+            forEach(arguments, function(name) {
+                this.element.className = trim(this.element.className.replace(regExp(name), ' '));
+            }, this);
+        },
+        toggle: function(name) {
+            return this.contains(name) ? (this.remove(name), false) : (this.add(name), true);
+        },
+        contains: function(name) {
+            return regExp(name).test(this.element.className);
+        },
+        item: function(i) {
+            return this.element.className.split(/\s+/)[i] || null;
+        },
+        // bonus
+        replace: function(oldName, newName) {
+            this.remove(oldName), this.add(newName);
+        }
+    };
+
+    // IE8/9, Safari
+    // Remove this if statements to override native classList.
+    if (!('classList' in Element.prototype)) {
+    // Use this if statement to override native classList that does not have for example replace() method.
+    // See browser compatibility: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility.
+    // if (!('classList' in Element.prototype) ||
+    //     !('classList' in Element.prototype && Element.prototype.classList.replace)) {
+        Object.defineProperty(Element.prototype, 'classList', {
+            get: function() {
+                return new ClassList(this);
+            }
+        });
+    }
+
+    // For others replace() support.
+    if (window.DOMTokenList && !DOMTokenList.prototype.replace) {
+        DOMTokenList.prototype.replace = ClassList.prototype.replace;
+    }
+})();
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}{{Spec2("HTML WHATWG")}}Note within the HTML specification related to the {{htmlattrxref("class")}} attribute.
{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM WHATWG")}}Initial definition
{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM4")}}
+ +

Browserkompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support812{{CompatGeckoDesktop(1.9.2)}}10[1]11.505.1
toggle() method's second argument2412{{CompatGeckoDesktop(24)}}{{CompatNo}}[2]157
Multiple arguments for add() & remove()2812{{CompatGeckoDesktop(26)}}{{CompatNo}}157
replace(){{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("49")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support3.012{{CompatGeckoMobile(1.9.2)}}10[1]11.105.0
toggle method's second argument4.412{{CompatGeckoMobile(24)}}{{CompatNo}}[2]{{CompatUnknown}}7.0
multiple arguments for add() & remove()4.412{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}7.0
replace(){{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("49")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Not supported for SVG elements.  See a report at Microsoft about that.
+ [2] Internet Explorer never implemented this. See a report at Microsoft about that.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/element/classname/index.html b/files/de/web/api/element/classname/index.html new file mode 100644 index 0000000000..1af7c129f0 --- /dev/null +++ b/files/de/web/api/element/classname/index.html @@ -0,0 +1,128 @@ +--- +title: Element.className +slug: Web/API/Element/className +translation_of: Web/API/Element/className +--- +
{{APIRef("DOM")}}
+ +

Zusammenfassung

+ +

className holt und setzt den Wert des Attributs class eines bestimmten Elements.

+ +

Syntax

+ +
var cName = elementNodeReference.className;
+elementNodeReference.className = cName;
+ + + +

Beispiel

+ +
let elm = document.getElementById('item');
+
+if(elm.className === 'active'){
+    elm.className = 'inactive';
+} else {
+    elm.className = 'active';
+}
+ +

Anmerkungen

+ +

Der Name className wird für diese Eigenschaft anstelle von class benutzt, um Komplikationen mit dem Schlüsselwort "class", welches in vielen Sprachen verwendet wird um das DOM zu verändern, zu vermeiden.

+ +

className kann auch eine Instanz von {{domxref("SVGAnimatedString")}} wenn das element ein {{domxref("SVGElement")}} ist. Es ist besser das Attribut className eines Elements zu ändern, in dem {{domxref("Element.getAttribute")}} verwendet beziehungsweise {{domxref("Element.setAttribute")}}, wenn man mit SVG Elementen arbeitet.

+ +
elm.setAttribute('class', elm.getAttribute('class'))
+ +

 

+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-element-classname", "element.className")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}{{Spec2("DOM2 HTML")}}Ursprüngliche Definition
+ +

Browserkompabilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FunktionalitätChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Grundsätzliche Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FunktionalitätAndroid webviewChrome für AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundsätzliche Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

See also

+ + diff --git a/files/de/web/api/element/getboundingclientrect/index.html b/files/de/web/api/element/getboundingclientrect/index.html new file mode 100644 index 0000000000..736314305d --- /dev/null +++ b/files/de/web/api/element/getboundingclientrect/index.html @@ -0,0 +1,62 @@ +--- +title: Element.getBoundingClientRect() +slug: Web/API/Element/getBoundingClientRect +translation_of: Web/API/Element/getBoundingClientRect +--- +
{{APIRef("DOM")}}
+ +

Die Methode Element.getBoundingClientRect()  gibt die Größe eines Elementes und dessen relative Position zum Viewport zurück.

+ +

Syntax

+ +
var domRect = element.getBoundingClientRect();
+
+ +

Rückgabe

+ +

Der zurückgegebene Wert ist ein DOMRect Objekt, welches die Vereinigungsmenge aller von getClientRects() zurückgegebenen Rechtecken eines Elementes darstellt, das heißt, der CSS border-boxes, die mit dem Element verknüpft sind.

+ +

Der Rückgabewert ist das kleinste Rechteck welches das komplette Element beinhaltet. Es enthält die read-only-Eigenschaften left, top, right ,bottom, x, y, width und height, welche die border-box in Pixeln beschreibt. Alle Eigenschaften, abgesehen von width und height, sind realtiv zur linken oberen Ecke des Viewports.

+ +
+

Merke: {{Gecko("1.9.1")}} fügt die Eigenschaften Breite und Höhe zu dem DOMRect Objekt hinzu.

+
+ +

Leere Borderboxen werden vollständig ignoriert. Sind sämtliche Borderboxen eines Elements leer, oder entsprechen die top und left Angaben der Borderbox der ersten CSS-Box (in der Reihenfolge des Inhalts), so wird Null (zero) für top und left zurückgegeben.

+ +

Ein Rechteck mit Breiten- und Höhenwerten von Null wird stattdessen zurückgegeben, und wo top und left den top-left Werten der Border-Box der ersten CSS-Box (in Reihenfolge des Inhaltes) entsprechen.

+ +

Bei der Berechnung des Rechtecks werden sowohl scrollbare Elemente sowie Scrolling an sich (wie viel bereits gescrollt wurde) einbezogen. Das bedeutet, dass die top und left Eigenschaften ihre Werte verändern, sobald sich deren Scrollposition verändert (d.h. ihre Werte sind relativ zum Viewport und nicht absolut).

+ +

Will man die Position des  Rechtecks in Bezug auf die Linke/Obere Ecke des Dokumentes haben, was der absoluten Position des Rechteckes entspricht, muss man zu den top und left Positionen, die Werte von window.scrollX und window.scrollY, addieren.

+ +

Um Browserkompabilität zu gewährleisten, nutzen Sie window.pageXOffset und window.pageYOffset statt window.scrollY und window.scrollX. Sollten window.pageXOffset, window.pageYOffset, window.scrollX and window.scrollY undefined sein, nutzen Sie (((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft and (((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop.

+ +

Beispiel

+ +
// rect is a DOMRect object with four properties: left, top, right, bottom
+var rect = obj.getBoundingClientRect();
+
+ +

Browser compatibility

+ +
{{Compat("api.Element.getBoundingClientRect")}}
+ +

Specification

+ + + +

Notes

+ +

getBoundingClientRect() wurde erstmals im DHTML Objektmodell von MS IE implementiert.

+ +

Der Rückgabewert von getBoundingClientRect() ist konstant, es können keine weiteren Eigenschaften hinzugefügt werden.

+ +

See also

+ + diff --git a/files/de/web/api/element/hasattribute/index.html b/files/de/web/api/element/hasattribute/index.html new file mode 100644 index 0000000000..991e9b9dcc --- /dev/null +++ b/files/de/web/api/element/hasattribute/index.html @@ -0,0 +1,129 @@ +--- +title: Element.hasAttribute() +slug: Web/API/Element/hasAttribute +tags: + - API + - Attribut + - DOM + - Element + - Méthode +translation_of: Web/API/Element/hasAttribute +--- +
{{APIRef("DOM")}}
+ +

Die Methode Element.hasAttribute() nimmt einen String als Argument und gibt einen Boolean zurück. Der als Argument übergebene String spezifiziert das gemeinte Attribut und der Rückabe Wert gibt an, ob dieses Attribut in dem jeweiligen Element vorkommt . 

+ +

Syntax

+ +
var result = element.hasAttribute(name);
+
+ +
+
result
+
Rückgabewert, wahr oder falsch.
+
name
+
Ein String, der das jeweilige Attribut spezifiziert.
+
+ +

Beispiel

+ +
var foo = document.getElementById("foo");
+if (foo.hasAttribute("bar")) {
+    // do something
+}
+
+ +

Polyfill

+ +
;(function(prototype) {
+    prototype.hasAttribute = prototype.hasAttribute || function(name) {
+        return !!(this.attributes[name] &&
+                  this.attributes[name].specified);
+    }
+})(Element.prototype);
+
+ +

Notizen

+ +
{{DOMAttributeMethods}}
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('DOM WHATWG', '#dom-element-hasattribute', 'Element.hasAttribute()')}}{{Spec2('DOM WHATWG')}}Von {{SpecName('DOM3 Core')}}, verlegt von {{domxref("Node")}} nach {{domxref("Element")}}
{{SpecName('DOM3 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}{{Spec2('DOM3 Core')}}Keine Veränderungen zu {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}{{Spec2('DOM2 Core')}}Initiale Definition.
+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}8.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/de/web/api/element/index.html b/files/de/web/api/element/index.html new file mode 100644 index 0000000000..71975f163b --- /dev/null +++ b/files/de/web/api/element/index.html @@ -0,0 +1,522 @@ +--- +title: Element +slug: Web/API/Element +tags: + - DOM + - Interface +translation_of: Web/API/Element +--- +

{{ APIRef("DOM") }}

+ +

The Element interface represents an object of a {{domxref("Document")}}. This interface describes methods and properties common to all kinds of elements. Specific behaviors are described in interfaces which inherit from Element but add additional functionality. For example, the {{domxref("HTMLElement")}} interface is the base interface for HTML elements, while the {{domxref("SVGElement")}} interface is the basis for all SVG elements.

+ +

Languages outside the realm of the Web platform, like XUL through the XULElement interface, also implement it.

+ +

Properties

+ +

Inherits properties from its parents {{domxref("Node")}}, and its own parent, {{domxref("EventTarget")}}, and implements those of {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, {{domxref("NonDocumentTypeChildNode")}}, and {{domxref("Animatable")}}.

+ +
+
{{ domxref("Element.attributes") }} {{readOnlyInline}}
+
Returns a {{ domxref("NamedNodeMap") }} that lists all attributes associated with the element.
+
{{ domxref("ParentNode.childElementCount") }}
+
Is a {{jsxref("Number")}} representing the number of child nodes that are elements.
+
{{ domxref("ParentNode.children") }}
+
Is a live {{ domxref("HTMLCollection") }} containing all child elements of the element, as a collection.
+
{{ domxref("Element.classList") }} {{readOnlyInline}}
+
Returns a {{ domxref("DOMTokenList") }} containing the list of class attributes.
+
{{ domxref("Element.className") }}
+
Is a {{domxref("DOMString")}} representing the class of the element.
+
{{ domxref("Element.clientHeight") }} {{experimental_inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the inner height of the element.
+
{{ domxref("Element.clientLeft") }} {{experimental_inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the width of the left border of the element.
+
{{ domxref("Element.clientTop") }} {{experimental_inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the width of the top border of the element.
+
{{ domxref("Element.clientWidth") }} {{experimental_inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the inner width of the element.
+
{{ domxref("ParentNode.firstElementChild") }}
+
Is a {{ domxref("Element") }}, the first direct child element of an element, or null if the element has no child elements.
+
{{ domxref("Element.id") }}
+
Is a {{domxref("DOMString")}} representing the id of the element.
+
{{ domxref("Element.innerHTML") }} {{experimental_inline}}
+
Is a {{domxref("DOMString")}} representing the markup of the element's content.
+
{{ domxref("ParentNode.lastElementChild") }}
+
Is a {{ domxref("Element") }}, the last direct child element of an element, or null if the element has no child elements.
+
{{ domxref("NonDocumentTypeChildNode.nextElementSibling") }}
+
Is a {{ domxref("Element") }}, the element immediately following the given one in the tree, or null if there's no sibling node.
+
{{ domxref("Element.outerHTML") }} {{experimental_inline}}
+
Is a {{domxref("DOMString")}} representing the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string.
+
{{ domxref("NonDocumentTypeChildNode.previousElementSibling") }}
+
Is a {{ domxref("Element") }}, the element immediately preceding the given one in the tree, or null if there is no sibling element.
+
{{ domxref("Element.scrollHeight") }} {{experimental_inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the scroll view height of an element.
+
{{ domxref("Element.scrollLeft") }} {{experimental_inline}}
+
Is a {{jsxref("Number")}} representing the left scroll offset of the element.
+
{{ domxref("Element.scrollLeftMax") }} {{non-standard_inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the maximum left scroll offset possible for the element.
+
{{ domxref("Element.scrollTop") }} {{experimental_inline}}
+
Is a {{jsxref("Number")}} representing the top scroll offset the an element.
+
{{ domxref("Element.scrollTopMax") }} {{non-standard_inline}} {{readOnlyInline}}
+
Returns a{{jsxref("Number")}} representing the maximum top scroll offset possible for the element.
+
{{ domxref("Element.scrollWidth") }} {{experimental_inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the scroll view width of the element.
+
{{domxref("Element.shadowRoot") }} {{experimental_inline}} {{readOnlyInline}}
+
...
+
{{ domxref("Element.tagName") }} {{readOnlyInline}}
+
Returns a {{domxref("String")}} with the name of the tag for the given element.
+
{{ domxref("Element.undoManager")}} {{experimental_inline}} {{readOnlyInline}}
+
Returns the {{domxref("UndoManager")}} associated with the element.
+
{{ domxref("Element.undoScope")}} {{experimental_inline}}
+
Is a {{jsxref("Boolean")}} indicating if the element is an undo scope host, or not.
+
+ +

Event handlers

+ +
+
{{ domxref("Element.ongotpointercapture") }}
+
…
+
{{ domxref("Element.onlostpointercapture") }}
+
…
+
{{ domxref("Element.onwheel") }} {{ non-standard_inline() }}
+
Returns the event handling code for the wheel event.
+
+ +

Methods

+ +

Inherits methods from its parents {{domxref("Node")}}, and its own parent, {{domxref("EventTarget")}}, and implements those of {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, {{domxref("NonDocumentTypeChildNode")}}, and {{domxref("Animatable")}}.

+ +
+
{{ domxref("EventTarget.addEventListener()") }}
+
Registers an event handler to a specific event type on the element.
+
{{ domxref("Element.closest()")}} {{experimental_inline}}
+
Returns the {{domxref("Element")}}, descendant of this element (or this element itself), that is the closest ancestor of the elements selected by the selectors given in parameter.
+
{{ domxref("Element.createShadowRoot()")}} {{experimental_inline}}
+
…
+
{{ domxref("EventTarget.dispatchEvent()") }}
+
Dispatches an event to this node in the DOM and returns a {{jsxref("Boolean")}} that indicates that at least one handler has not canceled it.
+
{{domxref("Element.find()")}}{{experimental_inline}}
+
...
+
{{domxref("Element.findAll()")}}{{experimental_inline}}
+
...
+
{{domxref("Animatable.getAnimationPlayers()")}} {{experimental_inline}}
+
…
+
{{ domxref("Element.getAttribute()") }}
+
Retrieves the value of the named attribute from the current node and returns it as an {{jsxref("Object")}}.
+
{{ domxref("Element.getAttributeNS()") }}
+
Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an {{jsxref("Object")}}.
+
{{ domxref("Element.getAttributeNode()") }} {{obsolete_inline}}
+
Retrievse the node representation of the named attribute from the current node and returns it as an {{ domxref("Attr") }}.
+
{{ domxref("Element.getAttributeNodeNS()") }} {{obsolete_inline}}
+
Retrieves the node representation of the attribute with the specified name and namespace, from the current node and returns it as an {{ domxref("Attr") }}.
+
{{ domxref("Element.getBoundingClientRect()") }} {{experimental_inline}}
+
...
+
{{ domxref("Element.getClientRects()") }} {{experimental_inline}} TYPE of returnvalue????
+
Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.
+
{{domxref("Element.getDestinationInsertionPoints()")}} {{experimental_inline}}
+
…
+
{{ domxref("Element.getElementsByClassName()") }}
+
Returns a live {{ domxref("HTMLCollection") }} that contains all descendant of the current element that posses the list of classes given in parameter.
+
{{ domxref("Element.getElementsByTagName()") }}
+
Returns a live {{ domxref("HTMLCollection") }} containing all descendant elements, of a particular tag name, from the current element.
+
{{ domxref("Element.getElementsByTagNameNS()") }}
+
Returns a live {{ domxref("HTMLCollection") }} containing all descendant elements, of a particular tag name and namespace, from the current element.
+
{{ domxref("Element.hasAttribute()") }}
+
Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute or not.
+
{{ domxref("Element.hasAttributeNS()") }}
+
Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute, in the specified namespace, or not.
+
{{ domxref("Element.insertAdjacentHTML") }} {{experimental_inline}}
+
Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.
+
{{ domxref("Element.matches()") }} {{experimental_inline}}
+
Returns a {{jsxref("Boolean")}} indicating whether or not the element would be selected by the specified selector string.
+
{{ domxref("Element.querySelector()") }}
+
Returns {{ domxref("Node") }}...
+
{{ domxref("Element.querySelectorAll") }}
+
Returns a {{ domxref("NodeList") }}...
+
{{ domxref("Element.releasePointerCapture")}} {{experimental_inline}}
+
…
+
{{domxref("ChildNode.remove()")}}
+
Removes the element from the children list of its parent.
+
{{ domxref("Element.removeAttribute()") }}
+
Removes the named attribute from the current node.
+
{{ domxref("Element.removeAttributeNS()") }}
+
Removes the attribute with the specified name and namespace, from the current node.
+
{{ domxref("Element.removeAttributeNode()") }} {{obsolete_inline}}
+
Removes the node representation of the named attribute from the current node.
+
{{ domxref("EventTarget.removeEventListener()") }}
+
Removes an event listener from the element.
+
{{ domxref("Element.requestFullscreen()") }} {{experimental_inline}}
+
Asynchronously asks the browser to make the element full-screen.
+
{{ domxref("Element.requestPointerLock()")}} {{experimental_inline}}
+
Allows to asynchronously ask for the pointer to be locked on the given element.
+
+ +
+
{{ domxref("Element.scrollIntoView()") }} {{experimental_inline}}
+
Scrolls the page until the element gets into the view.
+
{{ domxref("Element.setAttribute()") }}
+
Sets the value of a named attribute of the current node.
+
{{ domxref("Element.setAttributeNS()") }}
+
Sets the value of the attribute with the specified name and namespace, from the current node.
+
{{ domxref("Element.setAttributeNode()") }} {{obsolete_inline}}
+
Sets the node representation of the named attribute from the current node.
+
{{ domxref("Element.setAttributeNodeNS()") }} {{obsolete_inline}}
+
Setw the node representation of the attribute with the specified name and namespace, from the current node.
+
{{ domxref("Element.setCapture()") }} {{non-standard_inline}}
+
Sets up mouse event capture, redirecting all mouse events to this element.
+
{{domxref("Element.setPointerCapture()")}}
+
…
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Web Animations", '', '')}}{{Spec2("Web Animations")}}Added the getAnimationPlayers() method.
{{SpecName('Undo Manager', '', 'Element')}}{{Spec2('Undo Manager')}}Added the undoScope and undoManager properties.
{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('Pointer Events')}}Added the following event handlers: ongotpointercapture and onlostpointercapture.
+ Added the following methods: setPointerCapture() and releasePointerCapture().
{{SpecName('Selectors API Level 2', '#interface-definitions', 'Element')}}{{Spec2('Selectors API Level 2')}}Added the following methods: matches() (implemented as mozMatchesSelector()), find(), findAll().
{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}{{Spec2('Selectors API Level 1')}}Added the following methods: querySelector() and querySelectorAll().
{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}{{Spec2('Pointer Lock')}}Added the requestPointerLock() method.
{{SpecName('Fullscreen', '#api', 'Element')}}{{Spec2('Fullscreen')}}Added the requestFullscreen() method.
{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('DOM Parsing')}}Added the following properties: innerHTML, and outerHTML.
+ Added the following method: insertAdjacentHTML().
{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('CSSOM View')}}Added the following properties: scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, and clientHeight.
+ Added the following methods: getClientRects(), getBoundingClientRect(), and scrollIntoView().
{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}{{Spec2('Element Traversal')}}Added inheritance of the {{domxref("ElementTraversal")}} interface.
{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}{{Spec2('DOM WHATWG')}}Removed the following methods: closest(), setIdAttribute(), setIdAttributeNS(), and setIdAttributeNode().
+ Removed the schemaTypeInfo property.
+ Modified the return value of getElementsByTag() and getElementsByTagNS().
+ Moved hasAttributes() form the Node interface to this one.
{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}{{Spec2('DOM3 Core')}}Added the following methods: setIdAttribute(), setIdAttributeNS(), and setIdAttributeNode(). These methods were never implemented and have been removed in later specifications.
+ Added the schemaTypeInfo property. This property was never implemented and has been removed in later specifications.
{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}{{Spec2('DOM2 Core')}}The normalize() method has been moved to {{domxref("Node")}}.
{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}1.0
children{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9")}}7.0 with a significant bug [1]
+ 9.0 according to the spec		{{CompatVersionUnknown}}{{CompatNo}}
childElementCount, nextElementSibling, previousElementSibling{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}9.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
firstElementChild, lastElementChild{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9")}}9.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
classList{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.2")}} {{CompatVersionUnknown}}{{CompatVersionUnknown}}
outerHTML {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("11")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
clientLeft, clientTop {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
getBoundingClientRect(), getClientRects() {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
querySelector(), querySelectorAll()1.0{{CompatGeckoDesktop("1.9.1")}}8.010.03.2 (525.3)
insertAdjacentHTML() {{experimental_inline}}1.0{{CompatGeckoDesktop("8")}}4.07.04.0 (527)
setCapture() {{non-standard_inline}}{{CompatNo}}{{CompatGeckoDesktop("2")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
oncopy, oncut, onpaste {{non-standard_inline}}{{CompatNo}}{{CompatGeckoDesktop("1.9")}}{{CompatVersionUnknown}} {{CompatNo}}
onwheel {{non-standard_inline}}{{CompatNo}}{{CompatGeckoDesktop("17")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
ongotpointercapture, onlostpointercapture, setPointerCapture(), and releasePointerCapture(){{CompatNo}}{{CompatNo}}10.0 {{property_prefix("MS")}}{{CompatNo}}{{CompatNo}}
matches() {{experimental_inline}}{{CompatVersionUnknown}} with the non-standard name webkitMatchesSelector{{CompatGeckoDesktop("1.9.2")}} with the non-standard name mozMatchesSelector
+ {{CompatGeckoDesktop("34")}} with the standard name		9.0 with the non-standard name msMatchesSelector11.5 with the non-standard name oMatchesSelector
+ 15.0 with the non-standard name webkitMatchesSelector		5.0 with the non-standard name webkitMatchesSelector
find() and findAll(){{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
requestPointerLock()16.0 {{property_prefix("webkit")}}, behind an about:flags
+ 22.0 {{property_prefix("webkit")}} (with special cases, progressively lifted see [2])		{{CompatGeckoDesktop("14")}}{{property_prefix("moz")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
requestFullscreen()14.0 {{property_prefix("webkit")}}{{CompatGeckoDesktop("10")}} {{property_prefix("moz")}}11.0 {{property_prefix("ms")}}12.10
+ 15.0 {{property_prefix("webkit")}}		5.1 {{property_prefix("webkit")}}
undoManager and undoScope{{CompatNo}}{{CompatVersionUnknown}} (behind the dom.undo_manager.enabled pref){{CompatNo}}{{CompatNo}}{{CompatNo}}
attributes{{CompatUnknown}}{{CompatGeckoDesktop("22")}}
+ Before this it was available via the {{domxref("Node")}} interface that any element inherits.		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
scrollTopMax() and scrollLeftMax(){{CompatNo}}{{CompatGeckoDesktop("16")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
closest(){{CompatUnknown}}{{CompatGeckoDesktop("35")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
hasAttributes(){{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}} (on the {{domxref("Node")}} interface)
+ {{CompatGeckoDesktop("35")}} (on this interface		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}1.0
scrollTopMax() and scrollLeftMax(){{CompatNo}}{{CompatGeckoMobile("16")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
closest(){{CompatUnknown}}{{CompatGeckoMobile("35")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
hasAttributes(){{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}} (on the {{domxref("Node")}} interface)
+ {{CompatGeckoMobile("35")}} (on this interface		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Internet Explorer 7 and 8 incorrectly return the comments as part of the children of an Element. This is fixed in Internet Explorer 9 and later.

+ +

[2] Chrome 16 allowed webkitRequestPointerLock() only in fullscreen; Chrome 21 for trusted web site (permission asked); Chrome 22 allowed it by default for all same-origin document; Chrome 23 allowed it in sandboxed {{HTMLElement("iframe")}} if the non-standard value webkit-allow-pointer-lock is set to the {{htmlattrxref("sandbox", "iframe")}} attribute.

diff --git a/files/de/web/api/element/innerhtml/index.html b/files/de/web/api/element/innerhtml/index.html new file mode 100644 index 0000000000..a5d3d3011d --- /dev/null +++ b/files/de/web/api/element/innerhtml/index.html @@ -0,0 +1,204 @@ +--- +title: Element.innerHTML +slug: Web/API/Element/innerHTML +translation_of: Web/API/Element/innerHTML +--- +
{{APIRef("DOM")}}
+ +

Die {{domxref("Element")}} Eigenschaft innerHTML ruft das im Element enthaltene HTML-oder XML-Markup ab oder legt dieses fest.

+ +
Hinweis: Wenn ein {{HTMLElement("div")}}, {{HTMLElement("span")}} oder {{HTMLElement("noembed")}}-Knoten einen untergeordneten Textknoten mit den Zeichen &, < oder > enthält, gibt innerHTML diese Zeichen als ihre entsprechende HTML-Entitäten "&amp;", "&lt;" bzw. "&gt;" zurück. Verwenden Sie {{domxref("Node.textContent")}}, um eine reine Kopie des Inhalts dieser Textknoten zu erhalten.
+ +

Verwenden Sie die Methode {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}, um den HTML-Code in das Dokument einzufügen, anstatt den Inhalt eines Elements zu ersetzen.

+ +

Syntax

+ +
const content = element.innerHTML;
+
+element.innerHTML = htmlString;
+
+ +

Wert

+ +

Ein {{domxref("DOMString")}}, das die HTML-Serialisierung der Nachkommen des Elements enthält. Wenn Sie den Wert von innerHTML festlegen, werden alle Nachkommen des Elements entfernt und durch Knoten ersetzt, die durch Analysieren des in htmlString angegebenen HTML-Codes erstellt werden.

+ +

Exceptions

+ +
+
SyntaxError
+
Es wurde versucht, den Wert von innerHTML mit einem nicht ordnungsgemäß formatierten HTML-String festzulegen.
+
NoModificationAllowedError
+
Es wurde versucht, den HTML-Code in einen Knoten einzufügen, dessen übergeordnetes Element {{domxref("Document")}} ist.
+
+ +

Nutzungshinweise

+ +

Die innerHTML-Eigenschaft kann verwendet werden, um den aktuellen HTML-Quellcode der Seite einschließlich aller Änderungen zu überprüfen, die seit dem erstmaligen Laden der Seite vorgenommen wurden.

+ +

HTML-Inhalte eines Elements auslesen

+ +

Das Lesen von innerHTML bewirkt, dass der Benutzer-Agent das HTML- oder XML-Fragment serialisiert, das aus den Nachkommen des Elements besteht. Der resultierende String wird zurückgegeben.

+ +
let contents = myElement.innerHTML;
+ +

Auf diese Weise können Sie das HTML-Markup der Inhaltsknoten des Elements anzeigen.

+ +
+

Hinweis: Das zurückgegebene HTML- oder XML-Fragment wird basierend auf dem aktuellen Inhalt des Elements generiert, sodass das Markup und Formatierung des zurückgegebenen Fragments wahrscheinlich nicht mit dem ursprünglichen Seiten-Markup übereinstimmt.

+
+ +

Inhalte eines Element ersetzen

+ +

Durch das Festlegen des Wertes von innerHTML können Sie den vorhandenen Inhalt eines Elements problemlos durch neuen Inhalt ersetzen.

+ +

Beispielsweise können Sie den gesamten Inhalt eines Dokuments löschen, indem Sie den Inhalt des Attributs {{domxref("Document.body", "body")}} löschen:

+ +
document.body.innerHTML = "";
+ +

In diesem Beispiel wird das aktuelle HTML-Markup des Dokuments abgerufen und die Zeichen "<" durch die HTML-Entität "&lt;" ersetzt, wodurch der HTML-Code im Wesentlichen in unformatierten Text umgewandelt wird. Dieses wird dann in ein Element {{HTMLElement("pre")}} eingeschlossen. Dann wird der Wert von innerHTML in diesen neuen String geändert. Als Ergebnis wird der Dokumentinhalt durch eine Anzeige des gesamten Quellcodes der Seite ersetzt.

+ +
document.documentElement.innerHTML = "<pre>" +
+         document.documentElement.innerHTML.replace(/</g,"&lt;") +
+            "</pre>";
+ +

Unter der Haube

+ +

Was passiert genau, wenn Sie den Wert von innerHTML festlegen? Der Benutzer-Agent führt dabei die folgenden Schritte aus:

+ +
    +
  1. Der angegebene Wert wird als HTML oder XML analysiert (basierend auf dem Dokumenttyp), sodass ein {{domxref("DocumentFragment")}}-Objekt den neuen Satz von DOM-Knoten für die neuen Elemente darstellt.
    2. +
  2. Wenn das Element, dessen Inhalt ersetzt wird, ein {{HTMLElement("template")}}-Element ist, wird das Attribut {{domxref("HTMLTemplateElement.content", "content")}} des Elements <template> durch das neue DocumentFragment ersetzt, welches in Schritt 1 erstellt wurde.
    3. +
  3. Bei allen anderen Elementen wird der Inhalt des Elements durch die Knoten im neuen DocumentFragment ersetzt.
    4. +
+ +

Sicherheitsüberlegungen

+ +

Es ist nicht ungewöhnlich, dass innerHTML zum Einfügen von Text in eine Webseite verwendet wird. Es besteht jedoch die Möglichkeit, dass dies zu einem Angriffsvektor auf einer Website wird, wodurch ein potenzielles Sicherheitsrisiko entsteht.

+ +
const name = "John";
+// angenommen 'el' ist ein HTML DOM Element
+el.innerHTML = name; // in diesem Fall harmlos
+
+// ...
+
+name = "<script>alert('Ich bin John in einem störenden Alert!')</script>";
+el.innerHTML = name; // in diesem Fall harmlos
+ +

Obwohl dies wie ein {{interwiki("wikipedia", "cross-site scripting")}}-Angriff aussieht, ist das Ergebnis harmlos. HTML5 schreibt vor, dass ein mit innerHTML eingefügtes {{HTMLElement("script")}}-Tag nicht ausgeführt werden soll.

+ +

Es gibt jedoch Möglichkeiten, JavaScript auszuführen, ohne {{HTMLElement("script")}}-Elemente zu verwenden. Daher besteht immer ein Sicherheitsrisiko, wenn Sie innerHTML verwenden, um Strings festzulegen, über die Sie keine Kontrolle haben. Zum Beispiel:

+ +
const name = "<img src='x' onerror='alert(1)'>";
+el.innerHTML = name; // zeigt den alert
+ +

Aus diesem Grund wird empfohlen, innerHTML nicht zum Einfügen von reinem Text zu verwenden. Verwenden Sie stattdessen {{domxref("Node.textContent", "textContent")}}. Der übergebene Inhalt wird nicht als HTML-Code analysiert, sondern als reiner Text eingefügt.

+ +
+

Warnung: Wenn Ihr Projekt einer Sicherheitsüberprüfung unterzogen wird, führt die Verwendung von innerHTML höchstwahrscheinlich dazu, dass Ihr Code abgelehnt wird. Wenn Sie beispielsweise innerHTML in einer Browsererweiterung verwenden und die Erweiterung bei addons.mozilla.org einreichen, wird sie den automatisierten Überprüfungsprozess nicht bestehen.

+
+ +

Beispiel

+ +

In diesem Beispiel wird mit innerHTML ein Mechanismus zum Protokollieren von Nachrichten in einem Feld auf einer Webseite erstellt.

+ +

JavaScript

+ +
function log(msg) {
+  var logElem = document.querySelector(".log");
+
+  var time = new Date();
+  var timeStr = time.toLocaleTimeString();
+  logElem.innerHTML += timeStr + ": " + msg + "<br/>";
+}
+
+log("Logging mouse events inside this container...");
+
+ +

Die Funktion log() erstellt die Protokollausgabe, indem sie mithilfe von {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}} die aktuelle Uhrzeit aus einem {{jsxref("Date")}}-Objekt abruft und einen String aus dem Zeitstempel und dem Nachrichtentext erstellt. Dann wird die Nachricht an die Box mit der Klasse "log" angehängt.

+ +

Wir fügen eine zweite Methode hinzu, die Informationen zu auf {{domxref("MouseEvent")}} basierenden Ereignissen protokolliert (z. B. {{event("mousedown")}}, {{event("click")}} und {{event("mouseenter")}}):

+ +
function logEvent(event) {
+  var msg = "Event <strong>" + event.type + "</strong> at <em>" +
+            event.clientX + ", " + event.clientY + "</em>";
+  log(msg);
+}
+ +

Dann verwenden wir dies als Ereignishandler für eine Reihe von Mausereignissen in der Box, die unser Protokoll enthält:

+ +
var boxElem = document.querySelector(".box");
+
+boxElem.addEventListener("mousedown", logEvent);
+boxElem.addEventListener("mouseup", logEvent);
+boxElem.addEventListener("click", logEvent);
+boxElem.addEventListener("mouseenter", logEvent);
+boxElem.addEventListener("mouseleave", logEvent);
+ +

HTML

+ +

Das HTML für unser Beispiel ist denkbar einfach.

+ +
<div class="box">
+  <div><strong>Log:</strong></div>
+  <div class="log"></div>
+</div>
+ +

Das {{HTMLElement("div")}} mit der Klasse "box" ist nur ein Container für Layoutzwecke, der den Inhalt mit einem Rahmen darstellt. Der <div>, dessen Klasse "log" ist, ist der Container für den Protokolltext.

+ +

CSS

+ +

Das folgende CSS formatiert unseren Beispielinhalt.

+ +
.box {
+  width: 600px;
+  height: 300px;
+  border: 1px solid black;
+  padding: 2px 4px;
+  overflow-y: scroll;
+  overflow-x: auto;
+}
+
+.log {
+  margin-top: 8px;
+  font-family: monospace;
+}
+ +

Ergebnis

+ +

Der resultierende Inhalt sieht so aus. Sie können die Ausgabe im Protokoll anzeigen, indem Sie die Maus in das Feld hinein- und herausbewegen, darauf klicken und so weiter.

+ +

{{EmbedLiveSample("Example", 640, 350)}}

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM Parsing', '#dom-element-innerhtml', 'Element.innerHTML')}}{{Spec2('DOM Parsing')}}Initiale Definition
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Element.innerHTML")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/element/insertadjacenthtml/index.html b/files/de/web/api/element/insertadjacenthtml/index.html new file mode 100644 index 0000000000..14f05ca474 --- /dev/null +++ b/files/de/web/api/element/insertadjacenthtml/index.html @@ -0,0 +1,144 @@ +--- +title: Element.insertAdjacentHTML() +slug: Web/API/Element/insertAdjacentHTML +tags: + - .textContent() + - Geschwindigkeitsvorteil + - HTML einfügen + - Méthode + - Referenz +translation_of: Web/API/Element/insertAdjacentHTML +--- +
{{APIRef("DOM")}}
+ +

Zusammenfassung

+ +

insertAdjacentHTML() interpretiert den angegebenen Text als HTML oder XML und fügt resultierende Knoten an angegebener Position ins DOM ein. Das Zielobjekt wird nicht erneut interpretiert, wodurch darin enthaltene, bereits existierende Elemente nicht beeinträchtigt werden.
+ Eine zusätzlich erforderliche Serialisierung wird vermieden, was einen deutlichen Geschwindigkeitsvorteil gegenüber einer innerHTML Manipulation ergibt.

+ +

Syntax

+ +
element.insertAdjacentHTML(position, text);
+ +

position beschreibt den Einfügepunkt relativ zu einem Element und muss einem der folgenden Schlüsselbegriffe entsprechen:

+ +
+
'beforebegin'
+
Vor dem element selbst.
+
'afterbegin'
+
Innerhalb des element, direkt vor dessen erstem Kind-Objekt. 
+
'beforeend'
+
Innerhalb des element, direkt nach dessen letztem Kind-Objekt.
+
'afterend'
+
Nach dem element selbst.
+
+ +

text ist die Zeichenfolge, die als HTML oder XML interpretiert und in den DOM-Baum eingesetzt wird.

+ +

Verdeutlichung der position Bezeichner

+ +
<!-- beforebegin -->
+<p>
+  <!-- afterbegin -->
+  foo
+  <!-- beforeend -->
+</p>
+<!-- afterend -->
+ +
Hinweis: Die beforebegin und afterend Positionierungen wirken nur, wenn der Knoten innerhalb des DOM-Baums steht und ein Eltern-Element hat. 
+ +

Beispiel

+ +
// <div id="one">one</div>
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
+
+// Danach sieht die neue Struktur so aus:
+// <div id="one">one</div><div id="two">two</div>
+ +

Anmerkungen

+ +

Sicherheitsaspekte

+ +

Beim Einfügen von HTML in eine Seite sollten keinesfalls unbehandelte Benutzereingaben genutzt werden (siehe 'Escaping'). 

+ +

Für das Einfügen reinen Texts sollte statt insertAdjacentHTML besser node.textContent benutzt werden. Diese Methode interpretiert Parameter nicht als HTML, sondern fügt puren Text ein.

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
BeschreibungStatusKommentar
{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}{{ Spec2('DOM Parsing') }} 
+ +

Browser Kompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
grundsätzlich
+ unterstützt		1.0{{ CompatGeckoDesktop("8.0") }}4.07.04.0 (527)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
grundsätzlich
+ unterstützt		{{ CompatUnknown() }}{{ CompatGeckoMobile("8.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/element/queryselector/index.html b/files/de/web/api/element/queryselector/index.html new file mode 100644 index 0000000000..a3cf7d9d89 --- /dev/null +++ b/files/de/web/api/element/queryselector/index.html @@ -0,0 +1,89 @@ +--- +title: Element.querySelector() +slug: Web/API/Element/querySelector +translation_of: Web/API/Element/querySelector +--- +
{{APIRef}}
+ +

Gibt das erste Unterelement des Elements, von dem es aufgerufen wird, zurück, auf das die angegebenen Selektoren zutreffen.

+ +

Syntax

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

Beispiel

+ +

In diesem Beispiel wird das erste style Element aus dem body Element zurückgegeben, das den type text/css oder keinen type hat.

+ +
var el = document.body.querySelector("style[type='text/css'], style:not([type])");
+
+ +

Bemerkungen

+ +

Gibt null zurück, wenn keine Elemente gefunden werden, andernfalls das Element.

+ +

Eine SYNTAX_ERR Ausnahme tritt auf, wenn die angegebenen Selektoren ungültig sind.

+ +

querySelector() wurde in der WebApps API eingeführt.

+ +

Das Argument querySelector muss der CSS Syntax folgen. Siehe {{domxref("document.querySelector")}} für konkrete Beispiele.

+ +

Browserkompatibilität

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BrowserSupportAnmerkungen
Internet Explorer8Nur CSS 2.1 Selektoren (IE8)
Firefox (Gecko)3.5 (1.9.1) 
Opera10 
Chrome1 
Safari (webkit)3.2 (525.3)webk.it/16587
+ +

Spezifikation

+ + + +

Siehe auch

+ + diff --git a/files/de/web/api/element/queryselectorall/index.html b/files/de/web/api/element/queryselectorall/index.html new file mode 100644 index 0000000000..009a105b89 --- /dev/null +++ b/files/de/web/api/element/queryselectorall/index.html @@ -0,0 +1,206 @@ +--- +title: Element.querySelectorAll() +slug: Web/API/Element/querySelectorAll +tags: + - Méthode + - Referenz +translation_of: Web/API/Element/querySelectorAll +--- +
{{APIRef("DOM")}}
+ +

Summary

+ +

Gibt eine statische NodeList aller Elemente absteigend des Elements, auf welchem querySelectorAll ausgeführt wird, die mit den angegebenen CSS Selektoren übereinstimmen.

+ +

Syntax

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

wobei:

+ +
+
elementList
+
ist statische Node Liste [ NodeList[elements] ] mit element Objekten.
+
baseElement
+
ist ein element Objekt.
+
selectors
+
ist eine Gruppe von Selektoren die mit dem Element im DOM übereinstimmen soll. 
+
+ +

Beispiele

+ +

Dieses Beispiel gibt eine Liste der p Elementen im HTML body zurück:

+ +
let matches = document.body.querySelectorAll('p');
+
+ +

Dieses Beispiel gibt eine Liste der p Unter-Elementen eines Containers, dessen Überobjekt ein div mit der Klasse 'highlighted' ist:

+ +
let el = document.querySelector('#test');    //return an element with id='test'
+let matches = el.querySelectorAll('div.highlighted > p'); // return a NodeList of p wrapped in a div with attribute class "highlighted"
+
+ +

Dieses Beispiel gibt eine Liste der iframe Elementen die ein data Attribut 'src' besitzen:

+ +
let matches = el.querySelectorAll('iframe[data-src]');
+
+ +

Bemerkungen

+ +

If the specified "selectors" are not found inside the DOM of the page, the method queryselectorAll returns an empty NodeList as specified below:

+ +
> let x = document.body.querySelectorAll('.highlighted'); //case: if the class highlighted doesn't exist in any attribute "class" of the DOM the result is
+> [] //empty NodeList
+ +

querySelectorAll() was introduced in the WebApps API.

+ +

The string argument pass to querySelectorAll must follow the CSS syntax. See {{domxref("document.querySelector")}} for a concrete example.

+ +

We could access a single item inside the NodeList in the following way:

+ +
let x = document.body.querySelectorAll('.highlighted');
+x.length; //return the size of x
+x[i_item]; //where i_item has a value between 0 and x.length-1. The operator "[]" return as in an array the element at index "i_item"
+
+ +

We could iterate inside a NodeList with the construct for(....) {...} as in the following code:

+ +
 let x = document.body.querySelectorAll('.highlighted');
+ let index = 0;
+ for( index=0; index < x.length; index++ ) {
+       console.log(x[index]);
+ }
+ +

So in the above way, it is possible to manage and modify the behaviour of the page.

+ +

Quirks

+ +

querySelectorAll() behaves differently than most common JavaScript DOM libraries, which might lead to unexpected results:

+ +
<div class="outer">
+  <div class="select">
+    <div class="inner">
+    </div>
+  </div>
+</div>
+ +
let select = document.querySelector('.select');
+let inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, not 0!
+
+ +

In this example, when selecting .outer .inner in the context of .select, .inner is still found, even though .outer is not a descendant of the baseElement (.select).
+ querySelectorAll() only verifies that the last element in the selector is within the baseElement.

+ +

The :scope pseudo-class restores the expected behavior, only matching selectors on descendants of the baseElement:

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

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM4','#dom-parentnode-queryselectorallselectors','querySelectorAll')}}{{Spec2('DOM4')}} 
{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll')}}{{Spec2('Selectors API Level 2')}} 
{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll')}}{{Spec2('Selectors API Level 1')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1{{CompatGeckoDesktop("1.9.1")}}8103.2 (525.3)
:scope pseudo-class{{ CompatVersionUnknown }}32{{CompatNo}}15[1]7.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
:scope pseudo-class{{ CompatUnknown }}32{{CompatNo}}{{CompatNo}}7.0
+
+ +

[1] Supported in Opera 15+ by enabling the "Enable <style scoped>" or "Enable experimental Web Platform features" flag in chrome://flags.

+ +

See also

+ + diff --git a/files/de/web/api/element/removeattribute/index.html b/files/de/web/api/element/removeattribute/index.html new file mode 100644 index 0000000000..91be13b037 --- /dev/null +++ b/files/de/web/api/element/removeattribute/index.html @@ -0,0 +1,42 @@ +--- +title: Element.removeAttribute() +slug: Web/API/Element/removeAttribute +tags: + - API + - Attribut + - DOM + - Element + - Méthode +translation_of: Web/API/Element/removeAttribute +--- +

{{ APIRef("DOM") }}

+ +

removeAttribute entfernt ein Attribut vom gegebenen Element.

+ +

Syntax

+ +
element.removeAttribute(attrName);
+
+ + + +

Beispiel

+ +
// <div id="div1" align="left" width="200px">
+document.getElementById("div1").removeAttribute("align");
+// now: <div id="div1" width="200px">
+
+ +

Anmerkungen

+ +

Man sollte removeAttribute verwenden, statt den Attributswert auf null zu setzen (mit setAttribute).

+ +

Der Versuch, ein nicht vorhandenes Attribut zu entfernen, wirft keine Exception.

+ +

{{ DOMAttributeMethods() }}

+ +

Spezifikation

+ +

DOM Level 2 Core: removeAttribute (eingeführt in DOM Level 1 Core)

diff --git a/files/de/web/api/element/requestfullscreen/index.html b/files/de/web/api/element/requestfullscreen/index.html new file mode 100644 index 0000000000..01e207e00a --- /dev/null +++ b/files/de/web/api/element/requestfullscreen/index.html @@ -0,0 +1,118 @@ +--- +title: Element.requestFullscreen() +slug: Web/API/Element/requestFullScreen +translation_of: Web/API/Element/requestFullScreen +--- +
{{APIRef("Fullscreen API")}}
+ +

Die Funktion Element.requestFullscreen() sendet eine asynchrone Anfrage, um das Element in Vollbild darzustellen.

+ +

Es ist nicht garantiert, dass das Element in Vollbild angezeigt werden wird. Wenn die Berechtigung dazu erteilt wird, erhält das Dokument ein {{event("fullscreenchange")}} Event, um es wissen zu lassen, dass nun etwas in Vollbild angezeigt wird. Wird die Berechtigung jedoch verweigert, erhält das Dokument ein {{event('fullscreenerror')}} Event.

+ +
+

Nur Elemente im HTML Namespace (Standard HTML Elemente), plus die {{HTMLElement("svg")}} und {{HTMLElement("math")}} Elemente, welche sich im Top-Level Dokument oder in einem {{HTMLElement('iframe')}} mit dem {{htmlattrxref("allowfullscreen", "iframe")}} Attribut befinden, können im Vollbildmodus angezeigt werden. Das bedeutet, dass ein {{HTMLElement('frame')}} oder ein {{HTMLElement('object')}} dies nicht kann.

+
+ +

Syntax

+ +
Element.requestFullscreen();
+
+ +

Beispiel

+ +

Bevor requestFullScreen() aufgerufen wird, sollte man Eventhandler für die {{event("fullscreenchange")}} und {{event("fullscreenerror")}} Events erstellen, damit man erfährt, wenn das Dokument in den Vollbildmodus wechselt (oder die entsprechende Berechtigung dazu fehlt).

+ +

tbd

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullScreen()")}}{{Spec2("Fullscreen")}}Ursprüngliche Definition
+ +

Browser-Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefoxInternet ExplorerEdgeOperaSafari
Grundlegene Unterstütung{{CompatVersionUnknown}}{{property_prefix("webkit")}}[1]{{CompatGeckoDesktop("9.0")}} as mozRequestFullScreen[2]
+ {{CompatGeckoDesktop("47.0")}} (behind full-screen-api.unprefix.enabled		11{{property_prefix("ms")}}[3]{{CompatVersionUnknown}}[3]{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChrome AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegene Unterstütung{{CompatVersionUnknown}}{{property_prefix("webkit")}}[1]{{CompatVersionUnknown}}{{CompatGeckoMobile("9.0")}} as mozRequestFullScreen[2]
+ {{CompatGeckoMobile("47.0")}} (behind full-screen-api.unprefix.enabled		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Auch implementiert als webkitRequestFullScreen.

+ +

[2] Implementiert als mozRequestFullScreen (man beachte das große S für Screen). Vor Firefox 44 erlaubte Gecko Elementen innerhalb eines {{HTMLElement('frame')}} oder {{HTMLElement('object')}} fälschlicherweise in den Vollbildmodus zu wechseln. Ab Firefox 44 wurde dieses Verhalten behoben: nur Elemente im Top-Level Dokument oder in einem {{HTMLElement('iframe')}} mit dem {{htmlattrxref("allowfullscreen", "iframe")}} Attribut können in den Vollbildmodus wechseln.

+ +

[3] Siehe Dokumentation auf MSDN.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/element/scrollintoview/index.html b/files/de/web/api/element/scrollintoview/index.html new file mode 100644 index 0000000000..ccbcc3e6ea --- /dev/null +++ b/files/de/web/api/element/scrollintoview/index.html @@ -0,0 +1,85 @@ +--- +title: Element.scrollIntoView() +slug: Web/API/Element/scrollIntoView +tags: + - API + - CSSOM Views + - Experimentell + - Methode(2) + - Reference +translation_of: Web/API/Element/scrollIntoView +--- +
{{ APIRef("DOM")}}{{SeeCompatTable}}
+ +

Die Methode Element.scrollIntoView() scrolled das Element in den sichtbaren Bereich des Browsers.

+ +

Syntax

+ +
element.scrollIntoView(); // Gleich mit element.scrollIntoView(true)
+element.scrollIntoView(alignToTop); // Boolean Argument
+element.scrollIntoView(scrollIntoViewOptions); // Object Argument
+
+ +

Parameter

+ +
+
alignToTop
+
Dies ist ein {{jsxref("Boolean")}} Wert: +
    +
  • Bei true wird der obere Rand des Elements an den oberen Rand des sichtbaren Bereichs im Browser gescrolled.
    • +
  • Bei false wird der untere Rand des Elements an den unteren Rand des sichtbaren Bereichs im Browser gescrolled.
    • +
+
+
scrollIntoViewOptions
+
Ein Boolean oder Objekt mit den folgenden Optionen:
+
+ 
{
+    behavior: "auto"  | "smooth",
+    block:    "start" | "end",
+}
+
+
Wenn der Wert ein Boolean, enspricht true {block: "start"} und false {block: "end"}.
+
+ +

Beispiel

+ +
var element = document.getElementById("box");
+
+element.scrollIntoView();
+element.scrollIntoView(false);
+element.scrollIntoView({block: "end"});
+element.scrollIntoView({block: "end", behavior: "smooth"});
+
+ +

Notizen

+ +

Das Element wird eventuell nicht ganz nach oben oder unten gescrolled. Je nach Layout der anderen Elemente.

+ +

Technische Daten

+ + + + + + + + + + + + + + +
SpecificationStatusKommentar
{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}{{Spec2("CSSOM View")}}Initial definition
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Element.scrollIntoView")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/element/scrollleft/index.html b/files/de/web/api/element/scrollleft/index.html new file mode 100644 index 0000000000..90c28a203e --- /dev/null +++ b/files/de/web/api/element/scrollleft/index.html @@ -0,0 +1,83 @@ +--- +title: Element.scrollLeft +slug: Web/API/Element/scrollLeft +translation_of: Web/API/Element/scrollLeft +--- +

{{ APIRef("DOM") }}

+ +

Die Element.scrollLeft Eigenschaft setzt die Anzahl an Pixel, die der Inhalt eines Elements nach links gescrollt wird, oder liefert diese zurück.

+ +

Beachten Sie:  Wenn die Eigenschaft {{cssxref("direction")}} des Elements den Wert rtl (right-to-left) aufweist,  ist scrollLeft 0, falls der Scrollbalken ganz rechts ist (am Anfang des gescrollten Inhalts),  und nimmt zunehmend negative Werte an, wenn man gegen Ende des Inhalts scrollt.

+ +

Syntax

+ +
// Liefert die Anzahl der gescrollten Pixel
+var sLeft = element.scrollLeft;
+
+ +

sLeft ist ein Integer-Wert, der die Anzahl der Pixel repräsentiert, die element nach links gescrollt ist.

+ +
// Set the number of pixels scrolled
+element.scrollLeft = 10;
+
+ +

scrollLeft kann als Integerwert gesetzt werden. Dabei gilt:

+ + + +

Beispiel

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <style>
+        #container {
+            border: 1px solid #ccc; height: 100px; overflow: scroll; width: 100px;
+        }
+        #content {
+            background-color: #ccc; width: 250px;
+        }
+    </style>
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            var button = document.getElementById('slide');
+            button.onclick = function () {
+                document.getElementById('container').scrollLeft += 20;
+            };
+        }, false);
+    </script>
+</head>
+<body>
+    <div id="container">
+        <div id="content">Lorem ipsum dolor sit amet.</div>
+    </div>
+    <button id="slide" type="button">Slide</button>
+</body>
+</html>
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}{{Spec2("CSSOM View")}} 
+ +

Browserkompatibilität

+ +

{{Compat("api.Element.scrollLeft")}}

diff --git a/files/de/web/api/element/scrollwidth/index.html b/files/de/web/api/element/scrollwidth/index.html new file mode 100644 index 0000000000..2968c3ea64 --- /dev/null +++ b/files/de/web/api/element/scrollwidth/index.html @@ -0,0 +1,49 @@ +--- +title: Element.scrollWidth +slug: Web/API/Element/scrollWidth +tags: + - Eigenschaft + - Referenz +translation_of: Web/API/Element/scrollWidth +--- +
{{ APIRef("DOM") }}
+ +

Die schreibgeschützte Eigenschaft Element.scrollWidth liefert entweder die Breite (in Pixeln) des Inhaltes eines Elements oder die Breite des Elementes selbst, je nachdem, welche von beiden größer ist. Ist der Inhalt eines Elementes breiter als sein Inhaltsbereich (z.B. wenn Bildlaufleisten mit eingeblendet werden), dann ist die scrollWidth des Elementes größer als seine clientWidth.

+ +
+

Diese Eigenschaft rundet den Wert zu einem Integer (Ganzzahl). Sollte ein Wert mit Nachkommastellen benötigt werden, verwenden Sie {{ domxref("element.getBoundingClientRect()") }}.

+
+ +

Syntax

+ +
var xScrollWidth = element.scrollWidth;
+ +

xScrollWidth ist die Breite des Inhaltes des Elementes element in Pixeln.

+ +

Beispiel

+ +
<div id="aDiv" style="width: 100px; height: 200px; overflow: auto;">
+  FooBar-FooBar-FooBar
+</div>
+<br>
+<input
+  type="button"
+  value="Show scrollWidth"
+  onclick="alert(document.getElementById('aDiv').scrollWidth);"
+>
+ +

Spezifikation

+ +

Die Eigenschaft scrollWidth ist im CSSOM View Module definiert.

+ +

Referenzen

+ +

{{Compat("api.Element.scrollWidth")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/element/setattribute/index.html b/files/de/web/api/element/setattribute/index.html new file mode 100644 index 0000000000..292dd24a6f --- /dev/null +++ b/files/de/web/api/element/setattribute/index.html @@ -0,0 +1,48 @@ +--- +title: Element.setAttribute() +slug: Web/API/Element/setAttribute +tags: + - Attribut + - Methode(2) + - Méthode +translation_of: Web/API/Element/setAttribute +--- +
{{APIRef("DOM")}}
+ +

Fügt dem angegebenen Element ein Attribut hinzu oder ändert den Wert eines vorhandenen Attributs.

+ +

Syntax

+ +
element.setAttribute(name, value);
+
+ + + +

Beispiel

+ +
var d = document.getElementById("d1");
+
+d.setAttribute("align", "center");
+
+ +

Anmerkungen

+ +

Wenn setAttribute auf einem HTML-Element in einem HTML-Dokument aufgerufen wird, wird der Name des Attributes in Kleinbuchstaben umgewandelt.

+ +

Wenn das angegebene Attribut bereits existiert, ersetzt setAttribute den alten Wert. Falls das Attribut nicht existiert, wird es erzeugt.

+ +

Obwohl getAttribute() für fehlende Attribute null liefert, sollte man removeAttribute() statt elt.setAttribute(attr, null) verwenden um ein Attribut zu entfernen.

+ +

setAttribute() zu benutzen, um einige XUL-Attribute (vor allem value) zu ändern, verhält sich inkonsistent, da das Attribut nur den Standardwert spezifiziert. Um den aktuellen Wert zu ändern sollte man die Eigenschaften direkt verwenden. Zum Beispiel elt.value statt elt.setAttribute('value', val).

+ +
{{DOMAttributeMethods}}
+ +

Spezifikation

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