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 遮照层实现代码
Mar 31 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
Apr 23 Javascript
jquery 实现两Select 标签项互调示例代码
Sep 25 Javascript
使用javascript实现简单的选项卡切换
Jan 09 Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 Javascript
javascript求日期差的方法
Mar 02 Javascript
浅析$(function) ready和onload 的区别
Sep 03 Javascript
angular分页指令操作
Jan 09 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
Feb 14 Javascript
浅谈javascript如何获取文件后缀名
Aug 07 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
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
十大使用PHP框架的理由
2015/09/26 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
2011/11/18 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
你真的了解BOM中的history对象吗
2017/02/13 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
[06:04]DOTA2国际邀请赛纪录片:Just For LGD
2013/08/11 DOTA
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
python解决pandas处理缺失值为空字符串的问题
2018/04/08 Python
对Python Class之间函数的调用关系详解
2019/01/23 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
python 实现超级玛丽游戏
2020/11/25 Python
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
怎样声明接口
2014/09/19 面试题
中职生自我鉴定范文
2013/10/03 职场文书
早餐连锁店计划书
2014/01/08 职场文书
晚宴邀请函范文
2014/01/15 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
授权委托书怎么写
2014/04/03 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书
房屋登记授权委托书范本
2014/10/09 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
python和C/C++混合编程之使用ctypes调用 C/C++的dll
2022/04/29 Python