Javascript Getting specific element (of parent) by name

Question

I'm using custom tags to define sections in an application, so I have something like this:

<mysection>

   <form>
       <input name="myfield">
   </form>

</mysection>

I'm using the following and able to get the tag (printed to console, everything is groovy)

var parent = document.getElementsByTagName('mysection');

The issue I'm having is finding the child field by name:

var myfield = parent.getElementsByName("myfield");

...as I don't want to pick up on any other 'sections' that might have an input with the name 'myfield'.

EDIT:

var parent = document.getElementsByTagName('mysection')[0];

was suggested and returns to console the section contents, however, getElementsByName throws an error:

Uncaught TypeError: Object #<NodeList> has no method 'getElementsByName' 

Narwhal

By using the id you can get rid of all your problems. – Gunnery

Because this is a large project and I don't want ID overload. – Narwhal

Then you should also read this thread: #14576171 – Prize

Answer 1

Using getElementsByTagName() and getElementsByName() will return a NodeList, you need to get the first element of the list like this:

var parent = document.getElementsByTagName('mysection')[0];
var myfield = parent.getElementsByName("myfield")[0];

Edit

You were correct, getElementsByName is not valid for an element. I am unsure how to localize the functionality of it as you are trying to do. It seems that it will only work for document. You may have to write your own implementation of getElementsByName if you want to use it in a localized scope.

Second Edit

To be nice, I made that implementation for you :D Here it is in all its "glory".

Element.prototype.getElementsByName = function (arg) {
    var returnList = [];
    (function BuildReturn(startPoint) {
        for (var child in startPoint) {
            if (startPoint[child].nodeType != 1) continue; //not an element
            if (startPoint[child].getAttribute("name") == arg) returnList.push(startPoint[child]);
            if (startPoint[child].childNodes.length > 0) {
                BuildReturn(startPoint[child].childNodes);
            }
        }
    })(this.childNodes);
    return returnList;
};
var parent = document.getElementsByTagName('mysection')[0];
var myfield = parent.getElementsByName("myfield")[0];

Small fix

I was incorrectly passing the element and not its children into the recursion. The code above has been edited with the proper argument passed now. See working fiddle: http://jsfiddle.net/js6NP/5/

Disenfranchise

Note: getElementsByTagName() and getElementsByName() do not return an Array. Instead, they return a NodeList. – Gaussmeter

@Derek - Not technically, made the change to reflect that it is a NodeList and not an array. – Disenfranchise

getElementsByName has been returning the error: Uncaught TypeError: Object #<NodeList> has no method 'getElementsByName' – Narwhal

@TravisJ - while it looks good, I'm getting 'Cannot read nodeType of null' - jsfiddle.net/fluidbyte/js6NP/1 – Narwhal

@Narwhal - Thank you for point that out, I was using BuildReturn(startPoint[child]); on accident, that line should have read: BuildReturn(startPoint[child].childNodes);. I edited the fix in the answer along with a working jsfiddle. – Disenfranchise

Thank you for all your work, however, I found a method 'querySelectorAll' that is much more efficient. I posted an answer below. – Narwhal

Answer 2

I actually found a much more simple way to handle this:

document.querySelectorAll('mysection [name="myfield"]');

Here you can see an example where it only modifies the field inside the section specified: http://jsfiddle.net/fluidbyte/kph6H/

qSA supports modern browsers and is compatible down to IE8, Here's a polyfill to support back to IE7: https://gist.github.com/2724353

Narwhal

Answer 3

getElementsByName won't work on a DOM element reference. Use querySelector or querySelectorAll instead. In example:

var parent  = document.getElementsByTagName('mysection')[0];
var myfield = parent.querySelector("[name='myfield']");

Zootomy

Answer 4

Just use an ID instead:

<mysection>
    <form>
         <input name="myfield" id="fieldName">
    </form>
</mysection>

var myfield = document.getElementById("fieldName");

ID's are supposed to be unique on a page. So you shouldn't have trouble accessing the right element.

If you really have to use name/tagname, getElementsByTagName and getElementsByName both always return a array (A empty one if no element was found). you can access the right element, just like you'd access elements in arrays:
document.getElementsByTagName('mysection')[0]; For the first element with tagname mysection.

Potassium