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 相关文章推荐
一个加载js文件的小脚本
Jun 28 Javascript
js中window.open()的所有参数详细解析
Jan 09 Javascript
Jquery 点击按钮自动高亮实现原理及代码
Apr 25 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 Javascript
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
JS闭包原理与应用经典示例
Dec 20 Javascript
深入了解Hybrid App技术的相关知识
Jul 17 Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 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实现定时生成HTML网站首页实例代码
2008/11/20 PHP
PHP+Mysql+jQuery实现发布微博程序 jQuery篇
2011/10/08 PHP
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
php计算数组不为空元素个数的方法
2014/01/27 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
js实现网页图片延时加载 提升网页打开速度
2016/01/26 Javascript
angularjs封装bootstrap时间插件datetimepicker
2016/06/20 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
Vuejs实现购物车功能
2017/11/05 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
Django框架自定义模型管理器与元选项用法分析
2019/07/22 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
专升本自我鉴定
2013/10/10 职场文书
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
电大本科自我鉴定
2014/02/05 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
PHP判断是否是json字符串
2021/04/01 PHP
编写python程序的90条建议
2021/04/14 Python