使用document.querySelector和复杂的CSS选择器

Question

在JavaScript中，我想使用document.querySelector来“抓取” HTML下面的最后一个div（ <div class="widget-footer"> ）。 但是，经过多次尝试，我仍然无法弄清楚要使用的正确CSS选择器语法。

以下代码不起作用：

document.querySelector (".skin-grid-widgets.ui-sortable.gridWidgetTemplatePositie.AgendaStandaard.disablesorting.hoogte-1-knoppen-0.breedte-1.widget-footer")

这是我正在使用的HTML

<div class="skin-grid enkeleKolom" id="Infobalk">
    <div class="skin-grid-widgets ui-sortable">
        <div class="gridWidgetTemplatePositie AgendaStandaard disablesorting hoogte-1-knoppen-0 breedte-1">
            <div class="widget-header">
                here comes the header text
             </div>
            <div class="widget-body">
                some body text
            </div>   
            <div class="widget-footer">
                here comes the footer text
            </div>
        </div>
    </div>
</div>

我到处冲浪以查找与querySelector一起使用的复杂CSS选择器的示例，但无济于事。 任何帮助将非常感激。

Answer 1

您的问题是，您要选择的每个子元素之间都需要有一个空格。 如果在类选择器之间没有空格，则根据CSS规范，它将在同一元素上查找两个类。

将选择器更改为如下所示：

 var footer = document.querySelector(".skin-grid-widgets.ui-sortable .gridWidgetTemplatePositie.AgendaStandaard.disablesorting.hoogte-1-knoppen-0.breedte-1 .widget-footer"); footer.classList.add("highlight"); 

 .highlight { background-color: yellow; } 

 <div class="skin-grid enkeleKolom" id="Infobalk"> <div class="skin-grid-widgets ui-sortable"> <div class="gridWidgetTemplatePositie AgendaStandaard disablesorting hoogte-1-knoppen-0 breedte-1"> <div class="widget-header"> here comes the header text </div> <div class="widget-body"> some body text </div> <div class="widget-footer"> here comes the footer text </div> </div> </div> </div> 

Answer 2

尝试这个：

<script>
   document.querySelector (".skin-grid-widgets .gridWidgetTemplatePositie .widget-footer");
</script>

您不需要在querySelector中添加类似“ skin-grid-widgets ui-sortable”的相邻类，如果这样做，则查询选择器会假定“ skin-grid-widgets”是“ ui-sortable”的父类。 在一个DOM级别仅使用这些类之一。

Answer 3

选择器并不复杂，您的想法很复杂。

倾听自己，听取您对要选择的内容的描述：

“抓取” HTML下面的最后一个div

不要在具有所有这些类的节点内部使用类widget-footer捕获该节点： gridWidgetTemplatePositie AgendaStandaard disablesorting hoogte-1-knoppen-0 breedte-1在节点内部...

//a utility, because DRY.
//and because it's nicer to work with Arrays than with NodeLists or HTMLCollections.
function $$(selector, ctx=document){
    return Array.from(ctx.querySelectorAll(selector));
}

//and the last div in this document:
var target = $$('div').pop();

要么

HTML下面的“抓取” <div class="widget-footer">

var target = document.querySelector("div.widget-footer");

或组合：获取HTML中的最后一个div.widget-footer

var target = $$('div.widget-footer').pop();