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短路原理的应用示例 精简代码的途径
Dec 13 Javascript
js实现表单多按钮提交action的处理方法
Oct 24 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
discuz表情的JS提取方法分析
Mar 22 Javascript
vue实现单选和多选功能
Aug 11 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
简单了解node npm cnpm的具体使用方法
Feb 27 Javascript
React精髓!一篇全概括小结(急速)
May 23 Javascript
js实现烟花特效
Mar 02 Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 Javascript
js如何验证密码强度
Mar 18 Javascript
JS自定义右键菜单实现代码解析
Jul 16 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
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
PHP中使用unset销毁变量并内存释放问题
2012/07/05 PHP
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
Ajax::prototype 源码解读
2007/01/22 Javascript
juqery 学习之四 筛选查找
2010/11/30 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
vue实现评价星星功能
2020/06/30 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
python实现跨文件全局变量的方法
2014/07/07 Python
Python中使用第三方库xlrd来读取Excel示例
2015/04/05 Python
python抽象基类用法实例分析
2015/06/04 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
Python中常用信号signal类型实例
2018/01/25 Python
python在文本开头插入一行的实例
2018/05/02 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
django 控制页面跳转的例子
2019/08/06 Python
django ORM之values和annotate使用详解
2020/05/19 Python
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
法国春天百货官网:Printemps.com
2020/06/29 全球购物
Java程序开发中如何应用线程
2016/03/03 面试题
英语专业应届生求职信范文
2013/11/15 职场文书
仓库门卫岗位职责
2013/12/22 职场文书
空乘英文求职信
2014/04/13 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers