JavaScript获取淘宝页面SKU价格的方法

在电商数据抓取和分析的领域，利用JavaScript获取淘宝页面SKU（库存保有单位）价格是一项实用技能。掌握此方法，无论是电商从业者分析竞品价格，还是数据爱好者收集市场信息，都能从中受益。

我们要了解淘宝页面的结构。淘宝商品页面包含丰富的HTML和JavaScript代码，SKU价格信息就隐藏其中。要获取这些信息，我们需借助浏览器的开发者工具。打开淘宝商品页面，按下F12键，就能调出开发者工具。在“Elements”标签下，我们可以看到页面的DOM（文档对象模型）结构，SKU价格相关元素就在这里面。

接下来，使用JavaScript代码来提取价格。一种常用的方式是通过CSS选择器定位元素。例如，如果SKU价格对应的HTML元素有一个特定的类名“sku - price”，我们可以使用以下代码：

const priceElements = document.querySelectorAll('.sku - price');
priceElements.forEach((element) => {
    const price = element.textContent;
    console.log(price);
});

这段代码使用document.querySelectorAll方法，通过类名选取所有匹配的元素，然后遍历这些元素，提取每个元素中的文本内容，即SKU价格，并打印在控制台。

然而，实际的淘宝页面结构可能更复杂。有时价格信息可能被动态加载，这就需要等待页面加载完成，或者使用MutationObserver来监听DOM的变化。比如：

const observer = new MutationObserver((mutationsList) => {
    for(const mutation of mutationsList) {
        if (mutation.type === 'childNodes' || mutation.type ==='subtree') {
            const priceElements = document.querySelectorAll('.sku - price');
            priceElements.forEach((element) => {
                const price = element.textContent;
                console.log(price);
            });
        }
    }
});
const targetNode = document.body;
const config = { childList: true, subtree: true };
observer.observe(targetNode, config);

这段代码创建了一个MutationObserver，监听页面body元素的子节点变化，一旦有变化，就重新查找并打印SKU价格。

利用JavaScript获取淘宝页面SKU价格，关键在于熟悉页面结构，合理运用DOM操作和监听机制。但要注意，在进行数据抓取时，务必遵守淘宝的相关规定和法律法规，确保数据使用的合法性和正当性。