前段开发时，遇到id名太长，导致id取不到，返回null

Question

如图

1）因为id名太长，导致getElementById和jQuery的id选择器都无法取到该id。当然这么长的id是机器生成的，请问大家有什么好的解决这个问题呢？

2）jquery的层次选择器最多能有几层？如下例子
$("div table tr td p .....")

Answer 1

lz的用例看似没有问题。请检查一下html的id部分的内容有没有输出空格符号，包括：

• ASCII 空格  
• ASCII 制表符 	
• ASCII 换页符 
• 零宽度空格 ​

HTML标准里id的格式要求是这样的：

• HTML4.01：ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
• HTML5：The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters. There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.

简要的说，HTML4有很多ID方面的限制，必须以字母开头，只允许字母、数字、或-_:.；但HTML5放宽了这方面的限制，唯一的限制是整个树唯一且不允许夹杂空格字符。

---

下面是跟题目可能无关的一些测试结论：

• 对于原生的getElementById方法，不能使用\\:而应当使用:查询id带有:的元素；
• 对于原生的querySelector方法，需要针对id中的:，在其前方加上反引号，形如\\:，才能正确查询到id带有:的元素（应当是避免与css选择器:not等功能重合）；
• jQuery的Sizzle引擎有一系列Fallback措施，在IE7-以下使用了自己实现的解析器（需要\\:），如果可能的话，在IE8+以上会使用querySelector（也需要\\:）

Answer 2

汗。。看到这个问题挺奇葩的，特地建了个html试了一下。如截图，都没有问题，请题主检查一下code吧，我把代码贴到下边了，你可以存个html试试看，alert没有问题的。。当然为了方便写的特别简单。

<input type="text" id="1234567890123456789012345678901234567890123456789012345678901234567890" value="xxx"/>
<form name="x" id="12345678901234567890123456789012345678901234567890123456789012345678901"/>
    <script>
    alert(document.getElementById("1234567890123456789012345678901234567890123456789012345678901234567890").value)  
    alert(document.getElementById("12345678901234567890123456789012345678901234567890123456789012345678901").name)  
    </script>

---

好么。。为了方便都写数字，竟然被人诟病了！看评论的意思是带入了特殊字符就不行了？好吧，我看了题主的id命名，中间带有下划线_和冒号:，下边我补充了带这2个特殊字符的id命名还特地附赠了你所谓的特殊字符@，没有问题，这样可以吗？是不是还要像题主一样那么写呢?对不起，我也不是没事做的人，题主发的是截图，我不可能按照截图把这个命名再写一次。

最近真是怪了，我的答案会被踩，你要是说回答不明确不能帮助到人也就算了，我特地写了个html文件来测试这个问题，竟然也会这样？请问 @白衣岛主 ！你自己写文件试过了没有？？

Answer 3

叫你们后台把id生成的有点语义化，这id又长又不人性化。我估计是id里面包含了特殊字符，导致不能识别

Answer 4

如果楼主使用原生的document.getELementById('view:_idx')绝对没有问题，因为它不对参数进行任何解析，只会把它当一个字符串直接进行匹配。
问题是出在楼主使用的是jquery的方法获取，而jquery会对选择器解析比如会将#视为id选择器，.视为class，:视为结构内伪元素(说到这里，楼主应该知道问题在哪里了吧)，>视为父子结构连接符。

Answer 5

我最近发现，在domino中，有时候javascript的元素选择器都不能取到个别元素，当然jquery的效果也是一样的。原因目前只知道domino的原因。那些id当然也是domino在生成网页时自动生成的。至于具体的我目前并不知道。因为我在我自己做的html中试过，哪怕在id名相同的情况下jquer元素名选择器都能正常使用，可在domino环境下就是不能使用。

Answer 6

好伤眼睛的ID

Answer 7

唉，想起了以前在写C时，那长达100多的变量名..

Answer 8

给个单引号试试？

Answer 9

遇到这种问题，题主把页面保存一下，放到jsbin等网上，方便大家分析。

Answer 10

ID 不要包含 冒号等特殊字符试试，和长度根本没关系的