`
zhouyrt
  • 浏览: 1172546 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

 

 

 

分享到:
评论

相关推荐

    js querySelector和getElementById通过id获取元素的区别

    `document.getElementById`只能通过ID获取单个元素,而`document.querySelector`则可以根据更广泛的CSS选择器来获取元素。比如你可以用`document.querySelector('.className')`来获取类选择器匹配的元素,或者使用`...

    js获取表格中的元素id

    1. `getElementById()`:这是最直接的方法,用于根据给定的ID获取元素。例如,如果知道单元格ID是"cell1",可以这样写: ```javascript var cell = document.getElementById("cell1"); ``` 这将返回匹配ID的元素...

    06-作业解答 获取元素方式_web_

    在“06-作业解答 获取元素方式_web_”这个主题中,我们主要探讨的是WEB前端编程的基础知识,特别是关于如何在网页上获取和操作元素的技术。这是一个适合小白入门的教程,旨在帮助初学者从基础到精通逐步掌握前端...

    JS操作DOM元素属性和方法大全

    - `getElementById`: 通过ID获取元素。 - `getElementsByClassName`: 通过类名获取元素集合。 - `getElementsByTagName`: 通过标签名获取元素集合。 - `querySelector`: 获取匹配CSS选择器的第一个元素。 - `...

    JavaScript中常见获取元素的方法汇总

    首先,通过元素ID获取DOM元素是最常见和直接的方法。JavaScript提供了一个名为getElementById的方法,用于返回具有指定ID的元素。这个方法属于document对象,需要通过document对象来调用。需要注意的是,ID区分大小...

    js中利用tagname和id获取元素的方法

    &lt;title&gt;3种用tagname和id获取元素的方法 body{ margin:0; } ul{ margin:0; padding:0; list-style:none; } h1{ margin:0; } &lt;div class="box" id="box"&gt; 分类名称 &lt;ul class="box-list" id="box-list"&gt; ...

    javascript高级选择器querySelector和querySelectorAll全面解析

    以上三种方式都可以获取到同一个元素,区别在于它们的方法和返回值类型不同。 在使用这些选择器时,开发者还需要了解与之相关的其他JavaScript库或框架中的方法。比如,jQuery中的 `$(element).find(selector)` ...

    jmpopups获取input元素值

    6. **API文档**:了解 jmpopups 的API是学习如何使用它的关键,这可能包括初始化函数、创建弹窗的方法,以及获取元素值的特定方法。 7. **错误处理**:在实际应用中,处理用户未填写或无效输入的情况也很重要,这...

    分析网页对网页元素的获取方法提供参考

    例如,`document.getElementById()`用于通过ID获取元素,`document.querySelector()`和`document.querySelectorAll()`则可以根据CSS选择器获取单个或多个元素。 2. **CSS Selectors**:CSS选择器是一种强大的工具,...

    Javascript获取相同CSS样式的元素

    1. `document.getElementById(id)`:通过元素的id获取单个元素。 2. `document.getElementsByClassName(class)`:通过类名获取元素集合。 3. `document.getElementsByTagName(tag)`:通过标签名获取元素集合。 4. `...

    Javascript Dom元素获取和添加详解

    document.getElementById():通过id获取一个Dom元素 document.getElementsByClassName():通过class名字获取一个或多个Dom元素(伪数组) document.getElementsByTagName():通过标签名字获取一个或多个Dom元素...

    table里面获取所有元素

    标签“源码”可能意味着博客中会深入到具体的源代码层面,解释获取元素的底层原理或提供自定义函数来操作表格。而“工具”标签可能暗示了博客中介绍了某些辅助工具或库,如jQuery,它提供了更简洁的方法来处理DOM...

    js 常用的webapi

    可以使用 `document.getElementById()` 方法来通过 ID 获取元素,例如: `let btn = document.getElementById('myButton');` 通过类名获取元素 可以使用 `document.getElementsByClassName()` 方法来通过类名获取...

    浅谈JS获取元素的N种方法及其动静态讨论

    本文将深入探讨几种常用的JS获取元素的方法及其在动态和静态环境中的应用。 首先,`getElementById()`是获取元素的最常见方式之一。这个方法通过指定的ID来查找元素,返回的是匹配的首个Element对象。如果文档中...

    通过js给html元素赋值

    1. **通过ID获取元素并修改属性** JavaScript提供了多种方式来获取HTML元素,并对其进行修改。其中一种常用的方式是`document.getElementById()`,它可以返回具有指定ID的第一个对象的引用。例如: ```...

    头歌教学实践平台 Web前端开发基础 JavaScript学习手册十四:HTML DOM-文档元素的操作(二)

    首先,`getElementById()`是获取特定ID元素的常用方法。通过这个方法,我们可以直接根据元素的ID找到它,并对其进行操作,例如改变其内容、样式或属性。例如,`document.getElementById('myElement').innerHTML = '...

    JavaScript获取页面元素的常用方法详解

    1、通过标签获取元素,返回一个数组  var li = document.getElementsByTagName('li');...//id获取元素 3、通过class名字获取页面元素  var list = document.getElementsByClassName('list');//返回一个

Global site tag (gtag.js) - Google Analytics