zoukankan      html  css  js  c++  java
  • querySelector和getElementById通过id获取元素的区别

    这是sina同事xiaoniu发现的,如下

    <!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".


    相关:

    各浏览器中querySelector和querySelectorAll的实现差异

  • 相关阅读:
    ntp网络时间服务搭建
    Docker虚拟化容器的使用
    第06章 Linux文件权限体系讲解
    Linux命令总结--sed命令
    Linux命令总结--date命令
    第05章 正则表达式及相关命令
    子网划分
    第04章系统目录结构知识讲解
    第03章Linux基础优化
    2.5linux命令介绍
  • 原文地址:https://www.cnblogs.com/snandy/p/2458743.html
Copyright © 2011-2022 走看看