SYNTAX_ERR：DOM例外12 - 嗯

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.

我一直在为使用HTML5 Rock的幻灯片代码的客户端制作一个小型幻灯片/公共显示器。我遇到了一个DOM异常12 - 一个假设与CSS选择器有关的语法错误 - 同时用它来解决它...但我无法追溯到我在代码中所做的任何更改。我想这可能是因为我添加了功能而被发现的东西。

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):

SlideShow（）的实例化（main.js中的第521行）：

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.

调用queryAll（'。slide'）会返回一个包含.slide类的所有幻灯片的数组。但是，当传递queryAll（'。slide'）作为实例化SlideShow（）的参数时，它会返回DOM Exception 12错误。

Has anybody seen this before?

有没有人见过这个？

5 个解决方案

#1

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

您在文档中使用非法的id属性（在HTML5之前是非法的），例如2张幻灯片。修复它们。

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:

解释：为了解决element.querySelectorAll（）的已知错误行为，选择器.slide将在内部被重写（通过使用元素的id）。这将导致类似的事情：

#2-slide .moreselectors

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

...并强制执行错误，因为ID可能不以Number开头。

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

看小提琴：http：//jsfiddle.net/doktormolle/FGWhk/

#2

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

如果您在HTML5岩石幻灯片中搜索此错误后来到这里：

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

出于某种原因，他们使用以下内容删除了“to-build”类：

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

只需将default.js的第220行更改为

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

all is well!

一切都很好！

#3

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

在我的情况下，它使用self.postMessage（e.data）;在使用Web worker的主线程中。

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.

我知道它与OP的问题无关，但这是一个奇怪的错误所以我离开这里希望它能帮助别人。

#4

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.

和SYNTAX_ERR：DOM异常12仅在Safari上发生。所以我改变它直接从类中获取元素，现在工作正常。

#5

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

你可以像在applescript中那样转义引号然后在safari上没有问题

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

#1