Why would getElementsByClassName() work and not querySelector()?

Question

I'm trying to include an iframe on a careers page within a Ruby on Rails/AngularJS site that is injected dynamically into the page when it loads. Currently, the iframe.js file selects the div, named "jv-careersite" and puts the iframe within that div. My issue is that the javascript provided uses querySelector() and returns null. So I swapped out querySelector() for getElementsByClassName() and it returns an HTML Collection with the element I need.

I've placed the Javascript file in public/app/scripts, and included a link to it within application.html.erb. When I check the Dev Tools, the iframe.js file is loading with 200 OK and content-type is indeed javascript. So what's the issue here?

HTML

<div class="careers-iframe">
    <div class="jv-careersite" data-careersite="companyname"></div>
</div>

Javascript

(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;
}

Answer 1

The equivalent of the following code:

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

Is something like (it's querySelector and not querySelectorAll ):

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

The possible reason will be you might have missed the [0] , which would have made it into HTMLCollection instead of HTMLElement .

Or the opposite. In case, if the getElementsByClassName() works, then internally, somewhere, it's being appended with [0] , which in turn returns null or undefined .