SYNTAX_ERR: DOM Exception 12 - Hmmm

Question

I have been working on a small slideshow / public display for a client that uses HTML5 Rock's Slideshow code. 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.

I have traced it down to this object (live version here):

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); }; 

Instantiation of SlideShow() (line 521 in main.js):

var slideshow = new SlideShow(queryAll('.slide')); 

Calling queryAll('.slide') returns an array of all the slides with an class of .slide. However, when passing queryAll('.slide') as a parameter for instantiating SlideShow(), it returns a DOM Exception 12 error.

Has anybody seen this before?

Answer 1

You are using illegal id-attributes(illegal before HTML5) inside the document, e.g. 2-slide . Fix them.

To explain: to solve the known misbehaviour of element.querySelectorAll() the selector .slide will be internally rewritten(by using the id of the element). This will result in something like that:

#2-slide .moreselectors 

...and forces the error, because an ID may not start with a Number.

See the fiddle: http://jsfiddle.net/doktormolle/FGWhk/

Answer 2

If you are coming here after searching for this error in HTML5 rocks slides:

For some reason they remove the class 'to-build' with the following:

toBuild[0].classList.remove('to-build', ''); 

That breaks all slide decks the use build, even the Google demo right now is broken

Just change line 220 of default.js to

toBuild[0].classList.remove('to-build'); 

all is well!