在定义文本后使用 CSS 选择器查找值

Question

我在 Google 跟踪代码管理器中使用 DOM 元素变量类型来选择文本值以通过 CSS 选择器存储到跟踪代码中。但是，我一直在尝试选择正确的 CSS 选择器值，因为有 15 个具有相同值的值，区分我想要的值的唯一方法是它继续一个特定的文本值。

使用 document.querySelectorAll 和其他查询来去除其余的值，但我无法弄清楚。

这是 HTML：

<span class="vdp-info-data col-sm-9 col-xs-9"><span class="vdp-info-label">Interior Color</span> <span class="vdp-info-value">Black</span></span></li><li class="col-xs-12 col-sm-6">
<span class="vdp-info-data col-sm-9 col-xs-9"><span class="vdp-info-label">Body Style</span> <span class="vdp-info-value">Coupe</span></span></li><li class="col-xs-12 col-sm-6">

我希望通过 Google 跟踪代码管理器 DOM 元素或其他变量之一获取文本“Couple”，然后将其推送回 Google 进行跟踪。

Answer 1

首先，您走在正确的道路上，但不幸的是，您已经走到了 CSS 选择器所能提供的极限。没有 ":contains(text)" CSS 选择器（它被提议但从未实现）。

其次，虽然这使得无法使用“DOM 元素”变量获取值，但您仍然可以使用“自定义 JavaScript”页面变量来获取它。使用 JavaScript，您可以使用 document.querySelectorAll() 然后过滤来查找标签，然后使用兄弟来获取值，如下所示：

function(){
    var bodyStyle;
    var labels = document.querySelectorAll('.vdp-info-label');
    for (var x=0; x<labels.length; x++){
        if(labels[x].innerText.trim()==='Body Style'){
            bodyStyle = labels[x].nextElementSibling.innerText;
            // Or use labels[x].parentElement.querySelector('.vdp-info-value').innerText
            break;
        }
    };
    return bodyStyle;
}

或者，您可以获取包含汽车所有标签-值组合的父元素，并使用正则表达式提取感兴趣的值。

旁注

我注意到您似乎正在尝试抓取经销商车辆页面的车辆属性。您可能想检查他们是否将车辆详细信息放置在页面中更容易抓取的另一个位置，例如架构部分或全局 JS 变量（两者在模板化经销商网站上都很常见）。