为什么我不能通过ID(无iframes)访问这个动态加载的DOM元素？

Question

我正在使用允许嵌入式JavaScript内容(Qualtrics)的外部站点.Qualtrics动态加载一些控制器.当我通过Chrome网络面板测试访问这些控制器时,在完全加载后,我可以在Elements窗口中看到加载的控制器,它代表当前的DOM.但是,我无法通过id访问这些元素,无论是使用jQuery还是通过document.getElementById.

其中一个控制器具有id QID12~14~handle.在Elements DOM浏览器中,我看到了标签:

<div id="QID12~14~handle" class="handle selected" style="left: 122px;"></div>

当我查看页面的源代码时,我看到它们是动态加载的,并通过脚本标记插入到页面中:

<div class='QuestionBody BorderColor'>
    <div class='horizontalbar ChoiceStructure RtlOverride'></div>
    <div id='debug'></div>

    <!-- This has to be called after the html it references. Thats why its down here -->

    <script type='text/javascript'>
        QModules.loadExternalModule('../WRQualtricsShared/JavaScript/CSBar/slider.51487.js', function () {
            (function () {
                CS_QID15 = new CSBar('0', '100', '10', 'QID15', '');
                if (CS_QID15.loaded) {
                    CS_QID15.setDecimals(0);
                    if (CS_QID15.snapToGrid) {
                        CS_QID15.makeSlider('QID15~1');
                        CS_QID15.makeSlider('QID15~2');

                        CS_QID15.setStartPositions({"1": 0, "2": 0, "3": 0.64599483204134});
                    }
                    else {
                        CS_QID15.makeSlider('QID15~1');
                        CS_QID15.makeSlider('QID15~2');

                        CS_QID15.setStartPositions({"1": 0, "2": 0, "3": 0.64599483204134});
                    }
                }
            }).delay(); //if ie is waiting for something and this loads too fast it breaks. the defer fixes a very esoteric bug.
                        });
    </script>

    <div class='clear zero'></div>
</div>

该页面未使用iFrame.如果我在当前DOM中看到一个id,为什么我不能通过它的id访问它,因为它当前存在于DOM中？

如果我打电话jQuery(".handle"),我会看到这个元素:

[
  <div id=?"QID12~14~handle" class=?"handle selected" style=?"left:? 122px;?">?</div>?, 
  <div id=?"QID15~1~handle" class=?"handle selected" style=?"left:? 0px;?">?</div>?, 
  <div id=?"QID15~2~handle" class=?"handle selected" style=?"left:? 0px;?">?</div>?
]

有什么可以阻止我通过id访问这些元素？

Answer 1

QID12~14~handle不是有效的选择器(尽管它是一个有效的id属性),因为~它是兄弟选择器.你可以使用id属性本身解决这个问题:

[id='QID12~14~handle']

或者你可以使用反斜杠转义选择器(这也适用于querySelector):

QID12\\~14\\~handle

您可能还需要#根据您使用的API指示ID选择器.