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. 两种好用的清除浮动的小技巧（clearfix hack）

    方法一:使用内容生成的方式清除浮动 这种方法不能解决margin在垂直边界上的叠加问题,如果不涉及margin的边界叠加问题使用这种方法清除浮动就行了 . /* :after 选择器向选定的元素之后插 ...

  2. LED与OLED的区别:

    LED与OLED的区别: led和oled的发光原理是一样的,只 不过区别是用的材料不一样led用的是金属材料,而oled用的是有机物材料. OLED不需要背光源,自己本身会发光,是采用发光二极管阵列 ...

  3. git 创建分支并关联远程分支

    从master分支,重新拉取出一个新的分支,名字为dev,具体命令如下: 1. 切换到被copy的分支(master),从服务器拉取最新版本 $git checkout master $git pul ...

  4. java利用myeclipse自带三大框架搭建三大框架（Hibernate+Struts2+Spring）过程详解

    搭建过程因人而异,我的搭建过程大致是这样的: 1.创建一个javaweb项目: 2.导入Spring框架,上图: 2.1: 2.2: 2.3: 3.导入struts2框架,上图: 3.1: 3.2: ...

  5. collections 中 typing 中对象的引用

    from typing import ( Callable as Callable, Container as Container, Hashable as Hashable, Iterable as ...

  6. Day1课后作业：用户登录简单版

    user = "gaojun"password ="123abc"for i in range(3): user = input('请输入用户名:') pass ...

  7. html 手机端click 事件去掉黑色阴影效果

    添加css样式 html{-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);} 1.  -web ...

  8. 7、斐波那契数列、跳台阶、变态跳台阶、矩形覆盖------------>剑指offer系列

    题目:斐波那契数列 大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0). f(n) = f(n-1) + f(n-2) 基本思路 这道题在剑指offe ...

  9. rpm包的安装方法

    每次都记不住,这次必须整理一下!cd到你存放rpm文件包的目录rpm -ivh linuxqq-v1.0.2-beta1.i386.rpm安装时可能会遇到缺少包的错误.rpm -ivh --repla ...

  10. [转+补]Android打包so后魅族5中安装运行崩溃问题的解决方法

    上周在做噪音检测so集成中,遇到不同的so库打包到 APK 时,安装在某些机器上,出现 java.lang.UnsatisfiedLinkError 加载失败. 为此,深究了一下原理,和给出了解决方案 ...