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?

Are you sure it returns an array, or might it return a [node list](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-536297177)? — Mike Samuel, Sep 06 '11 at 05:51
DOM Exception 12 is a syntax error, e.g. a property has been mis-set. My guess is that it is your event listeners - the act of setting them, that is. I would think that browsers that don't support either the `addEventListener` fully or that don't support events such as 'touchstart', 'touchend', and 'popstate' don't like that you are trying to listen to them. What browser were you using btw? — Alex, Sep 06 '11 at 05:55

Dr.Molle · Accepted Answer · 2011-09-06T07:14:42.750

54

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/

edited Sep 06 '11 at 07:14

answered Sep 06 '11 at 06:36

Dr.Molle

116,463
16
195
201

Thank you so much... such a silly problem - I guess it is 1:00AM my time. Been a long day. Thanks again! – Isaac Lewis Sep 06 '11 at 08:10
1

[In HTML5 an ID can start with a number.](http://mathiasbynens.be/notes/html5-id-class) If you want to select that element based on its ID, you just have to [escape the ID so that it becomes a valid CSS identifier](http://mathiasbynens.be/notes/css-escapes). Here’s a tool that does that for you: http://mothereff.in/css-escapes#02-slide – Mathias Bynens Jun 19 '14 at 07:23

score 9 · Answer 2 · answered Jan 22 '13 at 17:45

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!

score 2 · Answer 3 · answered Aug 07 '13 at 11:34

2

In my case it was using self.postMessage(e.data); in the main thread while using web workers.

I know it's not related to the OP's issue, but it's an odd error so I'm leaving this here in hope it helps others.

answered Aug 07 '13 at 11:34

Drazisil

3,070
4
33
53

score 1 · Answer 4 · answered Jan 30 '17 at 11:10

Same problem to me but in my case a try to get elements from their attribute

document.querySelectorAll('input[name="path"]')

and SYNTAX_ERR: DOM Exception 12 occurred only on Safari. So i've change it to get the element directly from class and now work fine.

score 0 · Answer 5 · answered Dec 11 '17 at 14:43

0

You can escape the quotes like in applescript then no issue on safari

do JavaScript "document.querySelector('span[" & attrName & "=\"" & attrValue & "\"]').click();"

answered Dec 11 '17 at 14:43

vhanahrni

79
8

SYNTAX_ERR: DOM Exception 12 - Hmmm

5 Answers5

Linked