Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

192
Views
document.querySelector for name as css selector?

I know document.querySelector('..') takes css selector as arguments like

a.className, #idName, etc....

But I am not sure how to use name. I saw an example but couldnt understand it .

document.querySelector('[name="billContact.email"]')
about 4 years ago · Santiago Trujillo
3 answers
Answer question

0

It means "everything with name='billContact.email'"

P.S Look at this for more info

about 4 years ago · Santiago Trujillo Report

0

You can use document.querySelectorAll to find the element using attribute.

document.querySelectorAll('[name="test"]');
about 4 years ago · Santiago Trujillo Report

0

TL;DR

[HTML-Node-Attribute="Value"]


Attribute selectors

The HTML-Element-Attributes id and class does have there own css-selecoring:

  • #id
  • .class

The others attributes do need something else. Like "Attribute selectors".

So for example you have the following like of HTML Code:

<a href="#top">Go to top!</a>

With Attribut selectors you can get this element with all the following posibilities:

[href] /*looking only for the attribut. No matter what value is inside*/
[href="#top"] /*the attributes value must be "#top"*/
a[href="#top"] /*the same as the example above but in this case href needs to be a attribute of "a"-tag*/

There are some more very cool posibilities to address an element. For more infos see MDN Attribute selectors

querySelector / querySelectorAll

querySelector gives you the first element which equals the passed css-selector.

Okay, I guess this may be much easier to understand with examples instead of a wall of text. So let's start:

For this example I'm gonna use this HTML-snipped:

<div class="container">
    <div data-id='cat'>
        <button name='cat' value='miau'>Cat</button>
    </div>
    <div data-id='dog'>
        <button name='dog' value='not miau'>Dog</button>
    </div>
</div>

As you aksed about how to find a element by it's name with querySelector, I'll start with that:

There are two elements with a name attribut. Both are buttons but have different names.

To get the first element with a name attribute use:

document.querySelector('[name]') //get button cat because it's the first one in the dom (in that example)

To get them all try this:

document.querySelectorAll('[name]') //get both buttons (cat, dog)

When you know the name what you're looking for use

document.querySelector('[name="cat"]') //get the first element where name equals 'cat'

Same with other attributes like data, class or id

document.querySelector('[data-id="cat"]') //get div

You can also do more dom steps at once:

document.querySelector('[data-id="cat"] button') //gets the first button inside "cat-div"

Docs

See MDN and Microsoft for more informations. You may also be interested in CSS-Selectors as well.

about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!