get child node by name in javascript

Question

How can I get all children of a html tag with a certain name?

Let's assume I have a <div> which looks like this

<div id=test>
    <input name=test1/>
    <input name=test2/>
</div>

if I have the div element, how can I get any child with name test1 or test2? I tried

div.getElementsByName('test1')

but that does not work?

Pytth · Accepted Answer · 2017-04-11 19:49:35Z

26

document.querySelector('input[name="test1"]')

Or if you want to target a specific child of a specific element:

var test = document.querySelector('#test')
var test1 = test.querySelector('input[name="test1"]');
window.console.log(test1)

answered Apr 11, 2017 at 19:49

Pytth

4,1961 gold badge28 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David Millar · Accepted Answer · 2017-04-12 00:24:51Z

5

Option #1:

var x = document.getElementsByName("test1");

Option #2:

var x = document.querySelectorAll("input[name='test1']");

In both cases you'll get array as a response: x[0], x[1], ...

div.getElementsByName('test1')

doesn't work because getElementsByName is a method of document object, you may only call document.getElementsByName('elementName').

edited Apr 12, 2017 at 0:24

David Millar

1,8781 gold badge14 silver badges23 bronze badges

answered Apr 11, 2017 at 20:03

apatsekin

1,62413 silver badges12 bronze badges

Comments

Pineda · Accepted Answer · 2017-04-11 20:14:36Z

3

Your initial code didn't work because the name attributes in your html were not encased in quotes. They should be:

<div id=test>
  <input name="test1" />
  <input name="test2" />
</div>

Be aware, that getElementsByName returns a live NodeList of matching elements which is an array-like object even if you expect and receive one result.

If you would like to receive only one element rather than an array containing one element I've provided a couple of alternatives below:

USING THE id ATTRIBUTE: If you know your name will be unique in the whole document, I'd advise using an id instead of the the name or class attributes. Doing so would allow this:

Html:
<div id=test>
  <input id="test1" name="test1"/> 
  <input id="test2" name="test2"/> 
</div>
JavaScript:
document.getElementById("test1");

USING document.querySelector :

If you still need to use the name attribute then you can use document.querySelector with the following selection parameter:
document.querySelector('div > input[name="test1"]')
document.querySelector returns the first element in the document that matches the selection parameter.

In the example above it says, return the first element that is an input with name attribute equal to "test1" that is a child of a div.

edited Apr 11, 2017 at 20:14

answered Apr 11, 2017 at 19:51

Pineda

7,5933 gold badges34 silver badges47 bronze badges

1 Comment

Joshua Davies Over a year ago

HTML does not require quotes around attribute values (it's a good practice, but it isn't required). He doesn't have a space between the attribute value and the ending slash, though, which is required in this case. You also seem to have missed the question; he's asking about trying to do div.getElementsByName, which doesn't work (it has to be document.getElementsByName).

Jordan Davis · Accepted Answer · 2017-04-11 20:11:16Z

0

Use querySelectorAll with an attribute selector and a substring match if you want to get any tag with a value that contains a partial match.

var tags = document.querySelectorAll('*[name*="test"]');
console.log(tags);

answered Apr 11, 2017 at 20:11

Jordan Davis

1,5358 gold badges24 silver badges42 bronze badges

Collectives™ on Stack Overflow

get child node by name in javascript

4 Answers 4

Comments

Comments

Your initial code didn't work because the name attributes in your html were not encased in quotes. They should be:

If you would like to receive only one element rather than an array containing one element I've provided a couple of alternatives below:

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Your initial code didn't work because the name attributes in your html were not encased in quotes. They should be:

If you would like to receive only one element rather than an array containing one element I've provided a couple of alternatives below:

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related