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' 

Solution 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/

Solution 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

Solution 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']");

Solution 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.

View more solutions