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之三(封装和信息隐藏)
Jan 27 Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
js中判断对象是否为空的三种实现方法
Dec 23 Javascript
jquery常用操作小结
Jul 21 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
vue+element的表格实现批量删除功能示例代码
Aug 17 Javascript
解决Angular2 router.navigate刷新页面的问题
Aug 31 Javascript
通过原生vue添加滚动加载更多功能
Nov 21 Javascript
vue组件系列之TagsInput详解
May 14 Javascript
vue实现可移动的悬浮按钮
Mar 04 Vue.js
仿微博字符限制效果实现代码
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
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
推荐一本PHP程序猿都应该拜读的书
2014/12/31 PHP
php获取YouTube视频信息的方法
2015/02/11 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
php上传图片类及用法示例
2016/05/11 PHP
PHP获取指定日期是星期几的实现方法
2016/11/30 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
高效的jquery数字滚动特效
2015/12/17 Javascript
javascript基本语法
2016/05/31 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
vue组件与复用详解
2018/04/08 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
Vue路由的模块自动化与统一加载实现
2020/06/05 Javascript
python如何查看系统网络流量的信息
2016/09/12 Python
python小程序实现刷票功能详解
2019/07/17 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
python应用Axes3D绘图(批量梯度下降算法)
2020/03/25 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
C语言如何决定使用那种整数类型
2016/11/26 面试题
腾讯公司的一个sql题
2013/01/22 面试题
护理助产毕业生的求职信
2014/03/02 职场文书
食堂采购员岗位职责
2014/03/17 职场文书
建筑安全生产目标责任书
2014/07/23 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
2015国庆节放假通知范文
2015/07/30 职场文书
百日宴上的祝酒词
2015/08/10 职场文书