3

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"]')
Sahil Gupta
  • 73
  • 1
  • 3
  • 12
  • 3
    Attribute value selector see https://developer.mozilla.org/en/docs/Web/CSS/Attribute_selectors – Satpal Apr 05 '17 at 10:34
  • what is billContact and what is email. Is email a class and billContact a name attribute ? – Sahil Gupta Apr 05 '17 at 10:36
  • 1
    `"billContact.email"` is the value of attribute `name` – Satpal Apr 05 '17 at 10:36
  • what may be the possible div syntax for this ? – Sahil Gupta Apr 05 '17 at 10:48
  • When you post a question please make sure you post all your clarifications in the description instead of asking in comments. And post what code or example you are stuck with. A single line doubt without the relevant code is not the way to ask questions. Please be clear. – Lucky Apr 05 '17 at 10:51
  • I have already got my answer within 2-3 comments just asking example so that i can be sure, don't comment unnecessarily on every post you think u can. I am not writing a piece of code , just querying about a single topic for `document.querySelector`. I read all about this however was unable to understand how one thing works so asked that particular piece of code clearly. There was no point of explaining what i am doing and what i want to do, I asked specificly what line i was not clear about and THANKS to **SATPAL** . He made it clear – Sahil Gupta Apr 05 '17 at 11:04

4 Answers4

4

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.

Werner
  • 2,126
  • 2
  • 22
  • 34
  • 1
    Long answer, explaining how the `querySelector` works, but not to the actual question. OP states he knows how querySelector works :) – Martijn Apr 07 '17 at 07:42
  • @Martijn Oops, you are right. I'll edit my answer in a few mins. – Werner Apr 07 '17 at 08:02
2

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

P.S Look at this for more info

Community
  • 1
  • 1
Aram810
  • 619
  • 7
  • 21
2

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

document.querySelectorAll('[name="test"]');
Rahul Kumar
  • 154
  • 9
  • can u tell a div syntax where `document.querySelector('[name="billContact.email"]')` will acess the billContact.email selector. – Sahil Gupta Apr 05 '17 at 10:51
-1

For document.querySelector('[name="billContact.email"]')
your input tag is needed has below;

You can try ('input[name="billContact.email"]'):

function checkForm(){
 var form = document.forms[0];
 var selectElement = form.querySelector('input[name="billContact.email"]');
 var selectedValue = selectElement.value;

}

Next time consult https://developer.mozilla.org

and this is my fiddle http://jsfiddle.net/2ZL4G/167/

Akolade Adesanmi
  • 1,152
  • 11
  • 15
  • 1
    This doesn't answer the question. OP wants to understand the why, this is just an example of showing how to which OP was curious about in the first place. – interesting-name-here Sep 07 '17 at 18:18