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的实现差异

  • 相关阅读:
    JS进阶篇--函数防抖(debounce)
    vue注册全局组件分页
    vue下拉框清空
    vue中的watch监听
    五:request和response的使用
    四:servlet最终形态
    三:登录功能实现,servlet
    二:Tomcat与登录
    一:JavaWeb
    Linux安装JAVA并且配置环境
  • 原文地址:https://www.cnblogs.com/snandy/p/2458743.html
Copyright © 2011-2022 走看看