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. HDU2819【二分匹配与矩阵的秩】

    题意: 给出一个矩阵问能否实现对角线全部是1,能的话输出路径,不能的话输出-1 思路: 首先根据矩阵的性质,这一定是一个满秩矩阵,所以只根据行或列交换就一定能实现. 所以行和列构成二分图,然后跑一发匈 ...

  2. Lightoj 1098【数学/玄学】

    题意: 对于每个数求除1和本身的约数和,然后求前n个数的所有这种约数的和: 思路: 首先可以知道对于约数考虑就好了, 对于1-n的约数,n/2-1(减1是因为2不算啊)就是约数为2出现过的次数 如果n ...

  3. 51nod 1416【DFS】

    思路: 暴力整个图,以这个为起点,然后看一下有没有找到一条路是会指向自己且元素个数>=4: #include <bits/stdc++.h> using namespace std; ...

  4. AtCoder Regular Contest 061 E - すぬけ君の地下鉄旅行【最短路】

    具体题解又要搬大哥的了,嘿嘿~ 请点击:G点我 这道题目的难点就是同一家公司的路直接走不需要再花费,然后多了一个公司这个东西,这个不像是边的副权值(瞎说的)之类的东西,这是对于路来说的,路的属性... ...

  5. Elasticsearch学习记录(入门篇)

    Elasticsearch学习记录(入门篇) 1. Elasticsearch的请求与结果 请求结构 curl -X<VERB> '<PROTOCOL>://<HOST& ...

  6. bzoj3196:Tyvj1730二逼平衡树

    传送门 暴力啊,直接树套树上啊 线段树套splay,卡卡常就直接A了 代码: #include<cstdio> #include<iostream> #include<a ...

  7. 自定义UIButton 实现图片和文字 之间距离和不同样式

    喜欢交朋友的加:微信号 dwjluck2013 1.UIButton+ImageTitleSpace.h #import <UIKit/UIKit.h> // 定义一个枚举(包含了四种类型 ...

  8. siege官方文档（译）（一）

    WHAT IS siege? Siege is an open source regression test and benchmark utility. Siege是一款开源回归测试和基准测试工具. ...

  9. C# 文件操作 全收录 追加、拷贝、删除、移动文件、创建目录、递归删除文件夹及文件....

    本文收集了目前最为常用的C#经典操作文件的方法,具体内容如下:C#追加.拷贝.删除.移动文件.创建目录.递归删除文件夹及文件.指定文件夹下 面的所有内容copy到目标文件夹下面.指定文件夹下面的所有内 ...

  10. pycharm 虚拟环境virtualenv迁移到别的机器 无法读取包的问题

    将virtualenv迁移到别的机器时,发现pycharm 总是无法读取目录下所在的包,后来经过实验终于找到了问题所在: 将自己所建的虚拟环境目录下的orig-prefix.txt中保存的路径,改成新 ...