getElementById在IE 11上的DOM树中确定的非常具体的ID上失败,可能是Edge - 为什么？

Question

getElementById在IE 11上的DOM树中确定的非常具体的ID上失败,可能是Edge - 为什么？

Kad*_*ser 21 javascript getelementbyid internet-explorer-11 microsoft-edge

在Microsoft IE和(根据评论)Edge,getElementById()在一个ID正好"extTabsBodyEleFile1273551781_renderTo"失败.

<!DOCTYPE HTML>
<html>
    <body>
        <div id="extTabsBodyEleFile1273551781_renderTo"></div>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

此ID已自动生成.以任何方式更改ID可以解决问题.获取div的父级并列出其子节点还包括div.

错误可以在IE 11.0.9600.19155和11.0.9600.18538上重现 - 但它在IE 11 ... 19155的另一台机器上运行没有问题.

如果您在随机站点上打开开发人员控制台,将DOM浏览器中任何元素的ID更改为上面的ID,然后尝试通过以下方式获取该元素,也可以重现该错误 document.getElementById('extTabsBodyEleFile1273551781_renderTo')

我意识到这是一个Edge bug并且修复它只是意味着更改ID.我的问题是它为什么会发生,为什么它没有发生在Edge的一个实例上(我找不到设置差异)以及我如何生成ID以确保它不会再次发生.在这个地方很容易改变它,但不知道它为什么会发生,它可能会再次发生.

是否有已知的哈希或数字组合ID不应该有？这是我可能使用元标记关闭的遗留设置吗？

我希望这个问题对于SO来说并不太具体 - 由于getElementById相关问题的大量搜索,它被证明是徒劳的.

console.log(document.getElementById('extTabsBodyEleFile1273551781_renderTo'));

Run Code Online (Sandbox Code Playgroud)

<div id="extTabsBodyEleFile1273551781_renderTo"></div>

Run Code Online (Sandbox Code Playgroud)

更新:

似乎ID在不区分大小写的情况下失败:

extTabsBodyEleFile1273551781_renderTo
exttabsbodyelefile1273551781_renderto
EXTTABSBODYELEFILE1273551781_RENDERTO
ExttAbsbOdyELEfILE1273551781_rEndErtO

Run Code Online (Sandbox Code Playgroud)

都导致错误.

更新:

IE Developer控制台似乎至少参与了错误.打开一个测试HTML页面,显示尝试通过该ID内部检索元素而不是将其记录到控制台的结果,如果在控制台关闭的情况下启动IE,则按预期工作 - 直到控制台打开并且页面刷新了一对(1-5)次,然后错误再次出现并持续到IE关闭并重新打开.出现错误后关闭开发人员控制台似乎没有效果.

测试HTML托管在netlify,HTML代码:

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            table, th, td {border: 1px solid black;border-collapse: collapse;}
            th, td {padding: 15px;}
        </style>
    </head>
    <body>
        <div id="extTabsBodyEleFile1273551781_renderTo"></div>
        <div><p id="testresult"></p></div>
        <script>
        var testresults = document.getElementById('testresult');
        var time = new Date().getTime();
        testresults.innerHTML = "<h3>testresults:</h3><br><table><tr><th>ID</th><th>Result</th><th>Time</th></tr>" +
        '<tr><td>extTabsBodyEleFile1273551781_renderTo: ' + "</td><td>" + document.getElementById('extTabsBodyEleFile1273551781_renderTo') + "</td><td>" + time + "</td></tr>" +
        '<tr><td>extTabsBodyEleFile1273551781_renderTo through querySelector: ' + "</td><td>" + document.querySelector('*[id="extTabsBodyEleFile1273551781_renderTo"]') + "</td><td>" + time + "</td></tr>" +
        '</table>';
        </script>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Art*_*mix 1

长话短说

如果您尝试选择它们，似乎有特定的字符串边缘返回 null，我发现有 3 个字符串无法在此小提琴中选择： https://jsfiddle.net/cogwrudx/4/

我已经运行了从 1273 到 1290 id 的测试，只发现了 3 个，但我想可能还有更多，我不知道为什么这些字符串如此重要，以至于边缘不允许搜索它们。

起源

我无法发表评论，但这真的让我很恼火，所以我必须做更多的测试，看起来无论您对此字符串进行什么更改，它都会起作用，但它不适用于这个确切的字符串。

添加/删除任何字母/数字都可以。将下划线之前的最后一个数字更改为 2 而不是 1 也可以。事实上，将任何数字更改为不同的数字都是可行的。

看起来 Edge 不喜欢那个特定的字符串是有原因的，我真的很想知道为什么。

编辑1

做了一些更基本的测试后，我运行了下一个小提琴： https: //jsfiddle.net/cogwrudx/4/

正如你在运行它并查看控制台后所看到的，他还没有找到另外 2 个 id：

not found:  extTabsBodyEleFile1273351781_renderTo
not found:  extTabsBodyEleFile1273451781_renderTo
not found:  extTabsBodyEleFile1273551781_renderTo

Run Code Online (Sandbox Code Playgroud)

因此，从这一点来看，我认为没有像其他人建议的那样需要避免明显的模式，而是需要搜索非常特定的字符串，就好像您尝试设置与类相同的字符串一样，它也不会起作用。

供参考

我在 Windows 10 上的 Edge 浏览器（而不是 IE11）上对此进行了测试。

Microsoft Edge 42.17134.1.0
Microsoft EdgeHTML 17.17134

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，2 月前
查看次数：	471 次
最近记录：	7 年，2 月前