initial commit

1 files changed, 300 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: &lt;div class="foo"&gt;&lt;/div&gt;
+console.log(div.outerHTML);
+
+// classList-API zum Entfernen und Ergänzen von Klassen nutzen
+div.classList.remove("foo");
+div.classList.add("anotherclass");
+
+// &lt;div class="anotherclass"&gt;&lt;/div&gt;
+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 &lt; 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ş &lt;k-gun@mail.com&gt;
+ * @copyright Released under the MIT License &lt;https://opensource.org/licenses/MIT&gt;
+ * @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 &lt; 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 &amp;&amp; Element.prototype.classList.replace)) {
+        Object.defineProperty(Element.prototype, 'classList', {
+            get: function() {
+                return new ClassList(this);
+            }
+        });
+    }
+
+    // For others replace() support.
+    if (window.DOMTokenList &amp;&amp; !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> &amp; <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> &amp; <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>