SYNTAX_ERR：DOM异常12 - 嗯 [英] SYNTAX_ERR: DOM Exception 12 - Hmmm

问题描述

我一直在为使用HTML5 Rock的幻灯片演示代码的客户提供小型幻灯片/公开展示。我遇到了一个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））{
 //如果发生这种情况很可能是某人来自
 //具有旧固定链接格式的链接， ie＃slide24 
 alert（'固定链接的格式最近已经改变了，如果你从这个旧的外部链接来到'+ 
'，那么你很有可能会把错误的幻灯片）; 
 this.current =登陆幻灯片; 
} 
 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（）（第521行在 main.js ）：

  var slideshow = new SlideShow（queryAll（'。slide'））; 
  

调用 queryAll（'。slide'）返回所有幻灯片的数组，其类别为 .slide 。但是，当通过 queryAll（'。slide'）作为实例化 SlideShow（）的参数时，它返回一个 DOM异常12 错误。

有没有人看过这个？

解决方案

您在文档中使用非法的id属性（HTML5之前是非法的），例如 2-slide 。解决它们。

要解释：
来解决 已知的不正确行为 element.querySelectorAll（）选择器 .slide 将被内部重写（通过使用元素的id）。这将导致以下结果：

 ＃2-slides .moreselectors 
  / pre> 
 
 
 ...并强制出错，因为ID可能无法从数字开始。
 
 
 
见小提琴：  http://jsfiddle.net/doktormolle/FGWhk/   
 
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?
解决方案
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/

                        
这篇关于SYNTAX_ERR：DOM异常12  - 嗯的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！