Question

在JavaScript中，我想使用$keywords = preg_split("/&&/", "&&Joe Doe&& should be here with &&Annie Franklin&&, right?"); print_r($keywords);来“抓取”下面HTML中的最后一个div（document.querySelector）。但是经过多次尝试，我仍然无法弄清楚要使用的正确的CSS选择器语法。

以下代码不起作用：

<div class="widget-footer">

以下是我正在使用的HTML

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

我到处寻找查找与querySelector一起使用的复杂CSS选择器的例子，但无济于事。任何帮助都会非常感激。

Answer 1

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

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

＆＃13;

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

＆＃13;

.highlight {
  background-color: yellow;
}

＆＃13;

<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>

＆＃13;

Answer 2

试试这个：

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

您不需要添加相邻的类，例如＆＃34; skin-grid-widgets ui-sortable＆＃34;在querySelector中，如果你这样做，那么查询选择器假设＆＃34; skin-grid-widgets＆＃34;是'ui-sortable＆＃34;的父母。在一个DOM级别只使用其中一个类。

Answer 3

选择器很复杂，你的想法是。

倾听您自己，了解您要提供的选择说明：

＆＃34;扶手＆＃34; 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();

或

＆＃34;扶手＆＃34; HTML下面的<div class="widget-footer">

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

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

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

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

3 个答案: