优化猴油脚本稳定性：应对动态DOM结构变化
您的猴油脚本运行不稳定，很可能是由于页面DOM结构的动态变化导致的。当页面内容（例如打款记录）更新时，DOM结构会发生改变，从而使脚本无法准确找到目标元素。
为了提高脚本的稳定性和灵活性，建议您采用以下策略：
<code class="javascript">function main() {
const parent = document.getElementById('orderAppContainer');
const searchButton = parent.querySelector('button.ant-btn.ant-btn-primary');
// 使用异步操作，确保DOM加载完成
searchButton.addEventListener('click', async () => {
await delay(1000); // 等待1秒，确保DOM更新完成
const orderNumberInput = parent.querySelector('#shop_order_no');
const orderNumber = orderNumberInput.value;
const orderNumberRegex = /[0-9]{19}/g;
const match = orderNumberRegex.exec(orderNumber);
if (match) {
// 发现打款记录后，使用MutationObserver监听DOM变化
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
const target = mutation.target;
if (target.matches('span.styles_prompt__1kJY-')) {
modifyElement(target);
} else {
const element = target.querySelector('span.styles_prompt__1kJY-');
if (element) {
modifyElement(element);
}
}
});
});
// 监听父元素的子节点变化
observer.observe(parent, { childList: true, subtree: true });
}
});
}</code>
此改进方案利用MutationObserver API 来监控orderAppContainer元素的子节点变化。当DOM结构发生变化时，MutationObserver会触发回调函数，允许脚本动态地适应这些变化，从而提高脚本的鲁棒性。 使用异步操作await delay(1000)可以确保在进行后续操作前DOM已更新完成。 避免了直接重新加载main函数可能带来的不必要的开销和潜在问题。 此方法更有效地处理DOM变化，并提高脚本的稳定性。
