tag:forum.selfhtml.org,2005:/selfAttribut Selektor manipulieren mit Javascript – SELFHTML-Forum2018-12-21T22:05:03Zhttps://forum.selfhtml.org/self/2018/dec/18/attribut-selektor-manipulieren-mit-javascript/1738884#m1738884einsiedler2018-12-18T11:10:51Z2018-12-18T11:11:33ZAttribut Selektor manipulieren mit Javascript<p>Hallo liebe Forumer,</p>
<p>Frage, WIE löscht man ein Attribut Selektor
wie den in meinem Fall hier:</p>
<p><button <strong>hidden="botton hidden"</strong> aria-expanded="undefined"><span class="visually-hidden">HauptNavigation</span></button></p>
<p>in meinem CSS steht : [hidden] + .nav-group { display: block !important;}</p>
<p>Bei aktiviertem java-script soll dieser Attribut Selektor <strong>im html</strong> <strong>nicht mehr stehen</strong>.</p>
<p>Bitte NICHTs mit klick-event (wegen botton und so, NEIN ich benötige ihn NUR bei
ausgeschaltetem Javascript , bei aktiviertem javascript soll dieser Attribut Selektor nicht vorhanden sein.</p>
<p>Bitte den Beispielcodezeile, keine Verlinungen, denn</p>
<p>showHide = function(){
document.querySelector('botton[hidden]').classList.remove('[hidden]');
}</p>
<p>funktioniert nicht! Ist wohl nicht die Richtige herangehensweise.</p>
<p>der einsiedelnde</p>
https://forum.selfhtml.org/self/2018/dec/18/attribut-selektor-manipulieren-mit-javascript/1738886#m1738886Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-12-18T11:29:42Z2018-12-18T11:29:42ZAttribut Selektor manipulieren mit Javascript<p>@@einsiedler</p>
<blockquote>
<p><button <strong>hidden="botton hidden"</strong> aria-expanded="undefined"></p>
</blockquote>
<p><code>hidden</code> ist ein <a href="https://w3c.github.io/html/infrastructure.html#boolean-attribute" rel="nofollow noopener noreferrer">boolesches Attribut</a>, d.h. es muss entweder ohne Wertzuweisung (<code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">hidden</span><span class="token punctuation">></span></span></code>) notiert werden oder mit <code>""</code> oder <code>"hidden"</code> als Wert, aber nichts anderes.</p>
<blockquote>
<p>in meinem CSS steht : [hidden] + .nav-group { display: block !important;}</p>
<p>Bei aktiviertem java-script soll dieser Attribut Selektor <strong>im html</strong> <strong>nicht mehr stehen</strong>.</p>
</blockquote>
<p>Im HTML steht auch kein Attribut-Selektor (auch nicht ohne <a href="https://de.wikipedia.org/wiki/Leerzeichen_in_Komposita" rel="nofollow noopener noreferrer">Deppenleerzeichen</a>).</p>
<p>Im CSS steht einer: <code class="language-css">[hidden]</code>. Im JavaScript steht auch einer: im Argument von <code class="language-js">document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'botton[hidden]'</span><span class="token punctuation">)</span></code>.</p>
<p>Im HTML steht ein Attribut. Das Attribut willst du weghaben?</p>
<blockquote>
<p><code class="language-js bad">document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'botton[hidden]'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'[hidden]'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></p>
<p>funktioniert nicht!</p>
</blockquote>
<p>Kann ja auch nicht. Wie der Name schon sagt, ist <code>classList</code> für Klassen zuständig, nicht für beliebige andere Attribute.</p>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute" rel="nofollow noopener noreferrer">MDN: <code class="language-js">Element<span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code></a> oder einfach <code class="language-js">Element<span class="token punctuation">.</span>hidden <span class="token operator">=</span> <span class="token boolean">true</span></code> (wobei du <code class="language-js">Element</code> durch die Referenz auf dein Element ersetzen musst).</p>
<p>LLAP </p>
<div class="signature">-- <br>
<em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann
</div>
https://forum.selfhtml.org/self/2018/dec/18/attribut-selektor-manipulieren-mit-javascript/1738898#m1738898beatovichhttps://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html2018-12-18T11:57:42Z2018-12-18T11:57:42ZAttribut Selektor manipulieren mit Javascript<p>hallo</p>
<blockquote>
<p>Hallo liebe Forumer,</p>
<p>Frage, WIE löscht man ein Attribut Selektor
wie den in meinem Fall hier:</p>
<p><button <strong>hidden="botton hidden"</strong> aria-expanded="undefined"><span class="visually-hidden">HauptNavigation</span></button></p>
</blockquote>
<p>Irgendwie ist dein Hirn auf botton verdrahtet.</p>
<p>Lautet deine Frage, wie man Attribute entfernt? <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute" rel="nofollow noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute</a></p>
<p>Das hidden Attribut ist entweder defined oder undefined. Nur in xhtml hat es den wert hidden="hidden".</p>
<div class="signature">-- <br>
<a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a>
</div>
https://forum.selfhtml.org/self/2018/dec/18/attribut-selektor-manipulieren-mit-javascript/1738920#m1738920Auge2018-12-18T13:15:00Z2018-12-18T13:15:00ZAttribut Selektor manipulieren mit Javascript<p>Hallo</p>
<blockquote>
<p>Frage, WIE löscht man ein Attribut Selektor
wie den in meinem Fall hier:</p>
</blockquote>
<p>Das ist in deinem Fall die falsche Frage.</p>
<blockquote>
<p><button <strong>hidden="botton hidden"</strong> aria-expanded="undefined"><span class="visually-hidden">HauptNavigation</span></button></p>
</blockquote>
<p>Was bedeutet der Wert „botton“ für das Attribut „hidden“?</p>
<blockquote>
<p>Bei aktiviertem java-script soll dieser Attribut Selektor <strong>im html</strong> <strong>nicht mehr stehen</strong>.</p>
<p>Bitte NICHTs mit klick-event (wegen botton und so, NEIN ich benötige ihn NUR bei
ausgeschaltetem Javascript, bei aktiviertem javascript soll dieser Attribut Selektor nicht vorhanden sein.</p>
</blockquote>
<p>Entferne den Attributwert bei Eintreten des Events <code>DOMContentLoaded</code>.</p>
<pre><code class="block language-javascript"><span class="token keyword">function</span> <span class="token function">dokumentGeladen</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">showHide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// weiterer Code, der nach dem laden des DOM ausgeführt werden soll</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">showHide</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> elem <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'button[hidden]'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>elem<span class="token punctuation">.</span><span class="token function">hasAttribute</span><span class="token punctuation">(</span><span class="token string">"hidden"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
elem<span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">"hidden"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'DOMContentLoaded'</span><span class="token punctuation">,</span> dokumentGeladen<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Es wird mit <code>querySelector</code> übrigens nur das erste Element, auf das der Selektor passt, gefunden. Wenn es mehrere Buttons gibt, solltest du <code>querySelectorAll</code> benutzen und mit einer Schleife über die Ergebnismenge gehen.</p>
<blockquote>
<p>showHide = function(){
document.querySelector('botton[hidden]').classList.remove('[hidden]');
}</p>
<p>funktioniert nicht! Ist wohl nicht die Richtige herangehensweise.</p>
</blockquote>
<p>Ist wohl zuvörderst falsch geschrieben. Was ist hier „botton“? Zudem ist die Aktion falsch. Du hast, zumindest im oben gezeigten HTML-Code keine Klasse „hidden“, die du entfernen kannst.</p>
<p>Tschö, Auge</p>
<div class="signature">-- <br>
Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.<br>
Kleine freie Männer von Terry Pratchett
</div>
https://forum.selfhtml.org/self/2018/dec/18/attribut-selektor-manipulieren-mit-javascript/1738927#m1738927Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-12-18T13:45:34Z2018-12-18T13:45:34ZAttribut Selektor manipulieren mit Javascript<p>@@Auge</p>
<blockquote>
<p>Entferne den Attributwert bei Eintreten des Events <code>DOMContentLoaded</code>.</p>
</blockquote>
<p>Wie willst du einen Wert eines Attributs entfernen, das gar keinen hat? Du willst das Attribut entfernen.</p>
<p>Und wenn das Script entsprechend plaziert ist (am Ende des <code>body</code>), braucht man auch keinen Eventhandler dafür.</p>
<p></p>
<blockquote>
<pre><code class="block language-javascript"> <span class="token keyword">if</span> <span class="token punctuation">(</span>elem<span class="token punctuation">.</span><span class="token function">hasAttribute</span><span class="token punctuation">(</span><span class="token string">"hidden"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
elem<span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">"hidden"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</blockquote>
<p>Die Abfrage ist überflüssig. „Der Versuch, ein nicht vorhandenes Attribut zu entfernen, wirft keine Exception.“ [<a href="https://developer.mozilla.org/de/docs/Web/API/Element/removeAttribute" rel="nofollow noopener noreferrer">MDN</a>]</p>
<p>LLAP </p>
<div class="signature">-- <br>
<em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann
</div>
https://forum.selfhtml.org/self/2018/dec/18/attribut-selektor-manipulieren-mit-javascript/1738934#m1738934Auge2018-12-18T14:08:00Z2018-12-18T14:08:00ZAttribut Selektor manipulieren mit Javascript<p>Hallo</p>
<blockquote>
<blockquote>
<p>Entferne den Attributwert bei Eintreten des Events <code>DOMContentLoaded</code>.</p>
</blockquote>
<p>Wie willst du einen Wert eines Attributs entfernen, das gar keinen hat? Du willst das Attribut entfernen.</p>
</blockquote>
<p>Verschrieben.</p>
<blockquote>
<p>Und wenn das Script entsprechend plaziert ist (am Ende des <code>body</code>), braucht man auch keinen Eventhandler dafür.</p>
</blockquote>
<p>Ja. Wenn jedoch nicht, dann doch.</p>
<blockquote>
<blockquote>
<pre><code class="block language-javascript"> <span class="token keyword">if</span> <span class="token punctuation">(</span>elem<span class="token punctuation">.</span><span class="token function">hasAttribute</span><span class="token punctuation">(</span><span class="token string">"hidden"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
elem<span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">"hidden"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</blockquote>
<p>Die Abfrage ist überflüssig. „Der Versuch, ein nicht vorhandenes Attribut zu entfernen, wirft keine Exception.“ [<a href="https://developer.mozilla.org/de/docs/Web/API/Element/removeAttribute" rel="nofollow noopener noreferrer">MDN</a>]</p>
</blockquote>
<p>Noch einfacher und zudem auch besser lesbar. Also nur <code>elem.removeAttribute("hidden")</code> ohne das <code>if (elem.hasAttribute("hidden"))</code> drum herum.</p>
<p>Tschö, Auge</p>
<div class="signature">-- <br>
Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.<br>
Kleine freie Männer von Terry Pratchett
</div>
https://forum.selfhtml.org/self/2018/dec/18/attribut-selektor-manipulieren-mit-javascript/1738937#m1738937Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-12-18T14:19:23Z2018-12-18T14:19:23ZAttribut Selektor manipulieren mit Javascript<p>@@Auge</p>
<blockquote>
<p>Noch einfacher und zudem auch besser lesbar. Also nur <code>elem.removeAttribute("hidden")</code> ohne das <code>if (elem.hasAttribute("hidden"))</code> drum herum.</p>
</blockquote>
<p>Noch einfacher (<a href="https://forum.selfhtml.org/self/2018/dec/18/attribut-selektor-manipulieren-mit-javascript/1738886#m1738886" rel="noopener noreferrer">wie gesagt</a>): <code>elem.hidden = true</code>. (Browser, die das so nicht können, sollten inzwischen ausgestorben sein.)</p>
<p>LLAP </p>
<div class="signature">-- <br>
<em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann
</div>
https://forum.selfhtml.org/self/2018/dec/18/attribut-selektor-manipulieren-mit-javascript/1739264#m1739264Orlok2018-12-21T22:05:03Z2018-12-21T22:05:03ZAttribut Selektor manipulieren mit Javascript<p>Hallo Gunnar</p>
<blockquote>
<p><code>elem.hidden = true</code>.</p>
</blockquote>
<p>FYI, <em lang="en">Attribute Reflection</em> ist in der <a href="https://www.w3.org/TR/wai-aria-1.2/#idl-interface" rel="nofollow noopener noreferrer">WAI-ARIA 1.2 Spec</a> nun auch für <code>role</code> und den ganzen Stapel an <code>aria-*</code>-Attributen vorgesehen. Auch bei diesen Attributen muss also nicht mehr umständlich mit Methoden wie <code>setAttribute</code> hantiert werden.</p>
<pre><code class="block language-javascript">element<span class="token punctuation">.</span>role <span class="token operator">=</span> <span class="token string">'toolbar'</span><span class="token punctuation">;</span>
</code></pre>
<p>Das <code>Element</code>-Interface des DOM wird mit zwei Mixins erweitert, so dass eine Rolle wie in dem Beispiel oben nun auch syntaktisch zugewiesen werden kann.</p>
<p>Hat man ein Attribut wie <code>aria-pressed</code> …</p>
<pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">aria-pressed</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
Notify by electric shock
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
</code></pre>
<p>… kann das nun auch als Objekteigenschaft gelesen werden:</p>
<pre><code class="block language-javascript">document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'[aria-pressed]'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>ariaPressed<span class="token punctuation">;</span> <span class="token comment">// 'false'</span>
</code></pre>
<p>Aus Kompatibilitätsgründen wird hier leider nur ein String zurückgegeben. Schöner wäre es natürlich, wenn boolesche Attributwerte auch als Werte vom Typ Boolean zurückgegeben würden. Aber ich habe wenig Hoffnung, dass sich da noch was ändert.</p>
<p>Trotzdem finde ich, dass der Zugriff auf ARIA-Attribute über Eigenschaften vieles einfacher macht, weshalb ich dafür mal <a href="https://github.com/CountOrlok/ARIA-Reflection" rel="noopener noreferrer">ein Polyfill</a> geschrieben habe.</p>
<p>Viele Grüße,</p>
<p>Orlok</p>