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 相关文章推荐
javascript的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
Javascript实现的类似Google的Div拖动效果代码
Aug 09 Javascript
jQuery下通过replace字符串替换实现大小图片切换
May 22 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
Jan 16 Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 Javascript
JS中的多态实例详解
Oct 15 Javascript
Vue中的methods、watch、computed的区别
Nov 26 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
node.js使用fs读取文件出错的解决方案
Oct 23 Javascript
Node.js 中判断一个文件是否存在
Aug 24 Javascript
vscode 调试 node.js的方法步骤
Sep 15 Javascript
JavaScript实现原型封装轮播图
Dec 27 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比较两个绝对时间的大小
2014/01/31 PHP
深入浅析PHP7.0新特征(五大新特征)
2015/10/29 PHP
Thinkphp框架开发移动端接口(1)
2016/08/18 PHP
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
js实现上传图片之上传前预览图片
2013/03/25 Javascript
JavaScript实现select添加option
2015/07/03 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
深入解析Python中的变量和赋值运算符
2015/10/12 Python
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
一道SQL面试题
2012/12/31 面试题
丧事主持词大全
2014/04/02 职场文书
大学生党员承诺书
2014/05/20 职场文书
一份文言文检讨书
2014/09/13 职场文书
2015年计划生育责任书
2015/05/08 职场文书
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python