Javascript SYNTAX_ERR：DOM 异常 12 - 嗯
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7315162/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SYNTAX_ERR: DOM Exception 12 - Hmmm
提问by Isaac Lewis
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 12error.
调用queryAll('.slide')返回一个包含所有类为 的幻灯片的数组.slide。但是，当queryAll('.slide')作为实例化参数传递时SlideShow()，它会返回DOM Exception 12错误。
Has anybody seen this before?
有没有人见过这个？
回答by Dr.Molle
You are using illegal id-attributes(illegal before HTML5) inside the document, e.g. 2-slide. Fix them.
您在文档中使用了非法的 id 属性（在 HTML5 之前是非法的），例如2-slide. 修复它们。
To explain:
to solve the known misbehaviourof element.querySelectorAll()the selector .slidewill be internally rewritten(by using the id of the element). This will result in something like that:
解释一下：为了解决选择器的已知错误行为，将在内部重写（通过使用元素的 id）。这将导致类似的事情：element.querySelectorAll().slide
#2-slide .moreselectors
...and forces the error, because an ID may not start with a Number.
...并强制错误，因为 ID 可能不以数字开头。
See the fiddle: http://jsfiddle.net/doktormolle/FGWhk/
回答by wesbos
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
这打破了使用构建的所有幻灯片，甚至现在的 Google 演示也被破坏了
Just change line 220of default.jsto
只是改变线220的default.js到
toBuild[0].classList.remove('to-build');
all is well!
一切都很好！
回答by Drazisil
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 的问题无关，但这是一个奇怪的错误，所以我将其留在这里希望对其他人有所帮助。
回答by Martino
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 Exception 12 仅发生在 Safari 上。所以我已经改变它直接从类中获取元素，现在工作正常。
回答by vhanahrni
You can escape the quotes like in applescript then no issue on safari
您可以像在 Applescript 中那样转义引号，然后在 safari 上就没有问题
do JavaScript "document.querySelector('span[" & attrName & "=\"" & attrValue & "\"]').click();"
