IE7中的getElementsByName

https://stackoverflow.com/questions/278719

07-07-2019
|

题

我有一些代码这样做：

 var changes = document.getElementsByName(from);
 for (var c=0; c<changes.length; c++) {
   var ch = changes[c];
   var current = new String(ch.innerHTML);
   etc.
 }

这适用于FF和Chrome，但不适用于IE7。大概是因为getElementsByName在IE中不起作用。什么是最好的解决方法？

解决方案

如果你不知道为什么这在IE中不起作用，这里是关于该功能的MSDN文档：

使用getElementsByName方法时，将返回文档中具有指定NAME属性或ID属性值的所有元素。

支持NAME属性和ID属性的元素包含在getElementsByName方法返回的集合中，但具有NAME expando的元素不包含在集合中;因此，此方法不能用于按名称检索自定义标记。

Firefox允许 getElementsByName（） 检索使用NAME expando的元素，这就是它工作的原因。这是否是一件好事＆＃8482;可能需要辩论，但这就是现实。

因此，一种选择是使用 getAttribute（） DOM方法请求NAME属性，然后测试该值以查看它是否是您想要的，如果是，请将其添加到数组中。但是，这需要您遍历页面中的所有节点或至少在子部分内迭代，这不是最有效的。您可以使用 getElementsByTagName之类的方法预先约束该列表。（） 或许。

另一种方法是，如果你控制页面的HTML，就是给所有感兴趣的元素提供一个仅由数字变化的Id，例如：

<div id="Change0">...</div>
<div id="Change1">...</div>
<div id="Change2">...</div>
<div id="Change3">...</div>

然后像这样使用JavaScript：

// assumes consecutive numbering, starting at 0
function getElementsByModifiedId(baseIdentifier) {
    var allWantedElements = [];
    var idMod = 0;
    while(document.getElementById(baseIdentifier + idMod)) { // will stop when it can't find any more
        allWantedElements.push(document.getElementById(baseIdentifier + idMod++));
    }
    return allWantedElements;
}

// call it like so:
var changes = getElementsByModifiedId("Change");

当然，这是一个黑客行为，但它可以完成你需要的工作，与其他一些黑客相比不会太低效。

如果您正在使用某种类型的JavaScript框架/工具包，那么您的选项要好得多，但我没有时间进入这些细节，除非您表明您正在使用它。就个人而言，我不知道人们如何在没有人的情况下生活，他们会节省很多时间，精力和挫折感，而你却买不起使用它。

其他提示

有几个问题：

IE确实让 id =＆quot;＆quot; 与 name =＆quot;＆quot;

＆lt; span＆gt;

name =＆quot;＆quot;

为了解决问题，我建议：

将所有 name =＆quot;＆quot; 更改为 class =＆quot;＆quot;
像这样更改您的代码：

var changes = document.getElementById('text').getElementsByTagName('span');
for (var c=0; c<changes.length; c++) {
 var ch = changes[c];

 if (ch.className != from)
continue;

 var current = new String(ch.innerHTML);

使用NAME属性查找元素并不常见。我建议切换到ID属性。

但是，您可以使用jQuery找到具有特定名称的元素：

 $("*[name='whatevernameYouWant']");

这将返回具有给定名称的所有元素。

IE中支持

getElementsByName，但存在错误。特别是它返回'id'与给定值匹配的元素，以及'name'。如果没有更多的上下文，代码和实际的错误信息，你无法判断这是否是你所遇到的问题。

通常，最好避免使用getElementsByName，因为HTML中的“name”属性有几个重叠的目的，这可能会造成混淆。使用getElementById更可靠。在专门处理表单字段时，您可以更可靠地使用form.elements [name]来检索您正在查找的字段。

IE中的另一个DOM错误：

错误1： http：// webbugtrack。 blogspot.com/2007/08/bug-411-getelementsbyname-doesnt-work.html

错误2： http：// webbugtrack。 blogspot.com/2008/04/bug-403-another-getelementsbyname-bugs.html

我成功使用包装器返回元素数组。适用于IE 6和7。请记住，它不是100％与document.getElementsByName完全相同的东西，因为它不是NodeList。但是对于我需要它，它只是在一个元素数组上运行一个for循环来做简单的事情，比如设置.disabled = true，它运行得很好。

即使此函数仍使用getElementsByName，但如果以这种方式使用它也可以。亲眼看看。

function getElementsByNameWrapper(name) {
  a = new Array();

  for (var i = 0; i < document.getElementsByName(name).length; ++i) {
    a.push(document.getElementsByName(name)[i]);
  }

  return a;
}

解决方法

                var listOfElements = document.getElementsByName('aName'); // Replace aName with the name you're looking for
            // IE hack, because it doesn't properly support getElementsByName
            if (listOfElements.length == 0) { // If IE, which hasn't returned any elements
                var listOfElements = [];
                var spanList = document.getElementsByTagName('*'); // If all the elements are the same type of tag, enter it here (e.g.: SPAN)
                for(var i = 0; i < spanList.length; i++) {
                    if(spanList[i].getAttribute('name') == 'aName') {
                        listOfElements.push(spanList[i]);
                    }
                }
            }

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow