tutorials.de - querySelectorAll - Demo #3

by SpiceLab

HTML

<main>
  <section class="test">
    <h1>&lt;h1&gt;-Headline</h1>
    <div>
      <ul>
        <li><a href='#'>L1</a></li>
        <li><a href='#'>L2</a></li>
      </ul>
    </div>
    <h2>&lt;h2&gt;-Headline</h2>
  </section>
</main>
<p id="ausgabe"></p>

<button onclick="Finden()">1. Beispiel finden!</button>
<button onclick="Aendern()">Ändern!</button>

JavaScript

function Finden() {
  var treffer = document.querySelectorAll('main section.test ul');
  var x = document.getElementById('ausgabe');
  x.innerHTML = treffer;
}
function Aendern() {
  var x = document.querySelectorAll('main section.test ul');
  var i;
  for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
  }
}