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

Question

In JavaScript I want to use document.querySelector to "grab" the last div ( <div class="widget-footer"> ) in below HTML. However after many tries, I still can't figure out the correct CSS selector syntax to use.

The following code does not work:

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

Here is the HTML I am working with

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

I've surfed everywhere to find example of complex CSS selectors used with querySelector, but to no avail. Any help would be really appreciated.

Answer 1

Your issue is you need a space in between each child element you are trying to select. If you do not have spaces in between your class selectors, by CSS specification, it will look for both classes on the same element.

Change your selector to look like the following:

 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

try this:

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

You don't need to add adjacent classes like "skin-grid-widgets ui-sortable" in querySelector, if you do so then query selector assumes that "skin-grid-widgets" is parent of "ui-sortable". Use just one of the classes at one DOM level.

Answer 3

The selector ain't complex, your thoughts are.

Listen to yourself, to the description you provide of what you want to select:

"grab" the last div in below HTML

Not grab the node with the class widget-footer inside of a node that has all these classes: gridWidgetTemplatePositie AgendaStandaard disablesorting hoogte-1-knoppen-0 breedte-1 , inside a node ...

//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();

or

"grab" <div class="widget-footer"> in below HTML

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

or the combination: grab the last div.widget-footer in the HTML

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