未捕獲的TypeError：無法讀取null的屬性“ click”

Question

我正在嘗試單擊一個類名稱為（xyz）的div

 document.querySelector('.header-search-wrap').click(); 

 <iframe src="https://www.gammerson.com" frameborder="0" width="500px" height="900px"> </iframe> 

所以我試圖在document.querySelector（'。xyz'）。click（）;下運行 但這給了我

error Uncaught TypeError: Cannot read property 'click' of null

但是當我轉到元素窗口並搜索XYZ類，然后再次返回到chrome的控制台窗口並再次運行以下代碼時

document.querySelector('.xyz').click();

令人驚訝的是它有效。 我不知道問題出在哪里，誰能幫助我解決問題。 我嘗試了多次，只有當我在元素窗口中打開源代碼然后運行代碼時，它才起作用。

Answer 1

如果元素是iframe的子元素，則無法通過查詢document.querySelector()類的document.querySelector()來選擇元素； 如果需要，您必須檢索其document ： Javascript-從iFrame中獲取元素

但另一件事是，您無法訪問不是來自同一來源的iframe （ 好吧，我想，您尚未指定 ），因為適用了“相同來源策略” ： SecurityError：阻止了來源為訪問跨域框架

---

關於您的策略：

當您打開控制台時，它將向您顯示Uncaught TypeError：無法讀取null的屬性“ click”，但是在元素選項卡中搜索所有.header-search-wrap並再次執行document.querySelector（'。header-search-wrap “）。單擊（）; 它只會顯示未定義的狀態，這意味着它有效

發生這種情況的原因是，當您檢查上述iframe的元素時，DevTools的“上下文”（ Chrome開發工具：<page context>和<top frame>？ ）更改為iframe ，並且可以自由使用document.querySelector() 。

Answer 2

只要您跑步

document.querySelector('.xyz');

如果它說null，則表示在那個時間點沒有類xyz的元素，因此對null調用click（）會導致錯誤。