JavaScript中document.querySelector無法獲取SVG元素，該如何解決？

JavaScript document.queryselector 無法獲取 svg 元素的解決方案

在網頁開發中，使用 JavaScript 操作 dom 元素是常見操作。然而，document.querySelector 有時無法獲取 SVG 元素，本文將分析原因并提供解決方案。

問題：

假設 html 結構包含一個 SVG 元素，內嵌 元素：

<svg ...><g ...><image ... href="assets/img_0.png"></image></g></svg>

使用以下 JavaScript 代碼嘗試獲取 元素：

立即學習“Java免費學習筆記（深入）”；

document.querySelector('image[href*=img_0]');

結果返回 NULL，表明元素未被找到。

原因及解決方案：

問題通常在于 JavaScript 代碼執行時機過早。如果 SVG 元素和 元素尚未完全加載到 DOM 中，document.querySelector 就無法找到它們。

解決方案：

1. 調整 JavaScript 代碼執行順序： 將 JavaScript 代碼放置在 HTML 文檔的

   標簽閉合標簽之前，或放在獨立的 .JS 文件中，并在 HTML 中使用 <script> 標簽引入。這確保 DOM 加載完成后再執行 JavaScript 代碼。 </script>

2. 使用 window.onload 事件監聽器： window.onload 事件在整個頁面（包括所有圖像和 SVG 元素）加載完成后觸發。

window.onload = () => {   console.log(document.querySelector('image[href*=img_0]')); };

這保證了 document.querySelector 能正確找到目標元素。

選擇哪種方法取決于項目結構和代碼組織方式。 兩種方法都能有效解決 document.querySelector 無法獲取 SVG 元素的問題。