querySelector和getElementById通过id获取元素的区别
2012-04-20 10:58
591 查看
这是sina同事xiaoniu发现的,如下
两个函数bySelector,byId分别通过querySelector和getElementById获取元素。
页面上有id为“02E503E2A1C011CFC85B7B701A0677EC0900000000000001”的元素。
结果:所有支持querySelector的浏览器中通过bySelector均获取不到(报错),但通过getElementById却可以获取。
开始怀疑是id的字符串太长的原因导致querySelector获取不到。真正原因却是querySelector按css规范实现,即css标识符也不能以数字开头。
相关:
各浏览器中querySelector和querySelectorAll的实现差异
<!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".相关:
各浏览器中querySelector和querySelectorAll的实现差异
相关文章推荐
- javascript querySelector和getElementById通过id获取元素的区别
- js querySelector和getElementById通过id获取元素的区别
- js querySelector和getElementById通过id获取元素的区别
- 关于document.getElementById(id)获取不到元素
- js通过getElementById或getElementsByClassName()【】等方式获取元素为null或undefined
- getElementById 通过ID来取得元素
- js通过标签元素id,用document.getElementById().style设置标签元素的css属性
- document.getElementById("idName")用js方法获取元素,则设定风格属性的方法为
- JS中获取元素使用getElementByID()、getElementsByName()、getElementsByTagName()的用法和区别
- 常用的4种获取元素方法的区别, getElementById, ..ClassName, ..TagName, .Name
- getElementById Vs getElementsByName(Javascript)细说HTML元素的ID和Name属性的区别
- JAVASCRIPT:漂浮的广告,status设置,getElementById("id")获取文件名称
- Jquery中$("#id")和document.getElementById("id")的区别
- iframe子窗体和父窗体互相调用,通过document.getElementById("name_iframe").contentWindow获取iframe的window对象,支持多浏览器!
- 使用getElementById获取xml中的指定元素
- 使用getElementById获取xml中的指定元素
- getElementById和querySelector方法的区别之处
- document.getElementById("id").value与$("#id").val()之间的区别
- getElementById Vs getElementsByName(Javascript)细说HTML元素的ID和Name属性的区别
- getElementById和$(#id)区别简述