javascript - SYNTAX_ERR : DOM Exception 12 - Hmmm

Question

我一直在为使用 HTML5 Rock 的 Slideshow code 的客户制作小型幻灯片/公开展示.我遇到了一个 DOM 异常 12 - 一个据称与 CSS 选择器相关的语法错误 - 在四处闲逛时......但我无法追溯到我在代码中所做的任何更改。我想这可能是我添加功能时发现的东西。

我已经追踪到这个对象(实时版本 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);
};

SlideShow() 的实例化(main.js 中的第 521 行):

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

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

有人见过这个吗？

Answer 1

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

解释:解决known misbehaviour element.querySelectorAll() 的选择器 .slide 将在内部重写(通过使用元素的 id)。这将导致类似的结果:

#2-slide .moreselectors

...并强制报错，因为 ID 不能以数字开头。

参见 fiddle :http://jsfiddle.net/doktormolle/FGWhk/