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 "B\26 W\3F".
javascript querySelector和getElementById通过id获取元素的区别的更多相关文章
- JavaScript通过ID获取元素坐标
JavaScript通过ID获取元素坐标 function getElementPos(elementId) { var ua = navigator.userAgent.toLowerCase ...
- 通过ID获取元素 注:获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。
通过ID获取元素 学过HTML/CSS样式,都知道,网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人.那么在网页中,我们通过id ...
- js中用tagname和id获取元素的3种方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生JS与JQ获取元素的区别
刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定 ...
- 通过ID获取元素
网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人.那么在网页中,我们通过id先找到标签,然后进行操作. 语法: document ...
- js之checkbox的代码全选/全不选，使用id获取元素，而不是name
每当有多个选项的时候,都会有一种想法是:全选,全不选,如果子选项有被选,父选项也得被选. 注意:这里是根据id来获取元素的,但是不能直接用getElementById,因为那只能返回一个,而不是集合. ...
- mui选择器和dom获取元素的区别（记得把mui对象转为dom对象才能调用用dom方法）
<!DOCTYPE html><html> <head><meta charset="UTF-8"><meta name=&q ...
- 获取元素Bytagname区别/for循环应用
一:两种获取元素方式的区别.1.var aLi = oUl.getElementsByTagName('li');TagName前面可以加其他东西,id就只能是document,2,Id是静态的,ta ...
- querySelectorAll和getElementsByClassName获取元素的区别
querySelectorAll()方法是HTML5新增的方法,通过传入一个css选择符,返回所有匹配的元素而不仅仅是一个元素.这个方法返回的是一个NodeList的实例.那么它和通过getEleme ...
随机推荐
- Exists 方法
public void ExistsMethodDemo() { string userId = "123"; string userName = "admin" ...
- 正向渲染路径细节 Forward Rendering Path Details
http://www.ceeger.com/Components/RenderTech-ForwardRendering.html This page describes details of For ...
- 从MySQL高可用引出对高可用架构设计的一些思考
高可用HA(High Availability)是分布式系统架构设计中必须考虑的因素之一,它通常是指,通过设计减少系统不能提供服务的时间. 假设系统一直能够提供服务,我们说系统的可用性是100%.如果 ...
- Android近场通信---NFC基础（三）（转）
转自 http://blog.csdn.net/think_soft/article/details/8180203 过滤NFC的Intent 要在你想要处理被扫描到的NFC标签时启动你的应用程序,可 ...
- SQL必知必会03 计算字段 获取当前日期时间 日期时间格式化
- AngularJS - 入门小Demo
AngularJS四大特效 MVC模式.模块化设计.自动化双向数据绑定.依赖注入 如果了解了后端开发知识,想必对这些词汇不会陌生,AngularJS融合了后端开发的一些思想,虽然身为前端框架,但与jQ ...
- [Python]'unicodeescape' codec can't decode bytes in position 2-3: truncated \UXXXXXXXX escape 错误
f = open('C:\Users\xu\Desktop\ceshi.txt') 这时报标题的错误信息 f = open(r'C:\Users\xu\Desktop\ceshi.txt') 改成这个 ...
- JMeter中的HTTPS套接字错误
Apache JMeter对启用SSL的应用程序执行性能和/或负载测试时,SSL套接字错误可能是经常遇到的麻烦,严重阻碍了您的测试工作.本文重点介绍如何通过相应地配置和调优JMeter来克服这些与连接 ...
- Python标准库time
原文:http://www.cnblogs.com/qq78292959/archive/2013/03/22/2975786.html Python官方文档 在程序中,免不了和时间打交道,要学习ti ...
- tensorflow：实战Google深度学习框架第三章
tensorflow的计算模型:计算图–tf.Graph tensorflow的数据模型:张量–tf.Tensor tensorflow的运行模型:会话–tf.Session tensorflow可视 ...