zGqvMr

index.html

<nav id="navigation" data-role="navigation">
  <ul>
    <li><a href="#" class="link">HTML</a></li>
    <li><a href="#" class="link">CSS</a></li>
    <li><a href="#" class="link">Javascript</a></li>
  </ul>
</nav>

<div id="#playground">
  <ul>
    <li><button data-selector="#navigation">document.querySelector('#navigation')</button>
  </ul>
</div>

script.js

var buttons = document.querySelectorAll('#playground button');

var len = buttons.length;
for (var i = 0; i < len; i++) {
  // utilisation de la méthode `NodeList.item`
  var button = buttons.item(i);
  alert(button.getAttribute('dataSelector'));
}

style.css

#navigation {
  margin: 0 auto;
  padding: 0.5em 0;
  background-color: rgb(247, 26, 49);
  text-align: center;
}

ul {
  padding: 0;
  list-style-type: none;
}

li {
  display: inline;
  margin-right: 2em;
}

a, a:visited, a:hover, a:active {
  color: white;
  text-decoration: none;
}

 a:hover, a:active {
   cursor: grab;
 }

zGqvMr.markdown

zGqvMr ('-' * 6)

A Pen by Stéphane Bachelier on CodePen.

License.