JavaScript Can I select an element by "role" or "data-test-id"?

[Johna]

I'm trying to select an element, but the element doesn't have any class or id.

This is the element:

<div data-test-id="giftWrap" role="dialog" aria-label="Hybrid banner gift wrap" style="position: fixed; z-index: 680; background: rgba(0, 0, 0, 0.65); transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93) 0s; backface-visibility: hidden; bottom: 0px; color: rgb(255, 255, 255); height: 100%; left: 0px; width: 100%;"></div>

I'm wondering if I can use something like document.getElementById(), but then instead get the element by role or data-test-id.


Thanks.

 

[OldMan]

Try
document.querySelector("div[data-test-id='giftWrap']");

 

[Johna]

@OldMan Thanks, do you also know how to select this element to edit with css.

For example if I have this element:

<div id="example">example<div>

I can type:

#example {
    background: #FFFFFF;
}

So like can I do the same thing but for:

<div data-test-id="giftWrap" role="dialog" aria-label="Hybrid banner gift wrap" style="position: fixed; z-index: 680; background: rgba(0, 0, 0, 0.65); transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93) 0s; backface-visibility: hidden; bottom: 0px; color: rgb(255, 255, 255); height: 100%; left: 0px; width: 100%;"></div>

so like:

#giftWrap {
    background: #FFFFFF;
}

Thanks.

 

[BGB]

Here -

[data-test-id=giftWrap]{
    background:blue;
}

 

[Johna]

Here -

[data-test-id=giftWrap]{
    background:blue;
}

Thanks