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 盒模型 尺寸深入理解
Dec 31 Javascript
Node.js开发之访问Redis数据库教程
Jan 14 Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
JavaScript类型系统之基本数据类型与包装类型
Jan 06 Javascript
Bootstrap的基本应用要点浅析
Dec 19 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
May 01 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
Vue之封装公用变量以及实现方式
Jul 31 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 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中的多态性[译]
2011/08/02 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
判断、添加和删除WordPress置顶文章的相关PHP函数小结
2015/12/10 PHP
php实现统计目录文件大小的函数
2015/12/25 PHP
jQuery的链式调用浅析
2010/12/03 Javascript
javascript 闭包疑问
2010/12/30 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
Python通过matplotlib画双层饼图及环形图简单示例
2017/12/15 Python
python如何对实例属性进行类型检查
2018/03/20 Python
python使用folium库绘制地图点击框
2018/09/21 Python
Python实现将通信达.day文件读取为DataFrame
2018/12/22 Python
django框架模板语言使用方法详解
2019/07/18 Python
在Python中等距取出一个数组其中n个数的实现方式
2019/11/27 Python
解决Tensorflow 使用时cpu编译不支持警告的问题
2020/02/03 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
关爱留守儿童倡议书
2014/04/15 职场文书
水电站项目建议书
2014/05/12 职场文书
小学教师个人先进事迹材料
2014/05/17 职场文书
同学聚会策划方案
2014/06/06 职场文书
购房意向书
2014/08/30 职场文书
2014年销售工作总结范文
2014/12/01 职场文书
运动会表扬稿范文
2015/05/05 职场文书
MongoDB数据库之添删改查
2022/04/26 MongoDB
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技