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 相关文章推荐
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 Javascript
js实现简单锁屏功能实例
May 27 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 Javascript
利用React-router+Webpack快速构建react程序
Oct 27 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
Jan 05 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
12条写出高质量JS代码的方法
Jan 07 Javascript
JavaScript对象原型链原理解析
Jan 22 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随机生成唯一HASH值自定义函数
2015/04/20 PHP
php实现将wav文件转换成图像文件并在页面中显示的方法
2015/04/21 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
打造基于jQuery的高性能TreeView(asp.net)
2011/02/23 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
javascript五图轮播切换实用版
2012/08/17 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
用js制作淘宝放大镜效果
2020/10/28 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
详解angular element()方法使用
2017/04/08 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
详解Python中的正则表达式的用法
2015/04/09 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
详解Python中类的定义与使用
2017/04/11 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
智能钱包:Ekster
2019/11/21 全球购物
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
高三自我鉴定怎么写
2013/10/19 职场文书
普师专业个人自荐信范文
2013/11/26 职场文书
验房委托书
2014/08/30 职场文书
政协常委会议主持词
2015/07/03 职场文书
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang