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


Posted in Javascript onApril 20, 2012

这是sina同事xiaoniu发现的,如下

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"/> 
</head> 
<body> 
<div id="02E503E2A1C011CFC85B7B701A0677EC0900000000000001"></div> 
<script> 
var str = '02E503E2A1C011CFC85B7B701A0677EC0900000000000001'; 
function bySelector(id) { 
return document.querySelector('#'+id); 
} 
function byId(id) { 
return document.getElementById(id); 
} 

alert(bySelector(str)); 
alert(byId(str)); 
</script> 
</body> 
</html>

两个函数bySelector,byId分别通过querySelector和getElementById获取元素.

页面上有id为“02E503E2A1C011CFC85B7B701A0677EC0900000000000001”的元素。

结果:所有支持querySelector的浏览器中通过bySelector均获取不到(报错),但通过getElementById却可以获取。

开始怀疑是id的字符串太长的原因导致querySelector获取不到。真正原因却是querySelector按css规范实现,即css标识符也不能以数字开头。

W3 写道
In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

Javascript 相关文章推荐
Prototype 工具函数 学习
Jul 23 Javascript
window.ActiveXObject使用说明
Nov 08 Javascript
jquery调用wcf并展示出数据的方法
Jul 07 Javascript
javascript 树形导航菜单实例代码
Aug 13 Javascript
jQuery实现“扫码阅读”功能
Jan 21 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
Oct 08 Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
Aug 17 Javascript
利用Decorator如何控制Koa路由详解
Jun 26 Javascript
layui use 定义js外部引用函数的方法
Sep 26 Javascript
js实现消灭星星(web简易版)
Mar 24 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 Javascript
仿微博字符限制效果实现代码
Apr 20 #Javascript
javascript 另一种图片滚动切换效果思路
Apr 20 #Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 #Javascript
浏览器解析js生成的html出现样式问题的解决方法
Apr 16 #Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 #Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 #Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 #Javascript
You might like
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
详解PHP数组赋值方法
2015/11/07 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
jquery实现的树形目录实例
2015/06/26 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
js的三种继承方式详解
2017/01/21 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
JavaScript实现图片拖曳效果
2017/09/08 Javascript
深入理解Promise.all
2018/08/08 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
python复制文件的方法实例详解
2015/05/22 Python
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
深入浅析python 中的匿名函数
2018/05/21 Python
Python中Proxypool库的安装与配置
2018/10/19 Python
Flask之请求钩子的实现
2018/12/23 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
回馈慈善的设计师太阳镜:DIFF eyewear
2019/10/17 全球购物
学生干部的自我评价分享
2014/01/18 职场文书
中学生自我鉴定
2014/02/04 职场文书
高二学生评语大全
2014/04/25 职场文书
我有一个梦想演讲稿
2014/05/05 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
父亲节寄语大全
2015/02/27 职场文书
导游词之无锡古运河
2019/11/14 职场文书
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js