BOOST The POWER of Query Selector in JavaScript

In today's video, we'll be wrapping around the existing query selector methods in the JavaScript DOM to make it easier to select multiple elements.

This solution can be exported via a module and uses array destructuring, rest parameters and the map method.

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

#dcode #javascript

[ScriptRaccoon]

The final version can be simplified even more.

[bmehder]

I feel like we all did this back in jQuery days, then ES6 came out, and we forgot about how convenient a short selector was.

Thank you for resurrecting this gem for us.

[ToadyEN]

Pretty handy, great use of destructuring as well.

[kerrykreiter]

Thanks Dom! Always nice to start my day learning on your channel. Always getting bonus info is nice!!

[montebont]

Nice examples of de-structuring - thanks !

[johnlabuci]

your video really helping me dom.. keep it up

[cloudpuncher]

Hey mate, great content glad your starting to get into web components a bit more :) This is similar to the Hyper HTML proxy... e.g. const elements = new Proxy({}, {
get: function(_, name){
let tag = name;
tag = tag.replace("_", "-")
return (props = {}, ...children) => {
let element = document.createElement(tag)
for(let key in props) {
if (key.startsWith("on")) element.addEventListener(key.substring(2).toLowerCase(), props[key])
else element.setAttribute(key, props[key])
}
for(const child of children) {
if(typeof child !== "object")
else if(child?.nodeType === 1) element.appendChild(child)
}
return element
}
}
}
)

let {p, div, h1, button, input, h2} = elements

document.body.append(
h1({ id: "red" }, "Hello World"),
p({ class: "blue" }, "This is a paragraph"),
button({ style: buttonStyles, onclick: alerter }, "click me"),
input(0),
div(0,
h1({}, "SHOUT"),
h2({}, false),
)
)