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获取元素的区别的更多相关文章

  1. JavaScript通过ID获取元素坐标

    JavaScript通过ID获取元素坐标 function getElementPos(elementId) {    var ua = navigator.userAgent.toLowerCase ...

  2. 通过ID获取元素 注:获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。

    通过ID获取元素 学过HTML/CSS样式,都知道,网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人.那么在网页中,我们通过id ...

  3. js中用tagname和id获取元素的3种方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 原生JS与JQ获取元素的区别

    刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定 ...

  5. 通过ID获取元素

    网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人.那么在网页中,我们通过id先找到标签,然后进行操作. 语法: document ...

  6. js之checkbox的代码全选/全不选，使用id获取元素，而不是name

    每当有多个选项的时候,都会有一种想法是:全选,全不选,如果子选项有被选,父选项也得被选. 注意:这里是根据id来获取元素的,但是不能直接用getElementById,因为那只能返回一个,而不是集合. ...

  7. mui选择器和dom获取元素的区别（记得把mui对象转为dom对象才能调用用dom方法）

    <!DOCTYPE html><html> <head><meta charset="UTF-8"><meta name=&q ...

  8. 获取元素Bytagname区别/for循环应用

    一:两种获取元素方式的区别.1.var aLi = oUl.getElementsByTagName('li');TagName前面可以加其他东西,id就只能是document,2,Id是静态的,ta ...

  9. querySelectorAll和getElementsByClassName获取元素的区别

    querySelectorAll()方法是HTML5新增的方法,通过传入一个css选择符,返回所有匹配的元素而不仅仅是一个元素.这个方法返回的是一个NodeList的实例.那么它和通过getEleme ...

随机推荐

  1. Shader第十三讲 Alpha混合

    http://blog.sina.com.cn/s/blog_471132920101d8z5.html Alpha Blending,中文译作Alpha混合Blending就是控制透明的.处于光栅化 ...

  2. 前端开发 - Emmet使用手册

    Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具: 基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为"片段".虽然片段能很 ...

  3. android webview 视频相关

    //设置为false则可以自动播放页面音视频 页面必须设置autoplay或者调用document.getElementById("video").play(); $(" ...

  4. 解决thymeleaf严格html5校验的方法

    用的是springboot加thyemleaf做静态模板. 然后会有个很烦的东西,就这个静态模板对html的格式非常严格,导致很多框架的格式都用不了,然后这里有个解除的方法: 1.在pom中添加依赖: ...

  5. Android实现沉浸式状态栏（必须高逼格）

     情况一:保留状态栏 只是将我们的布局嵌入到状态栏中 方法一:通过设置theme主题 因为 API21 之后(也就是 android 5.0 之后)的状态栏,会默认覆盖一层半透明遮罩.且为了保持4.4 ...

  6. SpringBoot 2.x （9）：整合Mybatis注解实战

    SSM框架再熟悉不过了,不过以前通常是使用XML写SQL语句 这里用SpringBoot整合Mybatis并且使用注解进行开发 依赖: <!-- Mybatis --> <depen ...

  7. vue之导入Bootstrap和Jquery

    Vue引入bootstrap主要有两种方法 方法一:在main.js中引入,此方法导入的bootstrap中对于html,body的一些预设置的css样式可能无效. 一.引入jQuery 在当前项目的 ...

  8. vscode设置html默认浏览器

    Vscode版本:1.30.2,设置方法:file→preference→settings,剩余设置如下图.

  9. iOS 如何解决并发请求时，只接受最后一个请求返回的结果

      大致意思是 虽然NSOperation 的cancel 并不能取消请求,但是可以对这个NSOperation进行标记. 当cancel 属性是YES时,表明 NSOperation虽然已经执行,并 ...

  10. cacti添加被监控机全过程

    在被监控端上的操作: 1.在被监控机器上root目录下建立文件 test.sh chmod 777 test.sh cat test #!/bin/bash echo $RANDOM 2.在snmpd ...