Javascript 为什么getElementsByClassName（）工作而querySelector（）不工作？

我试图在RubyonRails/AngularJS站点中的职业页面上包含一个iframe，该页面在加载时动态注入。目前，iframe.js文件选择名为“jv careersite”的div，并将iframe放在该div中。我的问题是，提供的javascript使用querySelector（）并返回null。因此，我将querySelector（）替换为GetElementsByCassName（），它返回一个包含所需元素的HTML集合

我已将Javascript文件放在public/app/scripts中，并在application.html.erb中包含指向它的链接。当我检查开发工具时，iframe.js文件正在加载200OK，内容类型确实是javascript。那么这里的问题是什么

HTML

---

等同于以下代码：

el = document.querySelector('.jv-careersite');

类似于（它是

querySelector

而不是

querySelector all

）：

可能的原因是您可能错过了

[0]

，这将使其成为

HTMLCollection

而不是

HTMLElement

---

或者相反。在这种情况下，如果

getElementsByClassName（）

有效，那么在内部的某个地方，它会被附加

[0]

，当我使用getElementsByClassName（）[0]时，它会返回

null

或

undefined

，返回undefined。我假设这与加载页面之前激发的Javascript有关。我试图通过使用$（document）.ready（）包围匿名函数（win）{}来解决这个问题，但是querySelector（）仍然返回null。我感觉这与在呈现实际视图之前执行JS的资产管道有关，因此querySelector（）与任何内容都不匹配。我是Rails新手，所以我不完全清楚如何将Javascript文件添加到单个视图中。@quinteno这是一个很好的研究。。。我也这么认为。为什么不尝试将代码包装到

$（函数（）{//此处的代码…}）
(function(win) {

var anchor, el, src, baseUrl, optionMap, path;

optionMap = {
    'data-category': 'c',
    'data-department': 'd',
    'data-location': 'l',
    'data-region': 'r',
    'data-subsidiary': 's',
    'data-type': 't'
};

el = document.querySelector('.jv-careersite');
console.log(el);
if (!el) {

    return;
}

if (!el.getAttribute('data-careersite')) {
    warn('Jobvite: no careersite detected!');
    return;
}

el = document.querySelector('.jv-careersite');

el = document.getElementsByClassName('.jv-careersite')[0];