diff options
Diffstat (limited to 'files/de/web/api/element')
| -rw-r--r-- | files/de/web/api/element/classlist/index.html | 300 | ||||
| -rw-r--r-- | files/de/web/api/element/classname/index.html | 128 | ||||
| -rw-r--r-- | files/de/web/api/element/getboundingclientrect/index.html | 62 | ||||
| -rw-r--r-- | files/de/web/api/element/hasattribute/index.html | 129 | ||||
| -rw-r--r-- | files/de/web/api/element/index.html | 522 | ||||
| -rw-r--r-- | files/de/web/api/element/innerhtml/index.html | 204 | ||||
| -rw-r--r-- | files/de/web/api/element/insertadjacenthtml/index.html | 144 | ||||
| -rw-r--r-- | files/de/web/api/element/queryselector/index.html | 89 | ||||
| -rw-r--r-- | files/de/web/api/element/queryselectorall/index.html | 206 | ||||
| -rw-r--r-- | files/de/web/api/element/removeattribute/index.html | 42 | ||||
| -rw-r--r-- | files/de/web/api/element/requestfullscreen/index.html | 118 | ||||
| -rw-r--r-- | files/de/web/api/element/scrollintoview/index.html | 85 | ||||
| -rw-r--r-- | files/de/web/api/element/scrollleft/index.html | 83 | ||||
| -rw-r--r-- | files/de/web/api/element/scrollwidth/index.html | 49 | ||||
| -rw-r--r-- | files/de/web/api/element/setattribute/index.html | 48 |
15 files changed, 2209 insertions, 0 deletions
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 +--- +<div>{{APIRef("DOM")}}</div> + +<p>Das <code><strong>Element.classList</strong></code> ist eine <code>read-only</code> Eigenschaft, welche die aktuelle {{domxref("DOMTokenList")}} Sammlung der Klassen-Attribute des Elements zurückgibt.</p> + +<p>Die Benutzung von <code>classList</code> ist eine angenehme Alternative zum Ansprechen der Klassen eines Elements als die leerzeichengetrennte Zeichenfolge via {{domxref("element.className")}}. </p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">const <var>elementClasses</var> = elementNodeReference.classList; +</pre> + +<p><em>elementClasses</em> ist eine <a href="/en-US/docs/DOM/DOMTokenList">DOMTokenList</a>, welche die Klassen-Attribute der <em>elementNodeReference </em>repräsentiert. Wenn das Klassen-Attribut nicht gesetzt wurde oder <em>elementClasses.length </em>leer ist, wird 0 zurückgegeben. <code>Element.classList</code> selbst ist nur lesbar (read-only), obgleich es modifiziert werden kann, indem die Methoden <code>add()</code> und <code>remove()</code> angewendet werden.</p> + +<h2 id="Methoden">Methoden</h2> + +<dl> + <dt>add( String [, String [, ...]] )</dt> + <dd>Fügt angegebene Klassenwerte hinzu. Wenn diese Klassen bereits im Attribut des Elements vorhanden sind, werden sie ignoriert.</dd> + <dt>remove( String [, String [, ...]] )</dt> + <dd>Ausgewählte Klassenwerte entfernen.<br> + <strong>Bemerkung:</strong> Entfernen eines nicht vorhandenen Klassenwertes wirft keinen Fehler.</dd> + <dt><strong>item</strong> ( Number )</dt> + <dd>Rückgabewert nach Index in der Sammlung.</dd> + <dt><strong>toggle</strong> ( String [, force] )</dt> + <dd>Wenn nur ein Argument vorhanden ist: Klassenwert umschalten; d.h. wenn die Klasse existiert, dann <u>entfernt</u> es diese und gibt <code>false</code> zurück, wenn nicht, dann <u>fügt</u> es diese hinzu und gibt <code>true</code> zurück.</dd> + <dd>Wenn ein zweites Argument vorhanden ist: Wenn das zweite Argument auf <code>true</code> basiert, fügt es den angegebenen Klassenwert hinzu. Wenn es <code>false</code> auswertet, entfernt es ihn.</dd> + <dt>contains( String )</dt> + <dd>Überprüft, ob der angegebene Klassenwert im Klassenattribut des Elements vorhanden ist.</dd> + <dt>replace( oldClass, newClass )</dt> + <dd>Ersetzt einen vorhandenen Klassenwert.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: js notranslate">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");</pre> + +<div class="note"> +<p>Firefox-Versionen vor 26 setzen nicht die Nutzung die Nutzung von mehreren Argumenten in den Methoden add/remove/toggle um. Siehe <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014">https://bugzilla.mozilla.org/show_bug.cgi?id=814014</a></p> +</div> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush:js notranslate">// 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; + } +})(); +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Note within the HTML specification related to the {{htmlattrxref("class")}} attribute.</td> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>8</td> + <td>12</td> + <td>{{CompatGeckoDesktop(1.9.2)}}</td> + <td>10<sup>[1]</sup></td> + <td>11.50</td> + <td>5.1</td> + </tr> + <tr> + <td><code>toggle()</code> method's second argument</td> + <td>24</td> + <td>12</td> + <td>{{CompatGeckoDesktop(24)}}</td> + <td>{{CompatNo}}<sup>[2]</sup></td> + <td>15</td> + <td>7</td> + </tr> + <tr> + <td>Multiple arguments for <code>add()</code> & <code>remove()</code></td> + <td>28</td> + <td>12</td> + <td>{{CompatGeckoDesktop(26)}}</td> + <td>{{CompatNo}}</td> + <td>15</td> + <td>7</td> + </tr> + <tr> + <td><code>replace()</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("49")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>3.0</td> + <td>12</td> + <td>{{CompatGeckoMobile(1.9.2)}}</td> + <td>10<sup>[1]</sup></td> + <td>11.10</td> + <td>5.0</td> + </tr> + <tr> + <td>toggle method's second argument</td> + <td>4.4</td> + <td>12</td> + <td>{{CompatGeckoMobile(24)}}</td> + <td>{{CompatNo}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>7.0</td> + </tr> + <tr> + <td>multiple arguments for <code>add()</code> & <code>remove()</code></td> + <td>4.4</td> + <td>12</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>7.0</td> + </tr> + <tr> + <td><code>replace()</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("49")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Not supported for SVG elements. See <a href="https://connect.microsoft.com/IE/feedback/details/1046039/classlist-not-working-on-svg-elements">a report at Microsoft about that</a>.<br> + [2] Internet Explorer never implemented this. See <a href="https://connect.microsoft.com/IE/feedback/details/878564/element-classlist-toggle-does-not-support-second-parameter">a report at Microsoft about that</a>.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("element.className")}}</li> + <li>{{domxref("DOMTokenList")}}</li> +</ul> 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 +--- +<div>{{APIRef("DOM")}}</div> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p><strong>className</strong> holt und setzt den Wert des Attributs <code>class</code> eines bestimmten Elements.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>var cName</var> = <var>elementNodeReference</var>.className; +<var>elementNodeReference</var>.className = <var>cName</var>;</pre> + +<ul> + <li><var>cName</var> ist eine Variable vom Typen string, die eine Klasse oder die, durch Leerzeichen getrennte, Klassen des aktuellen Elements darstellt.</li> +</ul> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: js">let elm = document.getElementById('item'); + +if(elm.className === 'active'){ + elm.className = 'inactive'; +} else { + elm.className = 'active'; +}</pre> + +<h2 id="Notes" name="Notes">Anmerkungen</h2> + +<p>Der Name <code>className</code> wird für diese Eigenschaft anstelle von <code>class</code> benutzt, um Komplikationen mit dem Schlüsselwort "class", welches in vielen Sprachen verwendet wird um das DOM zu verändern, zu vermeiden.</p> + +<p><code>className</code> kann auch eine Instanz von {{domxref("SVGAnimatedString")}} wenn das <code>element</code> ein {{domxref("SVGElement")}} ist. Es ist besser das Attribut <code>className</code> eines Elements zu ändern, in dem {{domxref("Element.getAttribute")}} verwendet beziehungsweise {{domxref("Element.setAttribute")}}, wenn man mit SVG Elementen arbeitet.</p> + +<pre class="brush: js">elm.setAttribute('class', elm.getAttribute('class'))</pre> + +<p> </p> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-element-classname", "element.className")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompabilität">Browserkompabilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktionalität</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundsätzliche Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktionalität</th> + <th>Android webview</th> + <th>Chrome für Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundsätzliche Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("element.classList")}}</li> +</ul> 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 +--- +<div>{{APIRef("DOM")}}</div> + +<p>Die Methode <strong><code>Element.getBoundingClientRect()</code></strong> gibt die Größe eines Elementes und dessen relative Position zum Viewport zurück.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">var domRect = <a href="/de/docs/Web/API/Element">element</a>.getBoundingClientRect(); +</pre> + +<h3 id="Returns" name="Returns">Rückgabe</h3> + +<p>Der zurückgegebene Wert ist ein <a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMClientRect" title="nsIDOMClientRect">DOMRect</a> Objekt, welches die Vereinigungsmenge aller von <code><a href="/en-US/docs/DOM/element.getClientRects" title="DOM/element.getClientRects">getClientRects()</a></code> zurückgegebenen Rechtecken eines Elementes darstellt, das heißt, der CSS border-boxes, die mit dem Element verknüpft sind.</p> + +<p>Der Rückgabewert ist das kleinste Rechteck welches das komplette Element beinhaltet. Es enthält die read-only-Eigenschaften <code>left</code>, <code>top</code>, <code>right</code> ,<code>bottom</code>, <code>x</code>, <code>y</code>, <code>width</code> und <code>height</code>, welche die border-box in Pixeln beschreibt. Alle Eigenschaften, abgesehen von <code>width</code> und <code>height</code>, sind realtiv zur linken oberen Ecke des Viewports.</p> + +<div class="note"> +<p><strong>Merke: </strong>{{Gecko("1.9.1")}} fügt die Eigenschaften Breite und Höhe zu dem <code>DOMRect</code> Objekt hinzu.</p> +</div> + +<p>Leere Borderboxen werden vollständig ignoriert. Sind sämtliche Borderboxen eines Elements leer, oder entsprechen die <code>top</code> und <code>left</code> Angaben der Borderbox der ersten CSS-Box (in der Reihenfolge des Inhalts), so wird Null (zero) für <code>top</code> und <code>left</code> zurückgegeben.</p> + +<p>Ein Rechteck mit Breiten- und Höhenwerten von Null wird stattdessen zurückgegeben, und wo <code>top</code> und <code>left</code> den top-left Werten der Border-Box der ersten CSS-Box (in Reihenfolge des Inhaltes) entsprechen.</p> + +<p>Bei der Berechnung des Rechtecks werden sowohl scrollbare Elemente sowie Scrolling an sich (wie viel bereits gescrollt wurde) einbezogen. Das bedeutet, dass die <code>top</code> und <code>left</code> Eigenschaften ihre Werte verändern, sobald sich deren Scrollposition verändert (d.h. ihre Werte sind <code><em>relativ</em> </code>zum <code>Viewport</code> und nicht absolut).</p> + +<p>Will man die Position des Rechtecks in Bezug auf die Linke/Obere Ecke des <code>Dokumentes </code>haben, was der <code><em>absoluten</em></code> Position des Rechteckes entspricht, muss man zu den <code>top</code> und <code>left</code> Positionen, die Werte von <code>window.scrollX</code> und<code> window.scrollY</code>, addieren.</p> + +<p>Um Browserkompabilität zu gewährleisten, nutzen Sie <code>window.pageXOffset</code> und <code>window.pageYOffset</code> statt<code> window.scrollY</code> und <code>window.scrollX</code>. Sollten <code style="font-style: normal;">window.pageXOffset</code>, <code style="font-style: normal;">window.pageYOffset</code>, <code style="font-style: normal;">window.</code><span style="font-family: consolas,monaco,andale mono,monospace;">scrollX and</span> <code style="font-style: normal;">window.</code><span style="font-family: consolas,monaco,andale mono,monospace;">scrollY undefined sein, nutzen Sie </span><code style="font-style: normal;">(((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft</code> and <code style="font-style: normal;">(((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop</code>.</p> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush:js">// rect is a DOMRect object with four properties: left, top, right, bottom +var rect = obj.getBoundingClientRect(); +</pre> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{Compat("api.Element.getBoundingClientRect")}}</div> + +<h2 id="Specification" name="Specification">Specification</h2> + +<ul> + <li><a href="http://www.w3.org/TR/cssom-view/#the-getclientrects%28%29-and-getboundingclientrect%28%29-methods">CSSOM Views: The getClientRects() and getBoundingClientRect() methods </a></li> +</ul> + +<h3 id="Notes" name="Notes">Notes</h3> + +<p><code>getBoundingClientRect()</code> wurde erstmals im DHTML Objektmodell von MS IE implementiert.</p> + +<p>Der Rückgabewert von <code>getBoundingClientRect() </code>ist <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze">konstant</a>, es können keine weiteren Eigenschaften hinzugefügt werden.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx">MSDN: <code>getBoundingClientRect</code></a></li> + <li><a href="/en-US/docs/DOM/element.getClientRects"><code>getClientRects()</code></a></li> +</ul> 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 +--- +<div>{{APIRef("DOM")}}</div> + +<p><code>Die Methode </code><strong><code>Element.hasAttribute()</code></strong> nimmt einen <strong>String</strong> als Argument und gibt einen <strong>Boolean</strong> zurück. Der als Argument übergebene <strong>String </strong>spezifiziert das gemeinte Attribut und der Rückabe Wert gibt an, ob dieses Attribut in dem jeweiligen Element vorkommt . </p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>var <em>result</em></var> = <em><var>element</var></em>.hasAttribute(<em><var>name</var></em>); +</pre> + +<dl> + <dt><code>result</code></dt> + <dd>Rückgabewert, wahr oder falsch.</dd> + <dt><code>name</code></dt> + <dd>Ein <strong>String</strong>, der das jeweilige Attribut spezifiziert.</dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush:js">var foo = document.getElementById("foo"); +if (foo.hasAttribute("bar")) { + // do something +} +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush:js">;(function(prototype) { + prototype.hasAttribute = prototype.hasAttribute || function(name) { + return !!(this.attributes[name] && + this.attributes[name].specified); + } +})(Element.prototype); +</pre> + +<h2 id="Notizen">Notizen</h2> + +<div>{{DOMAttributeMethods}}</div> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-hasattribute', 'Element.hasAttribute()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Von {{SpecName('DOM3 Core')}}, verlegt von {{domxref("Node")}} nach {{domxref("Element")}}</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Keine Veränderungen zu {{SpecName('DOM2 Core')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Initiale Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>8.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> 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 +--- +<p>{{ APIRef("DOM") }}</p> + +<p><span class="seoSummary">The <strong><code>Element</code></strong> 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 <code>Element</code> but add additional functionality.</span> 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.</p> + +<p>Languages outside the realm of the Web platform, like XUL through the <code>XULElement</code> interface, also implement it.</p> + +<h2 id="Properties" name="Properties">Properties</h2> + +<p><em>Inherits properties from its parents {{domxref("Node")}}, and its own parent, {{domxref("EventTarget")}}, and implements those of {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, {{domxref("NonDocumentTypeChildNode")}}, </em>and {{domxref("Animatable")}}.</p> + +<dl> + <dt>{{ domxref("Element.attributes") }} {{readOnlyInline}}</dt> + <dd>Returns a {{ domxref("NamedNodeMap") }} that lists all attributes associated with the element.</dd> + <dt>{{ domxref("ParentNode.childElementCount") }}</dt> + <dd>Is a {{jsxref("Number")}} representing the number of child nodes that are elements.</dd> + <dt>{{ domxref("ParentNode.children") }}</dt> + <dd>Is a live {{ domxref("HTMLCollection") }} containing all child elements of the element, as a collection.</dd> + <dt>{{ domxref("Element.classList") }} {{readOnlyInline}}</dt> + <dd>Returns a {{ domxref("DOMTokenList") }} containing the list of class attributes.</dd> + <dt>{{ domxref("Element.className") }}</dt> + <dd>Is a {{domxref("DOMString")}} representing the class of the element.</dd> + <dt>{{ domxref("Element.clientHeight") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the inner height of the element.</dd> + <dt>{{ domxref("Element.clientLeft") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the width of the left border of the element.</dd> + <dt>{{ domxref("Element.clientTop") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the width of the top border of the element.</dd> + <dt>{{ domxref("Element.clientWidth") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the inner width of the element.</dd> + <dt>{{ domxref("ParentNode.firstElementChild") }}</dt> + <dd>Is a {{ domxref("Element") }}, the first direct child element of an element, or <code>null</code> if the element has no child elements.</dd> + <dt>{{ domxref("Element.id") }}</dt> + <dd>Is a {{domxref("DOMString")}} representing the id of the element.</dd> + <dt>{{ domxref("Element.innerHTML") }} {{experimental_inline}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the markup of the element's content.</dd> + <dt>{{ domxref("ParentNode.lastElementChild") }}</dt> + <dd>Is a {{ domxref("Element") }}, the last direct child element of an element, or <code>null</code> if the element has no child elements.</dd> + <dt>{{ domxref("NonDocumentTypeChildNode.nextElementSibling") }}</dt> + <dd>Is a {{ domxref("Element") }}, the element immediately following the given one in the tree, or <code>null</code> if there's no sibling node.</dd> + <dt>{{ domxref("Element.outerHTML") }} {{experimental_inline}}</dt> + <dd>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.</dd> + <dt>{{ domxref("NonDocumentTypeChildNode.previousElementSibling") }}</dt> + <dd>Is a {{ domxref("Element") }}, the element immediately preceding the given one in the tree, or <code>null</code> if there is no sibling element.</dd> + <dt>{{ domxref("Element.scrollHeight") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the scroll view height of an element.</dd> + <dt>{{ domxref("Element.scrollLeft") }} {{experimental_inline}}</dt> + <dd>Is a {{jsxref("Number")}} representing the left scroll offset of the element.</dd> + <dt>{{ domxref("Element.scrollLeftMax") }} {{non-standard_inline}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the maximum left scroll offset possible for the element.</dd> + <dt>{{ domxref("Element.scrollTop") }} {{experimental_inline}}</dt> + <dd>Is a {{jsxref("Number")}} representing the top scroll offset the an element.</dd> + <dt>{{ domxref("Element.scrollTopMax") }} {{non-standard_inline}} {{readOnlyInline}}</dt> + <dd>Returns a{{jsxref("Number")}} representing the maximum top scroll offset possible for the element.</dd> + <dt>{{ domxref("Element.scrollWidth") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the scroll view width of the element.</dd> + <dt>{{domxref("Element.shadowRoot") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>...</dd> + <dt>{{ domxref("Element.tagName") }} {{readOnlyInline}}</dt> + <dd>Returns a {{domxref("String")}} with the name of the tag for the given element.</dd> + <dt>{{ domxref("Element.undoManager")}} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Returns the {{domxref("UndoManager")}} associated with the element.</dd> + <dt>{{ domxref("Element.undoScope")}} {{experimental_inline}}</dt> + <dd>Is a {{jsxref("Boolean")}} indicating if the element is an undo scope host, or not.</dd> +</dl> + +<h3 id="Handlers" name="Handlers">Event handlers</h3> + +<dl> + <dt>{{ domxref("Element.ongotpointercapture") }}</dt> + <dd>…</dd> + <dt>{{ domxref("Element.onlostpointercapture") }}</dt> + <dd>…</dd> + <dt>{{ domxref("Element.onwheel") }} {{ non-standard_inline() }}</dt> + <dd>Returns the event handling code for the <code>wheel</code> event.</dd> +</dl> + +<h2 id="Methods" name="Methods">Methods</h2> + +<p><em>Inherits methods from its parents {{domxref("Node")}}, and its own parent, {{domxref("EventTarget")}}<em>, and implements those of {{domxref("ParentNode")}}, {{domxref("ChildNode")}}<em>, {{domxref("NonDocumentTypeChildNode")}}, </em></em>and {{domxref("Animatable")}}.</em></p> + +<dl> + <dt>{{ domxref("EventTarget.addEventListener()") }}</dt> + <dd>Registers an event handler to a specific event type on the element.</dd> + <dt>{{ domxref("Element.closest()")}} {{experimental_inline}}</dt> + <dd>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.</dd> + <dt>{{ domxref("Element.createShadowRoot()")}} {{experimental_inline}}</dt> + <dd>…</dd> + <dt>{{ domxref("EventTarget.dispatchEvent()") }}</dt> + <dd>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.</dd> + <dt>{{domxref("Element.find()")}}{{experimental_inline}}</dt> + <dd>...</dd> + <dt>{{domxref("Element.findAll()")}}{{experimental_inline}}</dt> + <dd>...</dd> + <dt>{{domxref("Animatable.getAnimationPlayers()")}} {{experimental_inline}}</dt> + <dd>…</dd> + <dt>{{ domxref("Element.getAttribute()") }}</dt> + <dd>Retrieves the value of the named attribute from the current node and returns it as an {{jsxref("Object")}}.</dd> + <dt>{{ domxref("Element.getAttributeNS()") }}</dt> + <dd>Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an {{jsxref("Object")}}.</dd> + <dt>{{ domxref("Element.getAttributeNode()") }} {{obsolete_inline}}</dt> + <dd>Retrievse the node representation of the named attribute from the current node and returns it as an {{ domxref("Attr") }}.</dd> + <dt>{{ domxref("Element.getAttributeNodeNS()") }} {{obsolete_inline}}</dt> + <dd>Retrieves the node representation of the attribute with the specified name and namespace, from the current node and returns it as an {{ domxref("Attr") }}.</dd> + <dt>{{ domxref("Element.getBoundingClientRect()") }}<code> </code>{{experimental_inline}}</dt> + <dd>...</dd> + <dt>{{ domxref("Element.getClientRects()") }} {{experimental_inline}} TYPE of returnvalue????</dt> + <dd>Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.</dd> + <dt>{{domxref("Element.getDestinationInsertionPoints()")}} {{experimental_inline}}</dt> + <dd>…</dd> + <dt>{{ domxref("Element.getElementsByClassName()") }}</dt> + <dd>Returns a live {{ domxref("HTMLCollection") }} that contains all descendant of the current element that posses the list of classes given in parameter.</dd> + <dt>{{ domxref("Element.getElementsByTagName()") }}</dt> + <dd>Returns a live {{ domxref("HTMLCollection") }} containing all descendant elements, of a particular tag name, from the current element.</dd> + <dt>{{ domxref("Element.getElementsByTagNameNS()") }}</dt> + <dd>Returns a live {{ domxref("HTMLCollection") }} containing all descendant elements, of a particular tag name and namespace, from the current element.</dd> + <dt>{{ domxref("Element.hasAttribute()") }}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute or not.</dd> + <dt>{{ domxref("Element.hasAttributeNS()") }}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute, in the specified namespace, or not.</dd> + <dt>{{ domxref("Element.insertAdjacentHTML") }} {{experimental_inline}}</dt> + <dd>Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.</dd> + <dt>{{ domxref("Element.matches()") }}<code> </code>{{experimental_inline}}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating whether or not the element would be selected by the specified selector string.</dd> + <dt>{{ domxref("Element.querySelector()") }}</dt> + <dd>Returns {{ domxref("Node") }}...</dd> + <dt>{{ domxref("Element.querySelectorAll") }}</dt> + <dd>Returns a {{ domxref("NodeList") }}...</dd> + <dt>{{ domxref("Element.releasePointerCapture")}} {{experimental_inline}}</dt> + <dd>…</dd> + <dt>{{domxref("ChildNode.remove()")}}</dt> + <dd>Removes the element from the children list of its parent.</dd> + <dt>{{ domxref("Element.removeAttribute()") }}</dt> + <dd>Removes the named attribute from the current node.</dd> + <dt>{{ domxref("Element.removeAttributeNS()") }}</dt> + <dd>Removes the attribute with the specified name and namespace, from the current node.</dd> + <dt>{{ domxref("Element.removeAttributeNode()") }} {{obsolete_inline}}</dt> + <dd>Removes the node representation of the named attribute from the current node.</dd> + <dt>{{ domxref("EventTarget.removeEventListener()") }}</dt> + <dd>Removes an event listener from the element.</dd> + <dt>{{ domxref("Element.requestFullscreen()") }} {{experimental_inline}}</dt> + <dd>Asynchronously asks the browser to make the element full-screen.</dd> + <dt>{{ domxref("Element.requestPointerLock()")}} {{experimental_inline}}</dt> + <dd>Allows to asynchronously ask for the pointer to be locked on the given element.</dd> +</dl> + +<dl> + <dt>{{ domxref("Element.scrollIntoView()") }} {{experimental_inline}}</dt> + <dd>Scrolls the page until the element gets into the view.</dd> + <dt>{{ domxref("Element.setAttribute()") }}</dt> + <dd>Sets the value of a named attribute of the current node.</dd> + <dt>{{ domxref("Element.setAttributeNS()") }}</dt> + <dd>Sets the value of the attribute with the specified name and namespace, from the current node.</dd> + <dt>{{ domxref("Element.setAttributeNode()") }} {{obsolete_inline}}</dt> + <dd>Sets the node representation of the named attribute from the current node.</dd> + <dt>{{ domxref("Element.setAttributeNodeNS()") }} {{obsolete_inline}}</dt> + <dd>Setw the node representation of the attribute with the specified name and namespace, from the current node.</dd> + <dt>{{ domxref("Element.setCapture()") }} {{non-standard_inline}}</dt> + <dd>Sets up mouse event capture, redirecting all mouse events to this element.</dd> + <dt>{{domxref("Element.setPointerCapture()")}}</dt> + <dd>…</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Web Animations", '', '')}}</td> + <td>{{Spec2("Web Animations")}}</td> + <td>Added the <code>getAnimationPlayers()</code> method.</td> + </tr> + <tr> + <td>{{SpecName('Undo Manager', '', 'Element')}}</td> + <td>{{Spec2('Undo Manager')}}</td> + <td>Added the <code>undoScope</code> and <code>undoManager</code> properties.</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>Added the following event handlers: <code>ongotpointercapture</code> and <code>onlostpointercapture</code>.<br> + Added the following methods: <code>setPointerCapture()</code> and <code>releasePointerCapture()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 2', '#interface-definitions', 'Element')}}</td> + <td>{{Spec2('Selectors API Level 2')}}</td> + <td>Added the following methods:<code> matches()</code> (implemented as <code>mozMatchesSelector()</code>), <code>find()</code>, <code>findAll()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td> + <td>{{Spec2('Selectors API Level 1')}}</td> + <td>Added the following methods: <code>querySelector()</code> and <code>querySelectorAll()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>Added the <code>requestPointerLock()</code> method.</td> + </tr> + <tr> + <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td> + <td>{{Spec2('Fullscreen')}}</td> + <td>Added the <code>requestFullscreen()</code> method.</td> + </tr> + <tr> + <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('DOM Parsing')}}</td> + <td>Added the following properties: <code>innerHTML</code>, and <code>outerHTML</code>.<br> + Added the following method: <code>insertAdjacentHTML()</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Added the following properties: <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code>, and <code>clientHeight</code>.<br> + Added the following methods: <code>getClientRects()</code>, <code>getBoundingClientRect()</code>, and <code>scrollIntoView()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td> + <td>{{Spec2('Element Traversal')}}</td> + <td>Added inheritance of the {{domxref("ElementTraversal")}} interface.</td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Removed the following methods: <code>closest()</code>, <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>.<br> + Removed the <code>schemaTypeInfo</code> property.<br> + Modified the return value of <code>getElementsByTag()</code> and <code>getElementsByTagNS()</code>.<br> + Moved <code>hasAttributes()</code> form the <code>Node</code> interface to this one.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Added the following methods: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>. These methods were never implemented and have been removed in later specifications.<br> + Added the <code>schemaTypeInfo</code> property. This property was never implemented and has been removed in later specifications.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>The <code>normalize()</code> method has been moved to {{domxref("Node")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0</td> + </tr> + <tr> + <td><code>children</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>7.0 with a significant bug [1]<br> + 9.0 according to the spec</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>childElementCount</code>, <code>nextElementSibling</code>, <code>previousElementSibling</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>firstElementChild</code>, <code>lastElementChild</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>classList</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.2")}}</td> + <td> </td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>outerHTML</code> {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("11")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>clientLeft</code>, <code>clientTop</code> {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>getBoundingClientRect()</code>, <code>getClientRects()</code> {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>querySelector()</code>, <code>querySelectorAll()</code></td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>8.0</td> + <td>10.0</td> + <td>3.2 (525.3)</td> + </tr> + <tr> + <td><code>insertAdjacentHTML()</code> {{experimental_inline}}</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("8")}}</td> + <td>4.0</td> + <td>7.0</td> + <td>4.0 (527)</td> + </tr> + <tr> + <td><code>setCapture() </code>{{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>oncopy</code>, <code>oncut</code>, <code>onpaste</code> {{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td> </td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>onwheel</code> {{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("17")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>ongotpointercapture</code>, <code>onlostpointercapture</code>, <code>setPointerCapture()</code>, and <code>releasePointerCapture()</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.0 {{property_prefix("MS")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>matches()</code> {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}} with the non-standard name <code>webkitMatchesSelector</code></td> + <td>{{CompatGeckoDesktop("1.9.2")}} with the non-standard name <code>mozMatchesSelector</code><br> + {{CompatGeckoDesktop("34")}} with the standard name</td> + <td>9.0 with the non-standard name <code>msMatchesSelector</code></td> + <td>11.5 with the non-standard name <code>oMatchesSelector</code><br> + 15.0 with the non-standard name <code>webkitMatchesSelector</code></td> + <td>5.0 with the non-standard name <code>webkitMatchesSelector</code></td> + </tr> + <tr> + <td><code>find()</code> and <code>findAll()</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>requestPointerLock()</code></td> + <td>16.0 {{property_prefix("webkit")}}, behind an about:flags<br> + 22.0 {{property_prefix("webkit")}} (with special cases, progressively lifted see [2])</td> + <td>{{CompatGeckoDesktop("14")}}{{property_prefix("moz")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>requestFullscreen()</code></td> + <td>14.0 {{property_prefix("webkit")}}</td> + <td>{{CompatGeckoDesktop("10")}} {{property_prefix("moz")}}</td> + <td>11.0 {{property_prefix("ms")}}</td> + <td>12.10<br> + 15.0 {{property_prefix("webkit")}}</td> + <td>5.1 {{property_prefix("webkit")}}</td> + </tr> + <tr> + <td><code>undoManager</code> and <code>undoScope</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}} (behind the <code>dom.undo_manager.enabled</code> pref)</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>attributes</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("22")}}<br> + Before this it was available via the {{domxref("Node")}} interface that any <code>element</code> inherits.</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>scrollTopMax()</code> and <code>scrollLeftMax()</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("16")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>closest()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("35")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>hasAttributes()</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}} (on the {{domxref("Node")}} interface)<br> + {{CompatGeckoDesktop("35")}} (on this interface</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0</td> + </tr> + <tr> + <td><code>scrollTopMax()</code> and <code>scrollLeftMax()</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("16")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>closest()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("35")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>hasAttributes()</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}} (on the {{domxref("Node")}} interface)<br> + {{CompatGeckoMobile("35")}} (on this interface</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[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.</p> + +<p>[2] Chrome 16 allowed <code>webkitRequestPointerLock()</code> 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 <code>webkit-allow-pointer-lock</code> is set to the {{htmlattrxref("sandbox", "iframe")}} attribute.</p> 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 +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">Die {{domxref("Element")}} Eigenschaft <strong><code>innerHTML</code></strong> ruft das im Element enthaltene HTML-oder XML-Markup ab oder legt dieses fest.</span></p> + +<div class="note"><strong>Hinweis: </strong>Wenn ein {{HTMLElement("div")}}, {{HTMLElement("span")}} oder {{HTMLElement("noembed")}}-Knoten einen untergeordneten Textknoten mit den Zeichen <code>&</code>, <code><</code> oder <code>></code> enthält, gibt <code>innerHTML</code> diese Zeichen als ihre entsprechende HTML-Entitäten <code>"&amp;"</code>, <code>"&lt;"</code> bzw. <code>"&gt;"</code> zurück. Verwenden Sie {{domxref("Node.textContent")}}, um eine reine Kopie des Inhalts dieser Textknoten zu erhalten.</div> + +<p>Verwenden Sie die Methode {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}, um den HTML-Code in das Dokument einzufügen, anstatt den Inhalt eines Elements zu ersetzen.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">const <var>content</var> = <var>element</var>.innerHTML; + +<var>element</var>.innerHTML = <var>htmlString</var>; +</pre> + +<h3 id="Wert">Wert</h3> + +<p>Ein {{domxref("DOMString")}}, das die HTML-Serialisierung der Nachkommen des Elements enthält. Wenn Sie den Wert von <code>innerHTML</code> festlegen, werden alle Nachkommen des Elements entfernt und durch Knoten ersetzt, die durch Analysieren des in <em>htmlString</em> angegebenen HTML-Codes erstellt werden.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<dl> + <dt><code>SyntaxError</code></dt> + <dd>Es wurde versucht, den Wert von <code>innerHTML</code> mit einem nicht ordnungsgemäß formatierten HTML-String festzulegen.</dd> + <dt><code>NoModificationAllowedError</code></dt> + <dd>Es wurde versucht, den HTML-Code in einen Knoten einzufügen, dessen übergeordnetes Element {{domxref("Document")}} ist.</dd> +</dl> + +<h2 id="Nutzungshinweise">Nutzungshinweise</h2> + +<p>Die <code>innerHTML</code>-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.</p> + +<h3 id="HTML-Inhalte_eines_Elements_auslesen">HTML-Inhalte eines Elements auslesen</h3> + +<p>Das Lesen von <code>innerHTML</code> bewirkt, dass der Benutzer-Agent das HTML- oder XML-Fragment serialisiert, das aus den Nachkommen des Elements besteht. Der resultierende String wird zurückgegeben.</p> + +<pre class="brush: js">let contents = myElement.innerHTML;</pre> + +<p>Auf diese Weise können Sie das HTML-Markup der Inhaltsknoten des Elements anzeigen.</p> + +<div class="note"> +<p><strong>Hinweis:</strong> 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.</p> +</div> + +<h3 id="Inhalte_eines_Element_ersetzen">Inhalte eines Element ersetzen</h3> + +<p>Durch das Festlegen des Wertes von <code>innerHTML</code> können Sie den vorhandenen Inhalt eines Elements problemlos durch neuen Inhalt ersetzen.</p> + +<p>Beispielsweise können Sie den gesamten Inhalt eines Dokuments löschen, indem Sie den Inhalt des Attributs {{domxref("Document.body", "body")}} löschen:</p> + +<pre class="brush: js">document.body.innerHTML = "";</pre> + +<p>In diesem Beispiel wird das aktuelle HTML-Markup des Dokuments abgerufen und die Zeichen <code>"<"</code> durch die HTML-Entität <code>"&lt;"</code> 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 <code>innerHTML</code> in diesen neuen String geändert. Als Ergebnis wird der Dokumentinhalt durch eine Anzeige des gesamten Quellcodes der Seite ersetzt.</p> + +<pre class="brush: js">document.documentElement.innerHTML = "<pre>" + + document.documentElement.innerHTML.replace(/</g,"&lt;") + + "</pre>";</pre> + +<h4 id="Unter_der_Haube">Unter der Haube</h4> + +<p>Was passiert genau, wenn Sie den Wert von <code>innerHTML</code> festlegen? Der Benutzer-Agent führt dabei die folgenden Schritte aus:</p> + +<ol> + <li>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.</li> + <li>Wenn das Element, dessen Inhalt ersetzt wird, ein {{HTMLElement("template")}}-Element ist, wird das Attribut {{domxref("HTMLTemplateElement.content", "content")}} des Elements <code><template></code> durch das neue <code>DocumentFragment</code> ersetzt, welches in Schritt 1 erstellt wurde.</li> + <li>Bei allen anderen Elementen wird der Inhalt des Elements durch die Knoten im neuen <code>DocumentFragment</code> ersetzt.</li> +</ol> + +<h3 id="Sicherheitsüberlegungen">Sicherheitsüberlegungen</h3> + +<p>Es ist nicht ungewöhnlich, dass <code>innerHTML</code> 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.</p> + +<pre class="brush: js">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</pre> + +<p>Obwohl dies wie ein {{interwiki("wikipedia", "cross-site scripting")}}-Angriff aussieht, ist das Ergebnis harmlos. HTML5 schreibt vor, dass ein mit <code>innerHTML</code> eingefügtes {{HTMLElement("script")}}-Tag <a href="https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">nicht ausgeführt werden soll</a>.</p> + +<p>Es gibt jedoch Möglichkeiten, JavaScript auszuführen, ohne {{HTMLElement("script")}}-Elemente zu verwenden. Daher besteht immer ein Sicherheitsrisiko, wenn Sie <code>innerHTML</code> verwenden, um Strings festzulegen, über die Sie keine Kontrolle haben. Zum Beispiel:</p> + +<pre class="brush: js">const name = "<img src='x' onerror='alert(1)'>"; +el.innerHTML = name; // zeigt den alert</pre> + +<p>Aus diesem Grund wird empfohlen, <code>innerHTML</code> 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.</p> + +<div class="blockIndicator warning"> +<p><strong>Warnung:</strong> Wenn Ihr Projekt einer Sicherheitsüberprüfung unterzogen wird, führt die Verwendung von <code>innerHTML</code> höchstwahrscheinlich dazu, dass Ihr Code abgelehnt wird. <a href="https://wiki.mozilla.org/Add-ons/Reviewers/Guide/Reviewing#Step_2:_Automatic_validation">Wenn Sie beispielsweise <code>innerHTML</code></a> in einer <a href="/de/docs/Mozilla/Add-ons/WebExtensions">Browsererweiterung</a> verwenden und die Erweiterung bei <a href="https://addons.mozilla.org/">addons.mozilla.org</a> einreichen, wird sie den automatisierten Überprüfungsprozess nicht bestehen.</p> +</div> + +<h2 id="Beispiel">Beispiel</h2> + +<p>In diesem Beispiel wird mit <code>innerHTML</code> ein Mechanismus zum Protokollieren von Nachrichten in einem Feld auf einer Webseite erstellt.</p> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">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..."); +</pre> + +<p>Die Funktion <code>log()</code> 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 <code>"log"</code> angehängt.</p> + +<p>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")}}):</p> + +<pre class="brush: js">function logEvent(event) { + var msg = "Event <strong>" + event.type + "</strong> at <em>" + + event.clientX + ", " + event.clientY + "</em>"; + log(msg); +}</pre> + +<p>Dann verwenden wir dies als Ereignishandler für eine Reihe von Mausereignissen in der Box, die unser Protokoll enthält:</p> + +<pre class="brush: js">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);</pre> + +<h3 id="HTML">HTML</h3> + +<p>Das HTML für unser Beispiel ist denkbar einfach.</p> + +<pre class="brush: html"><div class="box"> + <div><strong>Log:</strong></div> + <div class="log"></div> +</div></pre> + +<p>Das {{HTMLElement("div")}} mit der Klasse <code>"box"</code> ist nur ein Container für Layoutzwecke, der den Inhalt mit einem Rahmen darstellt. Der <code><div></code>, dessen Klasse <code>"log"</code> ist, ist der Container für den Protokolltext.</p> + +<h3 id="CSS">CSS</h3> + +<p>Das folgende CSS formatiert unseren Beispielinhalt.</p> + +<pre class="brush: css">.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; +}</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>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.</p> + +<p>{{EmbedLiveSample("Example", 640, 350)}}</p> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM Parsing', '#dom-element-innerhtml', 'Element.innerHTML')}}</td> + <td>{{Spec2('DOM Parsing')}}</td> + <td>Initiale Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("api.Element.innerHTML")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("Node.textContent")}} und {{domxref("Node.innerText")}}</li> + <li>{{domxref("Element.insertAdjacentHTML()")}}</li> + <li>HTML in einen DOM-Baum parsen: {{domxref("DOMParser")}}</li> + <li>Serialisieren von XML oder HTML in einen DOM-Baum: {{domxref("XMLSerializer")}}</li> +</ul> 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 +--- +<div>{{APIRef("DOM")}}</div> + +<h2 id="Summary" name="Summary">Zusammenfassung</h2> + +<p><code>insertAdjacentHTML()</code> 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.<br> + Eine zusätzlich erforderliche Serialisierung wird vermieden, was einen deutlichen Geschwindigkeitsvorteil gegenüber einer <code>innerHTML</code> Manipulation ergibt.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre><em>element</em>.insertAdjacentHTML(<em>position</em>, <em>text</em>);</pre> + +<p><code>position</code> beschreibt den Einfügepunkt relativ zu einem Element und muss einem der folgenden Schlüsselbegriffe entsprechen:</p> + +<dl> + <dt><code style="color: red;">'beforebegin'</code></dt> + <dd>Vor dem <code>element</code> selbst.</dd> + <dt><code style="color: green;">'afterbegin'</code></dt> + <dd>Innerhalb des <code>element</code>, direkt <em>vor dessen erstem</em> Kind-Objekt. </dd> + <dt><code style="color: blue;">'beforeend'</code></dt> + <dd>Innerhalb des <code>element</code>, direkt <em>nach dessen letztem</em> Kind-Objekt.</dd> + <dt><code style="color: magenta;">'afterend'</code></dt> + <dd>Nach dem <code>element</code> selbst.</dd> +</dl> + +<p><code>text</code> ist die Zeichenfolge, die als HTML oder XML interpretiert und in den DOM-Baum eingesetzt wird.</p> + +<h3 id="Verdeutlichung_der_position_Bezeichner">Verdeutlichung der position Bezeichner</h3> + +<pre><!-- <strong><code style="color: red;">beforebegin</code></strong> --> +<code style="font-weight: bold;"><p></code> + <!-- <strong><code style="color: green;">afterbegin</code></strong> --> + foo + <!-- <strong><code style="color: blue;">beforeend</code></strong> --> +<code style="font-weight: bold;"></p></code> +<!-- <strong><code style="color: magenta;">afterend</code></strong> --></pre> + +<div class="note"><strong>Hinweis: </strong> Die <code>beforebegin</code> und <code>afterend</code> Positionierungen wirken nur, wenn der Knoten innerhalb des DOM-Baums steht und ein Eltern-Element hat. </div> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush: js">// <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></pre> + +<h2 id="Specification" name="Specification">Anmerkungen</h2> + +<h3 id="Sicherheitsaspekte">Sicherheitsaspekte</h3> + +<p>Beim Einfügen von HTML in eine Seite sollten keinesfalls unbehandelte Benutzereingaben genutzt werden (siehe 'Escaping'). </p> + +<p>Für das Einfügen reinen Texts sollte statt <code>insertAdjacentHTML</code> besser <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent" title="The Node.textContent property represents the text content of a node and its descendants.">node.textContent</a></code> benutzt werden. Diese Methode interpretiert Parameter nicht als HTML, sondern fügt puren Text ein.</p> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Beschreibung</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}</td> + <td>{{ Spec2('DOM Parsing') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser Kompatibilität</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>grundsätzlich<br> + unterstützt</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("8.0") }}</td> + <td>4.0</td> + <td>7.0</td> + <td>4.0 (527)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>grundsätzlich<br> + unterstützt</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("8.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("Element.insertAdjacentElement()")}}</li> + <li>{{domxref("Element.insertAdjacentText()")}}</li> + <li><a class="external" href="https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org Gastbeitrag</a><span class="external"> von Henri Sivonen mit Testergebnissen, die Geschwindigkeitsvorteile von insertAdjacentHTML in bestimmten Fällen aufzeigen.</span></li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Gibt das erste Unterelement des Elements, von dem es aufgerufen wird, zurück, auf das die angegebenen Selektoren zutreffen.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>element</var> = baseElement.querySelector(<em>selector</em>s); +</pre> + +<ul> + <li><code>element</code> und <code>baseElement</code> sind {{domxref("element")}}-Objekte.</li> + <li><code>selectors</code> ist eine Gruppe von <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">selectors</a>.</li> +</ul> + +<h2 id="Example" name="Example">Beispiel</h2> + +<p>In diesem Beispiel wird das erste <code>style</code> Element aus dem body Element zurückgegeben, das den type <code>text/css</code> oder keinen type hat.</p> + +<pre class="brush:js">var el = document.body.querySelector("style[type='text/css'], style:not([type])"); +</pre> + +<h2 id="Notes" name="Notes">Bemerkungen</h2> + +<p>Gibt <code>null</code> zurück, wenn keine Elemente gefunden werden, andernfalls das Element.</p> + +<p>Eine <code>SYNTAX_ERR</code> Ausnahme tritt auf, wenn die angegebenen Selektoren ungültig sind.</p> + +<p><span style="font-family: Courier New;"><span>querySelector()</span></span> wurde in der WebApps API eingeführt.</p> + +<p>Das Argument <code>querySelector</code> muss der CSS Syntax folgen. Siehe {{domxref("document.querySelector")}} für konkrete Beispiele.</p> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>Support</th> + <th>Anmerkungen</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>8</td> + <td>Nur CSS 2.1 Selektoren (IE8)</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td><strong>3.5</strong> (1.9.1)</td> + <td> </td> + </tr> + <tr> + <td>Opera</td> + <td>10</td> + <td> </td> + </tr> + <tr> + <td>Chrome</td> + <td>1</td> + <td> </td> + </tr> + <tr> + <td>Safari (webkit)</td> + <td>3.2 (525.3)</td> + <td><a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=16587">webk.it/16587</a></td> + </tr> + </tbody> +</table> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<ul> + <li>{{spec("http://www.w3.org/TR/selectors-api/","Selectors API Level 1","rec")}}</li> + <li>{{spec("http://www.w3.org/TR/selectors-api2/","Selectors API Level 2","wd")}}</li> + <li>{{spec("http://dev.w3.org/2006/webapi/selectors-api2/","Selectors API Level 2","ed")}}</li> +</ul> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/DOM/Element.querySelectorAll"><code>element.querySelectorAll</code></a></li> + <li><a href="/en-US/docs/DOM/Document.querySelector"><code>document.querySelector</code></a></li> + <li><a href="/en-US/docs/DOM/Document.querySelectorAll"><code>document.querySelectorAll</code></a></li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector">Codeausschnitte für querySelector</a></li> +</ul> 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 +--- +<div>{{APIRef("DOM")}}</div> + +<h2 id="Summary" name="Summary">Summary</h2> + +<p>Gibt eine statische <a href="/en-US/docs/DOM/NodeList" title="DOM/NodeList"><code>NodeList</code></a> aller Elemente absteigend des Elements, auf welchem querySelectorAll ausgeführt wird, die mit den angegebenen CSS Selektoren übereinstimmen.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>elementList</em> = baseElement.querySelectorAll(<em>selectors</em>); +</pre> + +<p>wobei:</p> + +<dl> + <dt><code>elementList</code></dt> + <dd>ist statische Node Liste [<code> NodeList[elements]</code> <code>] mit</code> <a href="/en-US/docs/DOM/element" title="DOM/Element">element</a> Objekten.</dd> + <dt><code>baseElement</code></dt> + <dd>ist ein <a href="/en-US/docs/DOM/element" title="DOM/element">element</a> Objekt.</dd> + <dt><code>selectors</code></dt> + <dd>ist eine Gruppe von <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">Selektoren</a> die mit dem Element im DOM übereinstimmen soll. </dd> +</dl> + +<h2 id="Example" name="Example">Beispiele</h2> + +<p>Dieses Beispiel gibt eine Liste der <code>p</code> Elementen im HTML body zurück:</p> + +<pre class="brush: js">let matches = document.body.querySelectorAll('p'); +</pre> + +<p>Dieses Beispiel gibt eine Liste der <code>p</code> Unter-Elementen eines Containers, dessen Überobjekt ein <code>div</code> mit der Klasse 'highlighted' ist:</p> + +<pre class="brush:js">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" +</pre> + +<p>Dieses Beispiel gibt eine Liste der <code>iframe</code> Elementen die ein <strong>data</strong> Attribut 'src' besitzen:</p> + +<pre class="brush: js">let matches = el.querySelectorAll('iframe[data-src]'); +</pre> + +<h2 id="Notes" name="Notes">Bemerkungen</h2> + +<p>If the specified "selectors" are not found inside the DOM of the page, the method <code>queryselectorAll</code> returns an empty NodeList as specified below:</p> + +<pre class="brush: js">> 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</pre> + +<p><code>querySelectorAll()</code> was introduced in the WebApps API.</p> + +<p>The string argument pass to <code>querySelectorAll</code> must follow the CSS syntax. See {{domxref("document.querySelector")}} for a concrete example.</p> + +<p>We could access a single item inside the NodeList in the following way:</p> + +<pre class="brush: js">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" +</pre> + +<p>We could iterate inside a NodeList with the construct <code>for(....) {...} </code>as in the following code:</p> + +<pre class="brush: js"> let x = document.body.querySelectorAll('.highlighted'); + let index = 0; + for( index=0; index < x.length; index++ ) { + console.log(x[index]); + }</pre> + +<p>So in the above way, it is possible to manage and modify the behaviour of the page.</p> + +<h2 id="Quirks">Quirks</h2> + +<p><code>querySelectorAll()</code> behaves differently than most common JavaScript DOM libraries, which might lead to unexpected results:</p> + +<pre class="brush: html"><div class="outer"> + <div class="select"> + <div class="inner"> + </div> + </div> +</div></pre> + +<pre class="brush: js">let select = document.querySelector('.select'); +let inner = select.querySelectorAll('.outer .inner'); +inner.length; // 1, not 0! +</pre> + +<p>In this example, when selecting <code>.outer .inner</code> in the context of <code>.select</code>, .<code>inner</code> is still found, even though <code>.outer</code> is not a descendant of the baseElement (<code>.select</code>).<br> + <code>querySelectorAll() </code>only verifies that the last element in the selector is within the baseElement.</p> + +<p>The <code><a href="/en-US/docs/Web/CSS/:scope">:scope</a></code> pseudo-class restores the expected behavior, only matching selectors on descendants of the baseElement:</p> + +<pre class="brush: js">let select = document.querySelector('.select'); +let inner = select.querySelectorAll(':scope .outer .inner'); +inner.length; // 0 +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM4','#dom-parentnode-queryselectorallselectors','querySelectorAll')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll')}}</td> + <td>{{Spec2('Selectors API Level 2')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll')}}</td> + <td>{{Spec2('Selectors API Level 1')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>8</td> + <td>10</td> + <td>3.2 (525.3)</td> + </tr> + <tr> + <td><code>:scope</code> pseudo-class</td> + <td>{{ CompatVersionUnknown }}</td> + <td>32</td> + <td>{{CompatNo}}</td> + <td>15<sup>[1]</sup></td> + <td>7.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>:scope</code> pseudo-class</td> + <td>{{ CompatUnknown }}</td> + <td>32</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>7.0</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Supported in Opera 15+ by enabling the "<strong>Enable <style scoped></strong>" or "<strong>Enable experimental Web Platform features</strong>" flag in <code>chrome://flags</code>.</p> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/DOM/Document.querySelectorAll" title="DOM/document.querySelectorAll"><code>document.querySelectorAll</code></a></li> + <li><a href="/en-US/docs/DOM/Document.querySelector" title="DOM/document.querySelector"><code>document.querySelector</code></a></li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector">Code snippets for <code>querySelector</code></a></li> +</ul> 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 +--- +<p>{{ APIRef("DOM") }}</p> + +<p><code>removeAttribute</code> entfernt ein Attribut vom gegebenen Element.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="eval"><em>element</em>.removeAttribute(<em>attrName</em>); +</pre> + +<ul> + <li><code>attrName</code> ist der Name des zu entfernenden Attributs (ein String).</li> +</ul> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre>// <div id="div1" align="left" width="200px"> +document.getElementById("div1").removeAttribute("align"); +// now: <div id="div1" width="200px"> +</pre> + +<h2 id="Notes" name="Notes">Anmerkungen</h2> + +<p>Man sollte <code>removeAttribute</code> verwenden, statt den Attributswert auf <code>null zu setzen</code> (mit <a href="/en/DOM/element.setAttribute" title="en/DOM/element.setAttribute">setAttribute</a>).</p> + +<p>Der Versuch, ein nicht vorhandenes Attribut zu entfernen, wirft keine Exception.</p> + +<p>{{ DOMAttributeMethods() }}</p> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6D6AC0F9">DOM Level 2 Core: removeAttribute</a> (eingeführt in <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeAttribute">DOM Level 1 Core</a>)</p> 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 +--- +<div>{{APIRef("Fullscreen API")}}</div> + +<p>Die Funktion <code><strong>Element.requestFullscreen()</strong></code> sendet eine asynchrone Anfrage, um das Element in Vollbild darzustellen.</p> + +<p>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.</p> + +<div class="note"> +<p>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.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>Element</em>.requestFullscreen(); +</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Bevor <code>requestFullScreen()</code> 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).</p> + +<p>tbd</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullScreen()")}}</td> + <td>{{Spec2("Fullscreen")}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox</th> + <th>Internet Explorer</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegene Unterstütung</td> + <td>{{CompatVersionUnknown}}{{property_prefix("webkit")}}<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop("9.0")}} as <code>mozRequestFullScreen</code><sup>[2]</sup><br> + {{CompatGeckoDesktop("47.0")}} (behind full-screen-api.unprefix.enabled</td> + <td>11{{property_prefix("ms")}}<sup>[3]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[3]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegene Unterstütung</td> + <td>{{CompatVersionUnknown}}{{property_prefix("webkit")}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("9.0")}} as <code>mozRequestFullScreen</code><sup>[2]</sup><br> + {{CompatGeckoMobile("47.0")}} (behind full-screen-api.unprefix.enabled</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Auch implementiert als <code>webkitRequestFullScreen</code>.</p> + +<p>[2] Implementiert als <code>mozRequestFullScreen</code> (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.</p> + +<p>[3] Siehe <a href="https://msdn.microsoft.com/en-us/library/dn254939%28v=vs.85%29.aspx">Dokumentation auf MSDN</a>.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Fullscreen_API">Full-screen API</a></li> + <li>{{ domxref("Element.requestFullscreen()") }}</li> + <li>{{ domxref("Document.exitFullscreen()") }}</li> + <li>{{ domxref("Document.fullscreen") }}</li> + <li>{{ domxref("Document.fullscreenElement") }}</li> + <li>{{ cssxref(":fullscreen") }}</li> + <li>{{ HTMLAttrXRef("allowfullscreen", "iframe") }}</li> +</ul> 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 +--- +<div>{{ APIRef("DOM")}}{{SeeCompatTable}}</div> + +<p>Die Methode <code><strong>Element.scrollIntoView()</strong></code> scrolled das Element in den sichtbaren Bereich des Browsers.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">element.scrollIntoView(); // Gleich mit<code> element.scrollIntoView(true) +</code>element.scrollIntoView(<em>alignToTop</em>); // Boolean Argument +element.scrollIntoView(<em>scrollIntoViewOptions</em>); // Object Argument +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><em><code>alignToTop</code></em></dt> + <dd>Dies ist ein {{jsxref("Boolean")}} Wert: + <ul> + <li>Bei <code>true</code> wird der obere Rand des Elements an den oberen Rand des sichtbaren Bereichs im Browser gescrolled.</li> + <li>Bei <code>false</code> wird der untere Rand des Elements an den unteren Rand des sichtbaren Bereichs im Browser gescrolled.</li> + </ul> + </dd> + <dt><em><code>scrollIntoViewOptions</code></em></dt> + <dd>Ein Boolean oder Objekt mit den folgenden Optionen:</dd> + <dd> + <pre class="idl notranslate">{ + behavior: <strong>"auto"</strong> | "smooth", + block: <strong>"start"</strong> | "end", +}</pre> + </dd> + <dd>Wenn der Wert ein Boolean, enspricht <code>true</code> <code>{block: "start"} und false {block: "end"}.</code></dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: js notranslate">var element = document.getElementById("box"); + +element.scrollIntoView(); +element.scrollIntoView(false); +element.scrollIntoView({block: "end"}); +element.scrollIntoView({block: "end", behavior: "smooth"}); +</pre> + +<h2 id="Notizen">Notizen</h2> + +<p>Das Element wird eventuell nicht ganz nach oben oder unten gescrolled. Je nach Layout der anderen Elemente.</p> + +<h2 id="Technische_Daten"><span class="short_text" id="result_box" lang="de"><span>Technische Daten</span></span></h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Kommentar</th> + </tr> + <tr> + <td>{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("api.Element.scrollIntoView")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{non-standard_inline}} <a href="/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded"><code>Element.scrollIntoViewIfNeeded()</code></a></li> +</ul> 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 +--- +<p>{{ APIRef("DOM") }}</p> + +<p>Die <strong><code>Element.scrollLeft</code></strong> Eigenschaft setzt die Anzahl an Pixel, die der Inhalt eines Elements nach links gescrollt wird, oder liefert diese zurück.</p> + +<p>Beachten Sie: Wenn die Eigenschaft {{cssxref("direction")}} des Elements den Wert <code>rtl</code> (right-to-left) aufweist, ist <code>scrollLeft</code> <code>0</code>, falls der Scrollbalken ganz rechts ist (am Anfang des gescrollten Inhalts), und nimmt zunehmend negative Werte an, wenn man gegen Ende des Inhalts scrollt.</p> + +<h2 id="Syntax_and_values" name="Syntax_and_values">Syntax</h2> + +<pre class="eval">// Liefert die Anzahl der gescrollten Pixel +var <var>sLeft</var> = <var>element</var>.scrollLeft; +</pre> + +<p><var>sLeft</var> ist ein Integer-Wert, der die Anzahl der Pixel repräsentiert, die <var>element</var> nach links gescrollt ist.</p> + +<pre class="eval">// Set the number of pixels scrolled +<var>element</var>.scrollLeft = 10; +</pre> + +<p><code>scrollLeft</code> kann als Integerwert gesetzt werden. Dabei gilt:</p> + +<ul> + <li>Wenn das erste Element nicht gescrollt werden kann (wenn es z.B. keinen overflow hat), erhält <code>scrollLeft</code> den Wert 0.</li> + <li>Wenn ein Wert kleiner als 0 gesetzt wird (größer als 0 für right-to-left Elemente), erhält <code>scrollLeft</code> den Wert 0.</li> + <li>Wenn der Maximalwert, den der Inhalt des gescrollten Elements annehmen kann, überschritten wrid, erhält <code>scrollLeft</code> (nur) den Maximalwert.</li> +</ul> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush: html"><!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> +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{Compat("api.Element.scrollLeft")}}</p> 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 +--- +<div>{{ APIRef("DOM") }}</div> + +<p>Die schreibgeschützte Eigenschaft <code><strong>Element.scrollWidth</strong></code> 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 <code>scrollWidth</code> des Elementes größer als seine <code>clientWidth</code>.</p> + +<div class="note"> +<p>Diese Eigenschaft rundet den Wert zu einem Integer (Ganzzahl). Sollte ein Wert mit Nachkommastellen benötigt werden, verwenden Sie {{ domxref("element.getBoundingClientRect()") }}.</p> +</div> + +<h2 id="Syntax_and_values" name="Syntax_and_values">Syntax</h2> + +<pre class="syntaxbox">var <var>xScrollWidth</var> = <var>element</var>.scrollWidth;</pre> + +<p><code><var>xScrollWidth</var></code> ist die Breite des Inhaltes des Elementes <code>element</code> in Pixeln.</p> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush:html"><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);" +></pre> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<p>Die Eigenschaft <code>scrollWidth</code> ist im <a class="external" href="http://dev.w3.org/csswg/cssom-view/#dom-element-scrollwidth" title="http://dev.w3.org/csswg/cssom-view/#dom-element-scrollwidth">CSSOM View Module</a> definiert.</p> + +<h2 id="References" name="References">Referenzen</h2> + +<p>{{Compat("api.Element.scrollWidth")}}</p> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{domxref("Element.clientWidth")}}</li> + <li>{{domxref("HTMLElement.offsetWidth")}}</li> + <li><a href="/de-DE/docs/Determining_the_dimensions_of_elements">Bestimmung der Abmessungen von Elementen</a></li> +</ul> 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 +--- +<div>{{APIRef("DOM")}}</div> + +<p>Fügt dem angegebenen Element ein Attribut hinzu oder ändert den Wert eines vorhandenen Attributs.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>element</em>.setAttribute(<em>name</em>, <em>value</em>); +</pre> + +<ul> + <li><code>name</code> ist der Name des Attributs als String.</li> + <li><code>value</code> ist der gewünschte neue Wert des Attributs.</li> +</ul> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush:js">var d = document.getElementById("d1"); + +d.setAttribute("align", "center"); +</pre> + +<h2 id="Notes" name="Notes">Anmerkungen</h2> + +<p>Wenn <code>setAttribute</code> auf einem HTML-Element in einem HTML-Dokument aufgerufen wird, wird der Name des Attributes in Kleinbuchstaben umgewandelt.</p> + +<p>Wenn das angegebene Attribut bereits existiert, ersetzt <code>setAttribute</code> den alten Wert. Falls das Attribut nicht existiert, wird es erzeugt.</p> + +<p>Obwohl <code><a href="/en-US/docs/DOM/element.getAttribute" title="DOM/element.getAttribute">getAttribute()</a></code> für fehlende Attribute <code>null</code> liefert, sollte man <code><a href="/en-US/docs/DOM/element.removeAttribute" title="DOM/element.removeAttribute">removeAttribute()</a></code> statt <code><em>elt</em>.setAttribute(<em>attr</em>, null)</code> verwenden um ein Attribut zu entfernen.</p> + +<p><code>setAttribute()</code> zu benutzen, um einige XUL-Attribute (vor allem <code>value</code>) 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 <code><em>elt</em>.value</code> statt <code><em>elt</em>.setAttribute('value', <em>val</em>)</code>.</p> + +<div>{{DOMAttributeMethods}}</div> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082">DOM Level 2 Core: setAttribute</a> (eingeführt im <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttribute">DOM Level 1 Core</a>)</li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents" title="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents">HTML5: APIs in HTML documents</a></li> +</ul> |