zoukankan      html  css  js  c++  java
  • javascript querySelector和getElementById通过id获取元素的区别

    querySelector和getElementById通过id获取元素的区别

    <!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 "B26 W3F".

  • 相关阅读:
    前端开发之初探五
    前端开发之初探四
    前端开发之初探三
    漫谈
    前端工程师的发展之路
    SVG
    前端开发之初探一
    前端开发之初探二
    详解浏览器缓存
    webStroage案例
  • 原文地址:https://www.cnblogs.com/wicub/p/3481720.html
Copyright © 2011-2022 走看看