Ross Summerell

Posted on Mar 19, 2019

Native Javascript element selector best practice

#javascript #vue #help

Hey all,

So coming from Jquery, I was always told the best method to select an element is to give it a class name and use the $(".someElementClass") method.

However now not using Jquery in my Vue project, what is the best practice for selecting elements.

I am currently giving elements ID's and using the document.getElementById("someElementID");

Very curious to see what peoples opinions are!

Top comments (5)

Matteo Rigon • Mar 19 '19 • Edited

you can use the native methods document.querySelector and document.querySelectorAll that respectively return the first or all the elements that match the CSS query selector you provide. It works almost identically to jQuery (there are some limitations when using pseudo-selectors though).

developer.mozilla.org/en-US/docs/W...

const el = document.querySelector('.someElementClass');

As they are Element methods, they can be used not only on document but on any Element to find their children

const parent = document.querySelector('.parent');
const children = parent.querySelectorAll('.children');

Some people even declare some shortcuts to access these methods quickly:

window.$ = document.querySelector;
window.$$ = document.querySelectorAll;

const header = $('h1');
const headersList = $$('h1');

rhymes • Mar 19 '19

Hi Ross, you can use document.getElementsByClassName() but the real question is, why are you accessing the DOM directly if you're using Vue?

You shouldn't need it usually, but maybe you're... porting an app?

ps. #ama is a tag for people that are supposed to hold Ask me anything, a form of public forum in which a person with a particular walk of life answers questions by people. I would change your tags to #help #vue #javascript for example

James Thomson • Mar 21 '19

This. 99.9% you shouldn't touch the DOM manually, Vue being data driven is how you should always approach your app. Set the values in data and initialise the plugin with that data.

That said, if you do need to access an element, the simplest "Vue way" to do it is by using $refs

Ross Summerell • Mar 19 '19

Wait a second you sparked something there for me thank you

Ross Summerell • Mar 19 '19 • Edited

doh sorry,

I am accessing the dom to bind dates to date picker, and preselected values for lists

DEV Community

Native Javascript element selector best practice

Top comments (5)

Read next

Using BroadcastChannel API with Vue to sync a ref across multiple tabs

🚀 Fetching and Displaying Data in Nuxt 3 with useAsyncData

I just cloned Threads!

What's new in Next.js 15