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. 算法学习--Day4

    今天写了两章题目,仍然是比较基础的内容.感觉时间好紧张,怕来不及,所以以后要加快速度了. 今天写的最多的是查找类题目,关键是二分查找的掌握. 题目描述 输入一个数n,然后输入n个数值各不相同,再输入一 ...

  2. caller和callee的解析与使用-型参与实参的访问

    caller:是一个函数引用(当前执行函数”被调用的地方”{即这个”被调用的地方”函数引用},如果这个”被调用的地方”是window,则返回[null]),是函数名的属性: var a = funct ...

  3. [Xcode 实际操作]九、实用进阶-(25)使用Storyboard(故事版)的约束功能，使项目快速适配各种分辨率的设备

    目录:[Swift]Xcode实际操作 本文将演示使用故事版的约束功能,使项目快速适配各种分辨率的设备. 在项目导航区打开并编辑主故事版[Main.storyboard]. 在当前故事版中,已经存在一 ...

  4. PHP在cli模式下传参说明

    命令行下输入php -help会列出所有可用的参数,如下截图: -a 代表以交互式模式运行: -c 指定ph.ini -n 不使用任何php.ini配置 -d foo[=bar] 定义一个INI实体, ...

  5. MyBatis源码解析（一）

    <!-- mybatis文件配置,扫描所有mapper文件 --><!--SqlSessionFactoryBean的初始化参数--> <bean id="sq ...

  6. Java 时区（转）

    http://blog.csdn.net/wangpeng047/article/details/8560690

  7. js 左侧树添加选择样式

    选择样式添加 menuToggle: function() { var menus = $('.nav-primary').children('li'); var tog = menus.has('. ...

  8. EM算法(徐亦达)笔记

  9. oracle 数据库 存储过程

    destinct(去除重复行), to_char(转换自符串), to_date(日期格式函数), substr(截取自符串), lower(将字母转换为小写), upper(将字母转换为小写), t ...

  10. opencart 安装

    1:安装 php5    apache2  mysql 2:下载opencart wget https://github.com/opencart/opencart/archive/master.zi ...