document.querySelector 总是返回 null答案

【问题标题】：document.querySelector always returns nulldocument.querySelector 总是返回 null
【发布时间】：2017-10-12 08:26:15
【问题描述】：

我看过其他答案，但还是不明白。

由于某种原因，这行代码总是返回 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"
  ]
}

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

【问题讨论】：

如果你想选择具有定义id的元素，像这样使用它 document.querySelector("#MTG_INSTR$2")
这能回答你的问题吗？ Why does jQuery or a DOM method such as getElementById not find the element?

标签： javascript

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

也就是说，在测试中，document.querySelector("[id='MTG_INSTR$2']") 应该可以工作，因此您可以检查您的页面上是否有任何东西实际上具有该 ID。

【讨论】：

@Kinduser：是的，我正在检查自己，它工作得很好，即使那里有 $（其中 querySelector 语法不是由于 $）。所以我猜这个页面实际上并没有他们正在寻找的id。

【解决方案3】：

您的问题的可能解决方案...

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

【讨论】：

【解决方案4】：

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

【讨论】：