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. 我不知道的C#—字符串池机制

    字符串具有值类型的特点对字符串,对同一个字符串大量修改或者对多个引用赋值同一个字符串对象时会产生大量的临时字符串对象,影响性能,但是CLR为我们做了一些工作来消除这些弊端.      对同一个字符串大 ...

  2. Python的一些技巧

    a = [32, 37, 28, 30, 37, 25, 27, 24, 35, 55, 23, 31, 55, 21, 40, 18, 50, 35, 41, 49, 37, 19, 40, 41, ...

  3. [Xcode 实际操作]八、网络与多线程-(17)使用网址会话对象URLSession向远程服务器上传图片

    目录:[Swift]Xcode实际操作 本文将演示如何通过网址会话对象URLSession向远程服务器上传图片. 网址会话对象URLSession具有在后台上传和下载.暂停和恢复网络操作.丰富的代理模 ...

  4. IT兄弟连 JavaWeb教程 Servlet会话跟踪 获取Session对象

    Session对象的获取有两种: ●  有参方法: HttpSession request.getSession(boolean isNew) 参数: true:获取一个Session对象,如果之前S ...

  5. 百度搜索：有关Baiduspider的10个问题

    猫宁!!! 参考链接: http://help.baidu.com/question?prod_id=99&class=476&id=2996 https://ziyuan.baidu ...

  6. 第一篇 Nosql讲解之Redis，Memchche,MongoDb的区别

    本篇文章主要介绍Nosql的一些东西,以及Nosql中比较火的三个数据库Redis.Memchache.MongoDb和他们之间的区别.以下是本文章的阅读目录 一.Nosql介绍 1.Nosql简介 ...

  7. Sublime Text 报“Pylinter could not automatically determined the path to lint.py

    Pylinter could not automatically determined the path to lint.py. please provide one in the settings ...

  8. 安装CocoaPods，ios的库安装工具

    1.需要ruby环境,mac pro自带了 2.终端输入:sudo gem install cocoapods

  9. PostgreSQL - 怎么将时间转换成秒

    保留原来的毫秒值 select extract(epoch from '03:21:06.678'::time); 这个extract(epoch from )函数得到的是时间是秒单位,如果需要毫秒值 ...

  10. C# 可空类型（Nullable）

    C# 提供了一个特殊的数据类型,nullable 类型(可空类型),可空类型可以表示其基础值类型正常范围内的值,再加上一个 null 值. 例如,Nullable< Int32 >,读作& ...