Select element by attribute without jQuery

Question

How can I target elements like this jQuery selector, but without using jQuery?

var header_elements = $("[data-automationid=SiteHeader]");

Explanation: I want to target the element that has a data-autonmationid attribute with the value of SiteHeader

`document.querySelectorAll('[data-automationid=SiteHeader]');` — ABC, Feb 09 '21 at 19:56
Someone else downvoted, been answered. My result by the way will return an array since you stated header element's, plural. — ABC, Feb 09 '21 at 19:58
@File — `querySelectorAll` returns a NodeList, not an array. — Quentin, Feb 09 '21 at 20:00
If you wish to target the element using CSS3 here is a whole artical on it... as per the website there are 7 way to handle this based on the complexity https://css-tricks.com/almanac/selectors/a/attribute/#the-seven-different-types — Nishant S Vispute, Feb 09 '21 at 20:00

Giovane · Accepted Answer · 2021-02-09T22:07:01.317

3

Simply use document.querySelector() for one result or document.querySelectorAll() for a NodeList result.

document.querySelector('[data-attr=this]').style.backgroundColor = 'red';

<div>not this one</div>
<div data-attr="this">this one</div>

edited Feb 09 '21 at 22:07

answered Feb 09 '21 at 19:56

Giovane

Paul Facklam · Answer 2 · 2021-02-10T13:07:04.550

1

You can select it by

const header_elements = document.querySelectorAll('[data-automationid="SiteHeader"]');

document.querySelector => one element

document.querySelectorAll => multiple elements as NodeList

edited Feb 10 '21 at 13:07

answered Feb 09 '21 at 19:56

Paul Facklam

2 Answers2