8

我正在使用自定义标签来定义应用程序中的部分，所以我有这样的东西：

<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'
4

4 回答 4

10

使用getElementsByTagName()andgetElementsByName()将返回一个 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/

于 2012-12-16T21:02:56.057 回答
9

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

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

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

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

于 2012-12-18T14:44:37.143 回答
3

getElementsByName不适用于 DOM 元素引用。使用querySelector或querySelectorAll代替。例如：

var parent  = document.getElementsByTagName('mysection')[0];
var myfield = parent.querySelector("[name='myfield']");
于 2020-02-14T02:22:01.323 回答
1

只需使用 ID：

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

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

ID在页面上应该是唯一的。所以你不应该在访问正确的元素时遇到问题。

如果您确实必须使用名称/标记名，getElementsByTagName并且getElementsByName两者都总是返回一个array（如果没有找到元素，则为空）。您可以访问正确的元素，就像访问数组中的元素一样：
document.getElementsByTagName('mysection')[0];对于带有 tagname 的第一个元素mysection。

于 2012-12-16T21:03:06.030 回答