js querySelector和getElementById通過id獲取元素的區(qū)別

更新時間：2012年04月20日 11:21:42 投稿：mdxy-dxy

這是sina同事xiaoniu發(fā)現(xiàn)的，querySelector和getElementById通過id獲取元素的區(qū)別

這是sina同事xiaoniu發(fā)現(xiàn)的，如下

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

兩個函數(shù)bySelector，byId分別通過querySelector和getElementById獲取元素.

頁面上有id為“02E503E2A1C011CFC85B7B701A0677EC0900000000000001”的元素。

結(jié)果：所有支持querySelector的瀏覽器中通過bySelector均獲取不到（報錯），但通過getElementById卻可以獲取。

開始懷疑是id的字符串太長的原因?qū)е聁uerySelector獲取不到。真正原因卻是querySelector按css規(guī)范實現(xiàn)，即css標識符也不能以數(shù)字開頭。

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

您可能感興趣的文章:

小程序顯示彈窗時禁止下層的內(nèi)容滾動實現(xiàn)方法
這篇文章主要介紹了小程序顯示彈窗時禁止下層的內(nèi)容滾動實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-03-03
JavaScript 數(shù)組中插入元素的實例方法
這篇文章主要介紹了如何在 JavaScript 數(shù)組中插入元素,在本文中,我們學習了使用?splice()?方法將元素添加到數(shù)組的開始、末尾或任何位置的各種方法,需要的朋友可以參考下
2023-09-09
巧用局部變量提升javascript性能
巧用局部變量可以有效提升javascript性能，下面有個不錯的示例，大家可以參考下
2014-02-02
JS禁止查看網(wǎng)頁源代碼的實現(xiàn)方法
本文給大家介紹js如何禁止查看網(wǎng)頁源代碼，并給大家分享了三種查看路徑的方法，本文給大家介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起看看吧
2016-10-10
淺談JavaScript 聲明提升
這篇文章主要介紹了JavaScript 聲明提升的相關資料，幫助大家更好的理解和學習JavaScript，感興趣的朋友可以了解下
2020-09-09
詳解javascript高級定時器
這篇文章主要介紹了javascript高級定時器，針對javascript的代碼隊列進行詳細解析，感興趣的小伙伴們可以參考一下
2015-12-12
javascript獲取鼠標位置部分的實例代碼(兼容IE,FF)
這篇文章介紹了javascript獲取鼠標位置部分的實例代碼，有需要的朋友可以參考一下
2013-08-08
js日期相關函數(shù)總結(jié)分享
最近寫了一個倒計時程序，因為經(jīng)常要在手機端訪問，所以沒有引用jquery，對于用習慣jquery的我還真不習慣。下面簡單說明js日期相關函數(shù)，并說明實現(xiàn)倒計時的原理
2013-10-10
JS 對象(Object)和字符串(String)互轉(zhuǎn)方法
下面小編就為大家?guī)硪黄狫S 對象(Object)和字符串(String)互轉(zhuǎn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
JavaScript ES2019中的8個新特性詳解
這篇文章主要介紹了JavaScript ES2019中的8個新特性詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-02-02