这篇文章主要讲解了“QWrap选择器tagName的大小写问题怎么解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“QWrap选择器tagName的大小写问题怎么解决”吧！

10年积累的网站建设、成都做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有贵阳免费网站建设让你可以放心的选择与我们合作。

对于现代Web前端来说，Selector是必备之物。对于标准浏览器，可用querySelector，而对于IE8标准模式以下，需要一个Selector引擎。

因为本项目会在代码里使用QWrap，所以虽然我写的部分代码并没有用QWrap，但既然怎样都需要一个Selector引擎，不如用QWrap。

结果发生一件悲剧的事情。

我使用html5-shim/shiv库来让IE正确解析新的HTML5标签。但是QWrap引擎居然不能正确选择出html5的元素。

尝试人肉选择，发现是可以的，那就是QWrap的Selector存在bug。

经过艰苦卓绝的斗争，最终发现问题出在这个函数的第2行：

function(a) {       sFun.push('el.tagName=="' + a.toUpperCase() + '"');      return '';  }).replace(/([\[(].*)|#([\w\-]+)|\.([\w\-]+)/g,//id缩略写法//className缩略写法

QWrap采用了代码生成技术，即为selector拼装出对应的函数。这是一项相当陷阱先进的技术。

不难看出这里会产生一个tag的匹配，对于匹配“nav”所生成的代码应该是：el.tagName=="nav".toUpperCase() 。

通常浏览器对于所有HTML元素，其调用tagName返回的都是全大写字母。

【号外】为什么是大写?

Hax答：这是从HTML的祖先SGML那里继承下来的习惯。对于早期写SGML/HTML的人，要区分标签和正文内容的最简单方法恐怕就是把标签用大写。

不过，据圈子里有名的那个纹身佬说，HTML用大写是因为那时候技术落后，存储太紧张，全大写比较省存储空间……(大意如此，详情我记不清了，请八卦人士咨询Winter)

【/号外】

然而不幸的是，html5-shim以及我所知差不多所有的类似库，都会使用全小写。这是因为现代Web标准的主流是采用全小写。

【号外】为什么换小写了涅?

Hax答：因为这样比较不伤眼，也不伤手。

【/号外】

而IE虽然对于它所能识别的HTML元素都是大小写不敏感的，但是对于通过createElement神经刀产生的新元素，它其实将其视作类XML元素，也就是大小写敏感的，所以其tagName属性将返回最初设定的大小写形式。

如何fix这个问题?

一个容易想到的方式是把html5-shim里的标签列表改为大写。不过这个方式并不管用。因为tagName返回的是最初设定的值，也就是，如果你写

...，返回的是SECTION，如果你写

...返回的就是SECtion(即start tag的大小写)，如果你写document.createElement('sEcTion')，返回的就是sEcTion。

显然，QWrap Selector(或任何通用脚本库)不应依赖网页作者如何书写。所以这个问题必须由QW来解决。

此外，库也不应该假设tagName一定返回大写。虽然规范规定对于HTML元素tagName应该始终返回大写，但库必须考虑兼容性(即这里所提到的IE的问题)。

此外，通用脚本库也要有前瞻性，比如考虑Selector引擎用于选择XML元素。当前各种纯JS selector engine并非namespace-aware，所以本不能选择XML元素。但HTML规范已经允许直接在HTML里混合MathML、SVG。新的浏览器也都已经支持了。

比如你可以试着在FireFox里看下述代码：