这是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".
分享到：
相关推荐
是sina同事xiaoniu发现的，querySelector和getElementById通过id获取元素的区别
document.getElementById()：通过id获取一个Dom元素 document.getElementsByClassName()：通过class名字获取一个或多个Dom元素（伪数组） document.getElementsByTagName()：通过标签名字获取一个或多个Dom元素...
javascript DOM 选择器 querySelector 介绍
querySelector 但用于父节点。 给定一个节点，选择与给定选择器匹配的父/祖先。 安装 $ npm install --save select-parent 用法 var selectParent = require ( 'select-parent' ) var redDiv = selectParent ( 'div...
querySelector 定义和用法 querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll...
其实关于querySelector和querySelectorAll的介绍说明很多。在此主要是做个记录
先按W3C的规范来说这两个方法应该返回的内容吧，大家先看下官方的解释，然后根据需要选择使用
1、通过标签获取元素，...2、通过id获取页面元素 var header = document.getElementById(header);//id获取元素 3、通过class名字获取页面元素 var list = document.getElementsByClassName('list');//返回一个
a)在页面设置元素，并使用document.querySelector ("div")，获取div元素。 b)给元素添加onclick ()单击事件。 c)处理onclick函数逻辑 d)通过style属性修改元素的背景色和宽度；
querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。 目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 ...
//获取元素 var oBox = document.querySelector(".box"); var oTime = document.querySelector(".time"); var oHour = document.getElementById("hour"); var oMin = document.getElementById("min"); var ...
使用Vanilla js和Web组件开发Web应用程序时，通常需要使用querySelector从导入的模板中选择元素。 此扩展为选择器提供自动补全功能，并提供代码操作来定义相应的类属性。 产品特点 javascript / typescript中的...
其实关于querySelector和querySelectorAll的介绍说明很多,在此主要是做个记录
querySelector和querySelectorAll的参数须是符合 css selector 的字符串。不同的是querySelector返回的是一个对象，querySelectorAll返回的一个集合(NodeList)
实际前端开发工作中，我们经常会遇到要获取某些元素...也因此，JavaScript可以通过DOM API获取元素节点，方法有如下几种：其中querySelector()和querySelectorAll()为ES5的元素选择方法 1、getElementById()： 接收一个
HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。 用法 两个方法使用...