javascript вибірка елементів DOM по частині ідентифікатора

вибірка елемента(ів) DOM:

ідентифікатор якого розпочинається з

const el1 = document.querySelector(`[id^="bo"]`);
console.log(el1); // div#box1

# також можна зробити вибірку декількох елементів
const elements = document.querySelectorAll(`[id^="bo"]`);
console.log(elements);

ідентифікатор якого закінчується на

const el2 = document.querySelector(`[id$="ox1"]`);
console.log(el2); // div#box1

# також можна зробити вибірку декількох елементів
const elements = document.querySelectorAll(`[id$="ox1"]`);
console.log(elements);

ідентифікатор якого містить підстроку

const el3 = document.querySelector(`[id*="ox"]`);
console.log(el3); // div#box1

# також можна зробити вибірку декількох елементів
const elements = document.querySelectorAll(`[id*="ox"]`);
console.log(elements);

можемо зробити вибірку з тегом

const el4 = document.querySelector(`div[id^="bo"]`);
console.log(el4);

можемо зробити вибірку по декількох значеннях

const elements1 = document.querySelectorAll(`[id^="box"], [id^="container"]`);
console.log(elements1); // [div#box1, div#box2, div#container1, div#container2]

також можна зробити аналогічну вибірку по класах тощо :)

Посилання

https://bobbyhadz.com/blog/javascript-get-element-by-id-contains
https://github.com/bobbyhadz/javascript-get-element-by-id-contains