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 相关文章推荐
js中根据字数截取字符串,不能截断url
Jan 12 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
Jan 09 Javascript
layui选项卡效果实现代码
May 19 Javascript
JavaScript实现打印星型金字塔功能实例分析
Sep 27 Javascript
JS使用Date对象实时显示当前系统时间简单示例
Aug 23 Javascript
对vue事件的延迟执行实例讲解
Aug 28 Javascript
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 Javascript
超详细小程序定位地图模块全系列开发教学
Nov 24 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
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
基于JQuery的动态删除Table表格的行和列的代码
2011/05/12 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
Python3.5 创建文件的简单实例
2018/04/26 Python
python中的二维列表实例详解
2018/06/19 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
Jimmy Choo美国官网:周仰杰鞋子品牌
2018/06/08 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
Java面试笔试题大全
2016/11/23 面试题
后勤人员自我评价怎么写
2013/09/19 职场文书
2014年小学植树节活动方案
2014/03/02 职场文书
社区戒毒工作方案
2014/06/04 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
《学会看病》教学反思
2016/02/17 职场文书