javascript querySelector和getElementById通过id获取元素的区别
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获取元素的区别的更多相关文章
- JavaScript通过ID获取元素坐标
JavaScript通过ID获取元素坐标 function getElementPos(elementId) { var ua = navigator.userAgent.toLowerCase ...
- 通过ID获取元素 注:获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。
通过ID获取元素 学过HTML/CSS样式,都知道,网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人.那么在网页中,我们通过id ...
- js中用tagname和id获取元素的3种方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生JS与JQ获取元素的区别
刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定 ...
- 通过ID获取元素
网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人.那么在网页中,我们通过id先找到标签,然后进行操作. 语法: document ...
- js之checkbox的代码全选/全不选，使用id获取元素，而不是name
每当有多个选项的时候,都会有一种想法是:全选,全不选,如果子选项有被选,父选项也得被选. 注意:这里是根据id来获取元素的,但是不能直接用getElementById,因为那只能返回一个,而不是集合. ...
- mui选择器和dom获取元素的区别（记得把mui对象转为dom对象才能调用用dom方法）
<!DOCTYPE html><html> <head><meta charset="UTF-8"><meta name=&q ...
- 获取元素Bytagname区别/for循环应用
一:两种获取元素方式的区别.1.var aLi = oUl.getElementsByTagName('li');TagName前面可以加其他东西,id就只能是document,2,Id是静态的,ta ...
- querySelectorAll和getElementsByClassName获取元素的区别
querySelectorAll()方法是HTML5新增的方法,通过传入一个css选择符,返回所有匹配的元素而不仅仅是一个元素.这个方法返回的是一个NodeList的实例.那么它和通过getEleme ...
随机推荐
- apache2.4.35 403 forbidden 解决办法
- BZOJ3289【莫队算法+树状数组+离散化】
思路: 区间逆序数即是交换次数. 逆序数,可以用树状数组吧. 怎么处理区间变换的时候求逆序数啊.. 这里分成左边的增/删,右边的增/删 因为是按时序插入, 所以左边增,增一个数,计算:ans+=sun ...
- laravel C层 （控制器）
<?php namespace App\Http\Controllers; use App\Index; use App\Http\Controllers\Controller; class I ...
- 51nod1402(贪心)
题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1402 题意:中文题诶- 思路:贪心 对于一个桩点,如果我们只考 ...
- 洛谷P3312 [SDOI2014]数表（莫比乌斯反演+树状数组）
传送门 不考虑$a$的影响 设$f(i)$为$i$的约数和 $$ans=\sum\limits_{i=1}^n\sum\limits_{j=1}^nf(gcd(i,j))$$ $$=\sum\limi ...
- [Xcode 实际操作]八、网络与多线程-(2)使用UIApplication对象打开网页
目录:[Swift]Xcode实际操作 本文将演示如何使用应用程序单例对象,打开指定的网页. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKi ...
- 笔记-JavaWeb学习之旅10
Servlet server applet运行在服务器端的小程序,servlet就是一个接口,定义了Java类被浏览器访问到的规则(Java类重写这个接口,就可以被浏览器(tomcat)识别) Ser ...
- zookeeper 搭建
zookeeper 版本为zookeeper 3.4.8 操作系统为ubuntu 12.04 64位 zookeeper 单机搭建 解压zookeeper 包 .tar.gz -C /root/sof ...
- A. Office Keys （ Codeforces Round #424 (Div. 1, rated, based on VK Cup Finals) ）
#include <iostream> #include <stdio.h> #include <string.h> #include <algorithm& ...
- 找回phpstorm删除文件/文件夹（phpstorm删除文件/文件夹的恢复）
恢复phpstorm删除文件/文件夹 再开发的过程中,不小心删除了一个文件夹,后来百度了一下如何恢复,还好PHPStorm是个十分强大的编辑器,不小心删除了文件还可以恢复.一下是恢复的操作: 打开Vi ...