Question

我看了其他答案，但仍然不明白。

由于某种原因，这行代码总是返回null。

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

我在控制台中检查了文档的值，所以我很确定这是正确的。

虽然这个ID深藏在一张桌子里，这可能是一个问题吗？

编辑2：如果有帮助，这是完整的代码。

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"
  ]
}

编辑：我已经包含了文档结构的屏幕截图。

Answer 1

ID专门用CSS选择器语法处理，#后跟ID，因此您通常需要document.querySelector('#MTG_INSTR$2')之类的内容，但$不是合法ID组件，所以理想情况下你会给它一个更好的名字。其他方法是：

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

也就是说，在测试时，document.querySelector("[id='MTG_INSTR$2']")应该有效，因此您可以检查页面上是否有任何ID。

Answer 2

解决问题的可能方法......

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

Answer 3

我不知道你的完整的javascript代码，但是你可能在脚本加载之后创建/追加该元素或类似的东西，因此querySelector找不到具有该id的元素。如果您怀疑此类错误，请检查您的范围或在此处编写代码。

Answer 4

我怀疑您的JS是否在标记和CSS之前加载。在这种情况下，您可以尝试使用 <script src="" defer></script>

首先加载内容，然后您的Java脚本应该可以正常工作。

document.querySelector始终返回null

4 个答案:

IIFE

DOMContentLoaded