脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → querySelector和getElementById

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

 更新时间：2012年04月20日 11:21:42   投稿：mdxy-dxy  
这是sina同事xiaoniu发现的，querySelector和getElementById通过id获取元素的区别

这是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".

您可能感兴趣的文章:

相关文章

  • js闭包学习心得总结

    js闭包学习心得总结

    这篇文章主要介绍了JS闭包的学习心得，以及分析其中遇到的问题，需要的朋友跟着参考下吧。
    2018-04-04
  • 如何在TypeScript使用模块化以及注意事项详解

    如何在TypeScript使用模块化以及注意事项详解

    在TypeScript中就像在EC5中一样,任何包含顶级import或export的文件都被认为是一个模块,下面这篇文章主要给大家介绍了关于如何在TypeScript使用模块化以及注意事项的相关资料,需要的朋友可以参考下
    2022-10-10
  • js中document.write使用过程中的一点疑问解答

    js中document.write使用过程中的一点疑问解答

    本文为大家介绍下为何如果在页面加载完后如果调用document.write就会覆盖整个文档
    2014-03-03
  • 判断iOS、Android以及PC端的示例代码

    判断iOS、Android以及PC端的示例代码

    这篇文章主要给大家介绍了关于如何判断iOS、Android以及PC端的相关资料，主要是利用navigator.userAgent来实现，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧
    2018-11-11
  • 浅谈JavaScript中this的指向更改

    浅谈JavaScript中this的指向更改

    这篇文章主要介绍了浅谈JavaScript中this的指向更改，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • JavaScript查看数据返回值的方法

    JavaScript查看数据返回值的方法

    console.log()、alert() 都是JavaScript中用于在开发过程中输出信息或向用户显示消息的不同方法,它们的主要区别在于目的、使用场景以及展示方式,本文将给大家介绍JavaScript 中怎么看数据返回值,需要的朋友可以参考下
    2024-07-07
  • 微信小程序数字滚动插件使用详解

    微信小程序数字滚动插件使用详解

    这篇文章主要介绍了微信小程序数字滚动插件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-02-02
  • 图文详解JavaScript的原型对象及原型链

    图文详解JavaScript的原型对象及原型链

    许多人对JavaScript的原型及原型链仍感到困惑，网上的文章又大多长篇大论，令读者不明觉厉。下面小编将用最简洁明了的图文介绍JavaScript的原型及原型链。
    2016-08-08
  • 理解javascript中的MVC模式

    理解javascript中的MVC模式

    这篇文章主要为大家介绍了javascript中的MVC模式，MVC是一种软件架构模式，一般把软件模式分为三部分，本文就针对MVC模式的三部分进行讲解，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 小程序实现发表评论功能

    小程序实现发表评论功能

    这篇文章主要为大家详细介绍了小程序实现发表评论功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-07-07

最新评论