document.querySelector always returns null

Question

I've looked at the other answers but still don't understand.

For some reason this line of code always returns null.

var els = document.querySelector("[id='MTG_INSTR$2']");

I checked the value of document in the console so I'm pretty sure that's correct.

The id is buried deep inside a table though, could that be an issue?

EDIT 2: If it helps, here's the full code.

content.js

chrome.runtime.onMessage.addListener(
      function(request, sender, sendResponse) {
        if( request.message === "start" ) {
         start();
             }
      }
    );

    function start(){
        var els = document.querySelector("[id='MTG_INSTR$2']");
        console.log(els);
        alert("started");
    }

popup.html

<!DOCTYPE html>
<html>
<head></head>
<script src="popup.js"></script>
<body>
<input id="button1" type=button value=clickme>
</body></html>

popup.js

 function popup() {
    chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
    var activeTab = tabs[0];
    chrome.tabs.sendMessage(activeTab.id, {"message": "start"});
   });
}

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("button1").addEventListener("click", popup);
});

manifest.json

{
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
  "manifest_version": 2,
  "name": "extensiontest",
  "version": "0.2",
  "content_scripts": [
  {
    "matches": [
      "<all_urls>"
    ],
    "js": ["content.js"]
  }
],
"browser_action": {
  "default_icon": "icon.png",
    "default_popup":"popup.html"
},
//"background": {
// "scripts": ["background.js"]
//},
"permissions": [
    "tabs"
  ]
}

EDIT: I've included a screen shot of what the document structure looks like.

If you want to select element with defined id, use it like this document.querySelector("#MTG_INSTR$2") — Nikola Zivkovic, May 12 '17 at 23:02
Does this answer your question? [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Heretic Monkey, Apr 09 '21 at 13:42

raj praveen · Answer 1 · 2018-07-28T07:45:35.427

7

I doubt your JS gets loaded before the markup and css. In that case, you could try using <script src="" defer></script>

The contents are loaded first and your java script should work fine after that.

edited Jul 28 '18 at 07:45

answered Jul 28 '18 at 07:39

raj praveen

71
1
3

ShadowRanger · Answer 2 · 2017-05-12T23:02:56.270

0

IDs are handled specially in CSS selector syntax, with a # followed by the ID, so you'd normally want something like document.querySelector('#MTG_INSTR$2'), but $ isn't a legal ID component, so ideally you'd give it a better name. Other approaches are:

document.getElementById('MTG_INSTR$2'); // No need to change ID

That said, on testing, document.querySelector("[id='MTG_INSTR$2']") should work, so you might check if anything actually has that ID on your page.

edited May 12 '17 at 23:02

answered May 12 '17 at 23:01

ShadowRanger

143,180
12
188
271

@Kinduser: Yeah, I was checking myself, and it works just fine, even with the `$` in there (where `querySelector` syntax doesn't due to the `$`). So I'm guessing the page doesn't actually have the `id` they're looking for. – ShadowRanger May 12 '17 at 23:05

score 0 · Answer 3 · answered May 12 '17 at 23:14

Possible solutions to your problem...

IIFE

(function () {
  var els = document.querySelector("[id='MTG_INSTR$2']");
  console.log(els);
})();

DOMContentLoaded

document.addEventListener("DOMContentLoaded", function () {
  var els = document.querySelector("[id='MTG_INSTR$2']");
  console.log(els);
});

score 0 · Answer 4 · answered May 12 '17 at 23:15

I don't know your full javascript code but maybe you are create/append that element after the script loads or something like that and therefor querySelector don't find the element with that id. Check your scope or write the code here if you suspicious of that kind of error.

document.querySelector always returns null

4 Answers4

IIFE

DOMContentLoaded

Linked