querySelectorAll 在 Woocommerce 单一产品页面中找不到元素答案

【问题标题】：querySelectorAll doesn't find element in Woocommerce single product pagequerySelectorAll 在 Woocommerce 单一产品页面中找不到元素
【发布时间】：2022-01-06 21:48:09
【问题描述】：

尝试使用单一产品库导航。这是 Woocommerce 网站。

这是该区域的HTML代码：

很抱歉，我无法从页面源中复制它，因为没有这样的代码。我正在尝试使用此代码获取ol.flex-control-nav 元素：

console.log('ok');
let addImagesLength = document.querySelectorAll('.woocommerce-product-gallery ol');
console.log(addImagesLength);

在控制台日志中使用“ok”来确保之前的代码是正确的。所以我在日志中得到的一切都是空节点列表。我假设ol.flex-control-nav 元素出现在.js 文件加载之后。我还想提一提的是，产品库导航部分在wwocommerce.php 页面中使用此 sn-p 调用：

function web_add_woocommerce_support() {
    add_theme_support( 'woocommerce' );
}
add_theme_support( 'wc-product-gallery-slider' );
add_action( 'after_setup_theme', 'web_add_woocommerce_support' );

所以我假设，这段代码在.js 文件完全加载后加载画廊导航。试图在此 PHP 代码之后将单独的 .js 文件排入队列，但结果是相同的。如果是这样，那我该如何解决这个问题？

【问题讨论】：

我可能理解错了，但你为什么不直接使用 document.querySelectorAll("ol.flex-control-nav")？
技术上没有区别。结果是一样的。我无法解释为什么，我就是这么做的。
您是否已经尝试将“延迟”添加到您要包含的脚本中？像 ?
我使用wp_enqueue_script 调用脚本。所以到目前为止我还没有找到如何将defer 添加到这个函数中的方法。但是我已经使用window.onload解决了这个问题。

标签： javascript php html woocommerce

【解决方案1】：

通过将 put all 函数添加到 window.onload 中解决了这个问题。

window.onload = function () {
    console.log('ok');
    let addImagesLength = document.querySelectorAll('.flex-control-nav');
    console.log(addImagesLength);
}

【讨论】：