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 相关文章推荐
JQuery里选择超链接的实现代码
May 22 Javascript
js综合应用实例简单的表格统计
Sep 03 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
JS图片预加载插件详解
Jun 21 Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 Javascript
详解Vue 全局引入bass.scss 处理方案
Mar 26 Javascript
Element MessageBox弹框的具体使用
Jul 27 Javascript
js判断两个数组相等的5种方法
May 06 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+javascript的日历控件
2009/11/19 PHP
php小偷相关截取函数备忘
2010/11/28 PHP
php mysql 判断update之后是否更新了的方法
2012/01/10 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
js实现自定义路由
2017/02/04 Javascript
纯js的右下角弹窗实例
2017/03/12 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
利用JS做网页特效_大图轮播(实例讲解)
2017/08/09 Javascript
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
学习使用ExpressJS 4.0中的新Router的用法
2018/11/06 Javascript
原生JS检测CSS3动画是否结束的方法详解
2019/01/27 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
2021/02/08 Javascript
[02:08]DOTA2英雄基础教程 马格纳斯
2014/01/17 DOTA
Python的标准模块包json详解
2017/03/13 Python
python去除字符串中的换行符
2017/10/11 Python
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
python docx 中文字体设置的操作方法
2018/05/08 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
python环境下安装opencv库的方法
2020/03/05 Python
Pandas中DataFrame基本函数整理(小结)
2020/07/20 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
大学生自荐书范文
2015/03/05 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书
JavaScript原型链详解
2021/11/07 Javascript