Javascript按名称获取(父级的)特定元素

Question

我正在使用自定义标签来定义应用程序中的部分,所以我有这样的事情:

<mysection>

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

</mysection>

我正在使用以下内容并且能够获取标签(打印到控制台,一切都很常规)

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

我遇到的问题是按姓名查找子字段:

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

...因为我不想接受任何其他'部分'可能有一个名为'myfield'的输入.

编辑:

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

建议并返回控制台部分内容,但是,getElementsByName抛出一个错误:

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

Answer 1

使用getElementsByTagName()和getElementsByName()将返回NodeList,您需要获取列表的第一个元素,如下所示:

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

编辑

你是getElementsByName对的,对元素无效.我不确定如何本地化它的功能,因为你正在尝试.它似乎只会起作用document.getElementsByName如果要在本地化范围内使用它,则可能必须编写自己的实现.

第二次编辑

为了好,我为你做了这个实现:D这里有它的所有"荣耀".

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];

小修

我错误地将元素而不是其子元素传递给递归.上面的代码已经使用现在传递的适当参数进行了编辑.看工作小提琴:http://jsfiddle.net/js6NP/5/

Answer 2

我实际上找到了一种更简单的方法来处理这个问题：

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

在这里你可以看到一个例子，它只修改指定部分内的字段：http : //jsfiddle.net/fluidbyte/kph6H/

qSA 支持现代浏览器并兼容 IE8，这是一个支持 IE7 的 polyfill：https : //gist.github.com/2724353