IE8下关于querySelectorAll()的问题

当用querySelector()或querySelectorAll()查找类似name="2nd_btn"的元素时，FF，chrome和IE8都会报错。
FF,chrome报的错是一样的，如下所示：
Error: uncaught exception: [Exception... "An invalid or illegal string was specified" code: "12" nsresult: "0x8053000c (NS_ERROR_DOM_SYNTAX_ERR)" location: ".../test/qsa.html Line: 18"]
IE8的报错提示：行: 18　错误: 参数无效。
一寻思，name的值是以数字开头的，把数字去掉或修改后，就能取到了。
这就告诉我们，一般可自定义标签的属性值时，属性值不能以数字开头，也不能包含$，^等不常用的字符。
在HTML页面开始一定要记得声明<!DOCTYPE>。

测试代码：

代码如下:

<!DOCTYPE>
<html>
<head></head>
<body>
<div id="foo">
<a name="warns" href="">This is a sample warning</a>
<a id="3err" href="">This is a sample error</a>
</div>
<div id="bar">
<a name="warns" href="">This is another sample warning</a>
<a name="1err" href="">This is another sample error</a>
</div>
<script>
var a = document.querySelectorAll("[name=warns]")
alert(a.length)//输出：2
var b = document.querySelector("[id=3err]")
alert(b.tagName)//报错
var c = document.querySelectorAll("[name=1err]")
alert(c.length)//报错
</script>
</body>
</html>

赞 (0)

相关推荐

  • 各浏览器中querySelector和querySelectorAll的实现差异分析

    querySelector和querySelectorAll是W3C提供的新的查询接口 querySelector和querySelectorAll是W3C提供的 新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null. 2.querySelectorAll返回匹配的元素集合,如果没有匹配项,返回空的nodelist(节点数组). 3.返回的结果是静态的,之后对document结构的改变不会影响到之前取到的结果. 这两个方法都可以接受三

  • jQuery选择器querySelector的使用指南

    简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的选择器.这使得在编写原生JavaScript代码时方便了许多. 用法 两个方法使用差不多的语法,都是接收一个字符串参数,这个参数需要是合法的CSS选择语法. 复制代码 代码如下: element = document.querySelector('selectors'); elementList =

  • 再谈querySelector和querySelectorAll的区别与联系

    先按W3C的规范来说这两个方法应该返回的内容吧: querySelector: return the first matching Element node within the node's subtrees. If there is no such node, the method must return null.(返回指定元素节点的子树中匹配selector的集合中的第一个,如果没有匹配,返回null) querySelectorAll: return a NodeList contai

  • javascript之querySelector和querySelectorAll使用说明

    一开始很多人都会拿jquery的选择器来跟这两个api做对比(我也是),比较异同本来没事,但却使一些同学对这两个api在浏览器中的实现产生了误解,特别是再dom element上调用此api时. 下面是我的jsFiddle示例,我就以此展开说明: 复制代码 代码如下: (function(global) { global.doc = document; global.body = doc.getElementsByTagName('body')[0]; global.$ = function(i

  • javascript之querySelector和querySelectorAll使用介绍

    一开始很多人都会拿jquery的选择器来跟这两个api做对比(我也是),比较异同本来没事,但却使一些同学对这两个api在浏览器中的实现产生了误解,特别是再dom element上调用此api时. 下面是我的jsFiddle示例,我就以此展开说明: js代码: (function(global) { global.doc = document; global.body = doc.getElementsByTagName('body')[0]; global.$ = function(id) {

  • js querySelector和getElementById通过id获取元素的区别

    这是sina同事xiaoniu发现的,如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="02E503E2A1C011CFC85B7B701A0677EC0900000000000001"></div> <script> var str = '02E5

  • IE8下关于querySelectorAll()的问题

    当用querySelector()或querySelectorAll()查找类似name="2nd_btn"的元素时,FF,chrome和IE8都会报错. FF,chrome报的错是一样的,如下所示: Error: uncaught exception: [Exception... "An invalid or illegal string was specified" code: "12" nsresult: "0x8053000c

  • eWebEditor 辑器按钮失效 IE8下eWebEditor编辑器无法使用的解决方法

    eWebEditor 辑器按钮失效 IE8下eWebEditor编辑器无法使用的解决方法

    eWebEditor编辑器按钮失效,IE8下eWebEditor编辑器无法使用问题解决方法有两个,一个是下面的方法通过修改js文件,其实我们也可以使用第二种方法通过在页面中加入这一句即可. 复制代码 代码如下: <meta http-equiv="x-ua-compatible" content="ie=7" /> 或 复制代码 代码如下: <meta http-equiv="X-UA-Compatible" content=&

  • 在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题

    复制代码 代码如下: function include(path){ var a=document.createElement("script"); a.type = "text/javascript"; a.src=path; var head=document.getElementsByTagName("head")[0]; head.appendChild(a); } include("http://jqueryjs.google

  • js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法

    本文实例讲述了js插件设置innerHTML时在IE8下提示"未知运行时错误"解决方法.分享给大家供大家参考.具体分析如下: 问题描述: 网站中使用了一个js插件,设置innerHTML时,在IE8下报错"未知运行时错误": <div id="divContainer"> <a name="link"> -->报错处 第三方插件内容- </a> </div> 原因: 所设置

  • IE8下Ajax缓存问题及解决办法

    Ajax简介 AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 下面的代码,在其他浏览器都是正常的,但是在IE8中出现诡

  • ie9下alert阻挡jsp渲染ie8下没问题

    ie9下jsp渲染可能会受alert的阻挡.ie8下没有问题. 问题描述: 一个jsp,用了JQuery绑定了画面初期化事件($(function()),初期化事件中有alert(), IE8下alert弹出消息对话框的瞬间,jsp页面正常在浏览器下被渲染; 但是IE9下,alert弹出消息对话框瞬间,jsp页面不被渲染,显示个白页,当点击alert中的"OK"后,页面才被渲染. IE9下如何才能达到和IE8下同样的效果? 试了ie9的兼容模式,不起作用.Jsp代码中强制使用ie8解析

  • 完美解决jsp页面在IE8下文本模式自动为(杂项Quirks)导致页面显示错位

    完美解决jsp页面在IE8下文本模式自动为(杂项Quirks)导致页面显示错位

    最近在修改网站的响应式的页面时,由于都是套样式页面,修改过程都是粘贴复制,导致了一些细节问题在IE8下暴露出来: 遇到的问题就是在在Chrome,火狐页面都正常,唯独在IE8下页面样式显示乱样了,但是本地就显示正常,Tomcat缓存也清楚了,再加上自己也是个小白,周末平静了一天半终于找到问题的源头了,其实解决办法也很简单,如图: 我最初是将小脚本写在<!DOCTYPE html>文档都上方的,但是在IE8浏览文本模式默认就编程了"Quirks"模式,显示不正常,后来改成了写

  • 点击A元素触发B元素的事件在IE8下会识别成A元素

    var menuUrl = $(eventSrc).attr("navUrl"); // if (menuUrl == undefined) {//兼容IE8的$(eventSrc)识别错误,取第一个 // menuUrl = $("#left_menu-small li:first a").attr("navUrl"); // } var browser = GetIEVersion(); if (browser == "IE8&qu

  • IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题

    本文主要通过代码示例给大家介绍IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题:分步介绍,先给大家介绍IE7浏览器窗口大小改变事件执行多次bug,具体问题分析及解决方案请看下文. var resizeTimer = null; $(window).resize(function() { if (resizeTimer) clearTimeout(resizeTimer); resizeTimer = setTimeout("alert('mm')",

  • JQuery.validate在ie8下不支持的快速解决方法

    一.在ie8下回有问题的代码 1.JQuery.validate验证框架是通过页面form表单提交验证<input/>标签中输入是否符合自己的规则的 <form id="cardTypeFrm"> <table width="100%" cellspacing="0" cellpadding="0" class="table_pzh"> <tbody> <

随机推荐