Linuchs: document.querySelector('#div_karte, #div_karte_pfeil')

problematische Seite

Moin,

wenn JS aktiv, wird display:none aufgehoben:

document.querySelector('#div_karte').style.display='inherit';
document.querySelector('#div_karte_pfeil').style.display='inherit';

mehrere Versuche einer Kurzform scheiterten, u.a.

document.querySelector('#div_karte, #div_karte_pfeil').style.display='inherit';
// oder
document.querySelectorAll('#div_karte, #div_karte_pfeil').style.display='inherit';
...

mozilla.org deutet an, es gäbe so etwas:

const el = document.querySelector("#main, #basic, #exclamation");

Aber dann müssen wohl die el Elemente einzeln aufgerufen werden?

Gibt es eine Kurzform?

fragt Linuchs

  1. problematische Seite

    Hallo Linuchs,

    wenn JS aktiv, wird display:none aufgehoben:

    document.querySelector('#div_karte').style.display='inherit';
    document.querySelector('#div_karte_pfeil').style.display='inherit';
    

    mehrere Versuche einer Kurzform scheiterten, u.a.

    document.querySelector('#div_karte, #div_karte_pfeil').style.display='inherit';
    // oder
    document.querySelectorAll('#div_karte, #div_karte_pfeil').style.display='inherit';
    ...
    
    
    Aber dann müssen wohl die el Elemente einzeln aufgerufen werden?
    
    

    Aus dem Wiki:

    Die Methode querySelector() der ParentNode-Schnittstelle gibt das erste Element zurück, auf das der übergebene Selektor passt.

    → Also ändert deine erste Zeile nur das erste Element!

    Die Methode querySelectorAll() der ParentNode-Schnittstelle gibt diejenigen Elemente zurück, auf die der übergebene Selektor passt. [...] Das Ergebnis des Methodenaufrufs ist ein statisches NodeList-Objekt mit den gefundenden Elementen.

    → Also musst du über diese Nodelist iterieren anstatt die Liste selbst (un)sichtbar zu machen.

    Bis bald! Jonathan

    --
    "Ich habe heute ein Elan-Problem und mein Tatenvolumen ist fast aufgebraucht!"
    1. problematische Seite

      @@Jonathan Harker

      → Also musst du über diese Nodelist iterieren anstatt die Liste selbst (un)sichtbar zu machen.

      Letzteres dürfte auch kaum möglich sein. Oder hat ein NodeList-Objekt eine style-Eigenschaft?

      🖖 Живіть довго і процвітайте

      --
      When the power of love overcomes the love of power the world will know peace.
      — Jimi Hendrix
  2. problematische Seite

    document.querySelectorAllgibt eine Liste zurück. Auf deren Elemente lässt sich mit forEach eine (anonyme) Funktion anwenden.

    Schnelles, funktionierendes Beispiel zum nicht SO nachmachen: Die eigentlich verborgenen Items werden angezeigt. Beachte den Hinweis unten!

    <html>
    	<head>
    		<title>Test</title>
    		<style>
    			#foo, #bar, #baz {
    				display:none;
    			}
    		</style>
    	</head>
    	<body>
    		<h1>Test</h1>
    		<p id="foo">FOO</p>
    		<p id="bar">BAR</p>
    		<p id="baz">BAZ</p>
    
    		<script>
    			document.querySelectorAll(
    				"#foo, #bar, #baz"
    			).forEach(
    				function ( item )  {
    					item.style.display='block';
    				}
    			);
    		</script>
    	</body>
    </html>
    

    Hinweis: Üblicherweise ändert man die Klasse(n), nicht die CSS-Eigenschaft direkt. Dafür gibt sehr viele gute Gründe.

    1. problematische Seite

      @@Raketenwilli

      Hinweis: Üblicherweise ändert man die Klasse(n)

      bzw. andere Attribute

      nicht die CSS-Eigenschaft direkt. Dafür gibt sehr viele gute Gründe.

      Fürs Nichtanzeigen/Anzeigen ändert man keine Klasse, sondern das hidden-Attribut. Dafür gibt sehr viele gute Gründe.

      🖖 Живіть довго і процвітайте

      --
      When the power of love overcomes the love of power the world will know peace.
      — Jimi Hendrix
    2. problematische Seite

      @@Raketenwilli

      document.querySelectorAllgibt eine Liste zurück. Auf deren Elemente lässt sich mit forEach eine (anonyme) Funktion anwenden.

      Oder man geht die Liste mit einer for-of-Schleife durch:

      for (let element of document.querySelectorAll() {
        element.hidden = false;
      }
      

      🖖 Живіть довго і процвітайте

      --
      When the power of love overcomes the love of power the world will know peace.
      — Jimi Hendrix
    3. problematische Seite

      document.getElementsByClassName('classname') liefert eine "collection". Die lässt sich mit Array.from(collection) in einen Array umwandeln, dessen Elementen man sodann z.B. in einer forEach-Schleife die Klasse entzieht:

      <html>
      	<head>
      		<title>Test</title>
      		<style>
      			.showOnActiveJs {
      				display: none;
      			}
      		</style>
      	</head>
      	<body>
      		<h1>Test</h1>
      		<p class="showOnActiveJs" id="foo">FOO</p>
      		<p class="showOnActiveJs" id="bar">BAR</p>
      		<p class="showOnActiveJs" id="baz">BAZ</p>
      
      		<script>
      			Array.from(
      				document.getElementsByClassName( 'showOnActiveJs' )
      			).forEach(
      				function( item )  {
      					item.classList.remove( 'showOnActiveJs' );
      				}
      			);
      		</script>
      	</body>
      </html>
      
      1. problematische Seite

        @@Raketenwilli

        Nö. Eher so:

        <html>
        	<head>
        		<title>Test</title>
        	</head>
        	<body>
        		<h1>Test</h1>
        		<p class="showOnActiveJs" id="foo" hidden="">FOO</p>
        		<p class="showOnActiveJs" id="bar" hidden="">BAR</p>
        		<p class="showOnActiveJs" id="baz" hidden="">BAZ</p>
        
        		<script>
        			Array.from(
        				document.getElementsByClassName('showOnActiveJs')
        			).forEach(
        				function ( item )  {
        					item.hidden = false;
        				}
        			);
        		</script>
        	</body>
        </html>
        

        document.getElementsByClassName('showOnActiveJs') liefert eine HTMLCollection.

        document.querySelectorAll('.showOnActiveJs') liefert eine NodeList – da kannst du forEach() drauf anwenden und brauchst das Array.from() nicht:

        document.querySelectorAll('.showOnActiveJs').forEach(
        	function ( item )  {
        		item.hidden = false;
        	}
        );
        

        Gern auch mit Pfeilfunktion:

        document.querySelectorAll('.showOnActiveJs').forEach( item => {
        	item.hidden = false;
        });
        

        Oder eben mit Schleife:

        for (let item of document.querySelectorAll('.showOnActiveJs') {
        	item.hidden = false;
        }
        

        Möglicherweise will man auch auf die Klasse showOnActiveJs verzichten und die Elemente anhand ihrer ID selektieren:

        document.querySelectorAll('#foo, #bar, #baz').forEach( item => {
        	item.hidden = false;
        });
        

        bzw.

        for (let item of document.querySelectorAll('#foo, #bar, #baz') {
        	item.hidden = false;
        }
        

        🖖 Живіть довго і процвітайте

        --
        When the power of love overcomes the love of power the world will know peace.
        — Jimi Hendrix
        1. problematische Seite

          Möglicherweise will man auch auf die Klasse showOnActiveJs verzichten und die Elemente anhand ihrer ID selektieren

          Oder anhand eines data-attributes:

          <p data-selector="hiddenIfNoneJs" hidden="1">Foo</p>
          <p data-selector="hiddenIfNoneJs" hidden="1">Bar</p>
          <p data-selector="hiddenIfNoneJs" hidden="1">Baz</p>
          
          document.querySelectorAll(
              '[data-selector="hiddenIfNoneJs"]'
          ).forEach( item => {
          	item.hidden = false;
          });
          
          1. problematische Seite

            @@Raketenwilli

            Oder anhand eines data-attributes:

            Ginge auch. Aber ich halte das schon für eine Klassifizierung der Elemente; class also für angebracht.

            Außerdem könnte ich mir vorstellen, dass die Selektorengine in Browsern für Klassen optimiert ist, also ein My schneller ist als bei Attributselektoren. (Deshalb schreib ich desöfteren „aus CSS-Sicht“.)

            🖖 Живіть довго і процвітайте

            --
            When the power of love overcomes the love of power the world will know peace.
            — Jimi Hendrix
            1. problematische Seite

              Ginge auch.

              Klar. Hatte ich ja auch getestet.

              Aber ich halte das schon für eine Klassifizierung der Elemente; class also für angebracht.

              Das war auch meine Intention dafür, die „Alternative via Klasse“ zu bringen. Ich wollte sodann nur Deine Iterationen vervollständigen…

              So. Jetzt ist Zeit für den Grill.