在定义文本后使用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元素或其他变量之一获取文本“情侣”，然后将其推送回Google进行跟踪。

Answer 1

首先，您走在正确的道路上，但是很遗憾，CSS选择器可以提供的内容已经到了尽头。没有“：contains（text）” CSS选择器（已提出但从未实现）。

第二，尽管这使得不可能使用“ DOM Element”变量来获取值，但是您仍然可以使用“自定义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变量（这在模板化经销商站点上都是常见的）。