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

JavaScript document.querySelector無法獲取SVG 元素的解決方案

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

問題：

假設HTML 結構包含一個SVG 元素，內嵌<image></image>元素：

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

使用以下JavaScript 代碼嘗試獲取<image></image>元素：

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

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

原因及解決方案：

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

解決方案：

1. 調整JavaScript 代碼執行順序：將JavaScript 代碼放置在HTML 文檔的標籤閉合標籤之前，或放在獨立的<code>.js文件中，並在HTML 中使用<script></script> 标签引入。这确保 DOM 加载完成后再执行 JavaScript 代码。

2. 使用 window.onload 事件监听器： window.onload 事件在整个页面（包括所有图像和 SVG 元素）加载完成后触发。

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

这保证了 document.querySelector 能正确找到目标元素。

选择哪种方法取决于项目结构和代码组织方式。 两种方法都能有效解决 document.querySelector 无法获取 SVG 元素的问题。

以上是JavaScript中document.querySelector無法獲取SVG元素，該如何解決？的詳細內容。更多資訊請關注PHP中文網其他相關文章！