index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Fragment Identifiers mapped to existing JS APIs</title>
  <script src="index.js"></script>
</head>
<body>
  <a href="https://github.com/wileylabs/fragment-based-selection"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>

  <blockquote style="width:75%">
    Fragment Identifiers below are mapped into their JS API equivalents.
    Text within the parentheticals is decoded (because URI escaping) and then passed to the chosen function. <strong>Open the console to see output.</strong>
  </blockquote>
  <ol>
    <li><a href="#querySelector(.content h3)">#querySelector(.content h3)</a>
    <li><a href="#querySelectorAll(.content li)">#querySelectorAll(.content li)</a>
    <li><a href="#evaluate(//*[@class='content']//li)">#evaluate(//*[@class='content']//li)</a>
  </ol>
  
  <div class="content">
    <h3>Testing Targeting Types</h3>
    <p>Of these types:</p>
    <ol>
      <li>querySelector - find first via CSS selector</li>
      <li>querySelectorAll - find all via CSS selector</li>
      <li>evaluate - find all via XPath selector</li>
    </ol>
  </div>
</body>
</html>