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 相关文章推荐
关于锚点跳转及jQuery下相关操作与插件
Oct 01 Javascript
js实现拉伸拖动iframe的具体代码
Aug 03 Javascript
jquery得到font-size属性值实现代码
Sep 30 Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
Sep 06 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
Node.js的特点详解
Feb 03 Javascript
用js制作淘宝放大镜效果
Oct 28 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
js通过循环多张图片实现动画效果
Dec 19 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
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
PHP超全局数组(Superglobals)介绍
2015/07/01 PHP
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
一个JavaScript操作元素定位元素的实例
2014/10/29 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
JS中动态创建元素的三种方法总结(推荐)
2016/10/20 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
JS制作简易计算器的实例代码
2020/07/04 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
举例详解Python中的split()函数的使用方法
2015/04/07 Python
python 动态加载的实现方法
2017/12/22 Python
Python的条件锁与事件共享详解
2019/09/12 Python
Python unittest框架操作实例解析
2020/04/13 Python
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
小学教师师德感言
2014/02/10 职场文书
多媒体专业自我鉴定
2014/02/28 职场文书
安全责任书模板
2014/07/22 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
新生入学欢迎词
2015/01/26 职场文书
开除通知书范本
2015/04/25 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书