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 相关文章推荐
Dojo之路:如何利用Dojo实现Drag and Drop效果
Apr 10 Javascript
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
JS getMonth()日期函数的值域是0-11
Feb 15 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
jquery实现checkbox 全选/全不选的通用写法
Feb 22 Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
JS FormData对象使用方法实例详解
Feb 12 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根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
使用PHP Socket 编程模拟Http post和get请求
2014/11/25 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
php 遍历目录,生成目录下每个文件的md5值并写入到结果文件中
2016/12/12 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
&amp;lt;script defer&amp;gt; defer 是什么意思
2009/05/10 Javascript
10个实用的脚本代码工具
2010/05/04 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
extjs render 用法介绍
2013/09/11 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
2016/03/31 Javascript
AngularJS 指令详细介绍
2016/07/27 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
JS鼠标滚动分页效果示例
2017/07/05 Javascript
nodeJs实现基于连接池连接mysql的方法示例
2018/02/10 NodeJs
webpack分离css单独打包的方法
2018/06/12 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
详解Python中的条件判断语句
2015/05/14 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
Python实现打印实心和空心菱形
2019/11/23 Python
Square Off美国/加拿大:世界上最聪明的国际象棋棋盘
2018/12/06 全球购物
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
机关职员工作检讨书
2014/10/23 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
第二次离婚起诉书
2015/05/18 职场文书
致运动员赞词
2015/07/22 职场文书
毕业晚宴祝酒词
2015/08/11 职场文书
Python面向对象之成员相关知识总结
2021/06/24 Python
Python超详细分步解析随机漫步
2022/03/17 Python
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL