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 Tab选项卡效果代码改进版
Apr 01 Javascript
判断输入是否为空,获得输入类型的JS代码
Oct 30 Javascript
javascript间隔刷新的简单实例
Nov 14 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
javascript实现Email邮件显示与删除功能
Nov 21 Javascript
分享一个精简的vue.js 图片lazyload插件实例
Mar 13 Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
微信小程序聊天功能的示例代码
Jan 13 Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 Javascript
JavaScript实现左右滚动电影画布
Feb 06 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 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的mysqli_thread_id()函数讲解
2019/01/24 PHP
PHP获取ttf格式文件字体名的方法示例
2019/03/06 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
Jquery中val()表单取值赋值的实例代码
2013/08/15 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
vue购物车插件编写代码
2017/11/27 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
在Python下使用Txt2Html实现网页过滤代理的教程
2015/04/11 Python
Python实现方便使用的级联进度信息实例
2015/05/05 Python
Python ORM编程基础示例
2020/02/02 Python
Python基于Socket实现简单聊天室
2020/02/17 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
python 制作网站小说下载器
2021/02/20 Python
Python 求向量的余弦值操作
2021/03/04 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
职工运动会感言
2014/02/07 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python
Python list列表删除元素的4种方法
2021/11/01 Python
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers