title: SYNTAX_ERR: DOM Exception 12 - Hmmm
body: <p>I have been working on a small slideshow / public display for a client that uses HTML5 Rock's <a href="http://slides.html5rocks.com" rel="noreferrer">Slideshow code</a>. I have run into a DOM Exception 12 - a syntax error that is supposedly related to CSS selectors - while monkeying around with it... but I can't trace it back to any changes I made in the code. I am thinking it might be something that was uncovered as I added features.</p>
  
  <p>I have traced it down to this object (live version <a href="http://in2solar.com/p/badgermountain/main.html" rel="noreferrer">here</a>):</p>
  
  <pre><code>var SlideShow = function(slides) {
      this._slides = (slides || []).map(function(el, idx) {
        return new Slide(el, idx);
      });
      var h = window.location.hash;
      try {
        this.current = h;
      } catch (e) { /* squeltch */ }
      this.current = (!this.current) ? "landing-slide" : this.current.replace('#', '');
      if (!query('#' + this.current)) {
        // if this happens is very likely that someone is coming from
        // a link with the old permalink format, i.e. #slide24
        alert('The format of the permalinks have recently changed. If you are coming ' +
               'here from an old external link it\'s very likely you will land to the wrong slide');
        this.current = "landing-slide";
      }
      var _t = this;
      doc.addEventListener('keydown',
          function(e) { _t.handleKeys(e); }, false);
      doc.addEventListener('touchstart',
          function(e) { _t.handleTouchStart(e); }, false);
      doc.addEventListener('touchend',
          function(e) { _t.handleTouchEnd(e); }, false);
      window.addEventListener('popstate',
          function(e) { if (e.state) { _t.go(e.state, true); } }, false);
  };
  </code></pre>
  
  <p>Instantiation of <code>SlideShow()</code> (line 521 in <a href="http://in2solar.com/p/badgermountain/main.js" rel="noreferrer">main.js</a>):</p>
  
  <pre><code>var slideshow = new SlideShow(queryAll('.slide'));
  </code></pre>
  
  <p>Calling <code>queryAll('.slide')</code> returns an array of all the slides with an class of <code>.slide</code>. However, when passing <code>queryAll('.slide')</code> as a parameter for instantiating <code>SlideShow()</code>, it returns a <code>DOM Exception 12</code> error.</p>
  
  <p>Has anybody seen this before?</p>