Javascript 访问通过设置innerHTML创建的HTML元素

我有一个函数，它进行ajax调用，然后返回一段插入到表的td元素中的html。使用element.innerHTML=ajaxResult；现在我想访问ajaxResult中具有特殊name属性的元素。所以我做了一个document.getElementsByName“special”，希望得到4-5个元素。但实际上我一个也没有

这使得我无法访问这些元素，我被卡住了。请帮我解决这个问题。提前谢谢

我认为这与设置innerHTML后不重新加载dom有关。但不知道如何重新加载它

我在IE8兼容性视图和IE7标准中使用IE8：

编辑

这是我的职责

function handleStateChange()
{
    if(ajaxRequest.readyState==4 && ajaxRequest.status==200) {                 
        var responseStr = ajaxRequest.responseText;
        var splitResult = responseStr.split("$$$$$$$$$$$$$$$$$$$$");
        var leftHtml= splitResult [0];
        var rightHtml= splitResult [1];
        document.getElementById("div1").innerHTML=leftHtml;    

        if(rightHtml !="") {
            document.getElementById("div2").innerHTML=rightHtml;
       }


       if(splitResult.length >=3 ){
           var appActionflag = splitResult [2];
           document.getElementById("userAction").innerHTML=appActionflag;
       }

       if(splitResult.length >= 4 ){
           var userId = splitResult [3];
           document.getElementById("userId").innerHTML=userId;
       }

       reverseDNASwitch();
        var grpList = document.getElementsByName('parmGrpId');

        alert('javascript is working! Found:'+grpList.length);

        for(var i=0;i<grpList.length;i++){
           alert('Got GroupId: '+ (i));
           var grpTd = grpList[i];
           grpTd.innnerHTML='Hi';
        }
    }
}

如果要添加到的表单元本身在DOM中，那么应该可以工作。因此，我可能不得不删除这个答案；起初我认为document.getElementsByName已被弃用，但我错了。下面是一个使用getElementsByName的示例：

|

如果您需要支持IE7或更早版本，您可以查看。问题指向关于向文档中添加querySelectorAll，我对这个问题的回答是关于如何在特定于元素的级别上模拟它

因此，将那篇文章中的代码与我对另一个问题的回答以及上面的示例结合起来，我们得到：

|

它在IE7中工作。

如果要添加到的表单元格本身在DOM中，那么它应该工作。因此，我可能不得不删除这个答案；起初我认为document.getElementsByName已被弃用，但我错了。下面是一个使用getElementsByName的示例：

|

如果您需要支持IE7或更早版本，您可以查看。问题指向关于向文档中添加querySelectorAll，我对这个问题的回答是关于如何在特定于元素的级别上模拟它

因此，将那篇文章中的代码与我对另一个问题的回答以及上面的示例结合起来，我们得到：

|

---

它在IE7中工作。

作为特定场景的一个选项，如果您希望获取具有特定属性和值的元素，可以使用如下函数：

function getElementsByAttribute(options) {
    /*if (container.querySelectorAll) {
        var selector = '';
        if (options.tagFilter) {
            selector += options.tagFilter;
        }
        selector += '[' + options.attr;
        if (options.val) {
            selector += '="' + options.val.replace(/"/g, '\\"') + '"';
        }
        selector += ']';
        return Array.prototype.slice.call(options.container.querySelectorAll(selector));
    }*/
    var elements = options.container.getElementsByTagName(options.tagFilter || "*"),
        ret = [],
        i, cur,
        matches = (function () {
            if (options.val) {
                return function (el) {
                    return el.getAttribute(options.attr) === options.val;
                };
            } else {
                return function (el) {
                    return el.hasAttribute(options.attr);
                };
            }
        })();
    for (i = 0; i < elements.length; i++) {
        cur = elements[i];
        if (matches(cur)) {
            ret.push(cur);
        }
    }
    return ret;
}

演示：

我保留了支持querySelectorAll的原始逻辑，但根据注释，在具有无效属性的旧IE中证明了它不起作用

传递给函数的对象接受：

容器：包含要查看的元素 attr：要查找的属性 val：要匹配的可选值 tagFilter：匹配元素标记名的可选过滤器 我在IE7/8中进行了测试，看看是否匹配。和其他人一样

---

如果您想将选择器扩展为更复杂的东西，比如QuerySelector所支持的东西，您可以使用T.J.Crowder的polyfill。但这似乎完成了任务。

作为特定场景的一个选项，您希望获取具有特定属性和值的元素，您可以使用如下函数：

function getElementsByAttribute(options) {
    /*if (container.querySelectorAll) {
        var selector = '';
        if (options.tagFilter) {
            selector += options.tagFilter;
        }
        selector += '[' + options.attr;
        if (options.val) {
            selector += '="' + options.val.replace(/"/g, '\\"') + '"';
        }
        selector += ']';
        return Array.prototype.slice.call(options.container.querySelectorAll(selector));
    }*/
    var elements = options.container.getElementsByTagName(options.tagFilter || "*"),
        ret = [],
        i, cur,
        matches = (function () {
            if (options.val) {
                return function (el) {
                    return el.getAttribute(options.attr) === options.val;
                };
            } else {
                return function (el) {
                    return el.hasAttribute(options.attr);
                };
            }
        })();
    for (i = 0; i < elements.length; i++) {
        cur = elements[i];
        if (matches(cur)) {
            ret.push(cur);
        }
    }
    return ret;
}

演示：

我保留了支持querySelectorAll的原始逻辑，但根据注释，在具有无效属性的旧IE中证明了它不起作用

传递给函数的对象接受：

容器：包含要查看的元素 attr：要查找的属性 val：要匹配的可选值 tagFilter：匹配元素标记名的可选过滤器 我在IE7/8中进行了测试，看看是否匹配。和其他人一样

---

如果您想将选择器扩展为更复杂的东西，比如QuerySelector所支持的东西，您可以使用T.J.Crowder的polyfill。但是这似乎完成了任务。

如果元素的名称确实为name=special，并且您在分配给innerHTML后进行调用，那么如果浏览器支持getElementsByName，您将在该列表中看到它们。你必须显示你放在表格中的标记，以及你在做标记的地方的代码。@T.J.Crowder废话，谷歌欺骗了我。哈哈，MDN getelementsbyname的前两个结果是document.getelementsbyname和element.getElementsByTagName，我用相同的方法阅读它们：@Ian:Ouch，我可能会这么做：-@T.J.Crowder我不应该假设该方法同时适用于这两种类型-我已经习惯了getElementsByTagName、querySelector、querySelectorAll、getElementsByClass和其他类型的情况。如果元素的名称真的为name=special，并且您在分配给innerHTML后进行调用，如果浏览器支持getElementsByName，您将在该列表中看到它们。你必须显示你放在表格中的标记，以及你在做标记的地方的代码。@T.J.Crowder废话，谷歌欺骗了我。哈哈，MDN getelementsbyname的前两个结果是document.getelementsbyname和element.getElementsByTagName，我用相同的方法阅读它们：@Ian:Ouch，我可能会这么做：-@T.J.Crowder我不该假设T

---

我已经习惯了getElementsByTagName、querySelector、querySelectorAll、getElementsByClass和其他的方法。你认为这真的有可能吗？@MozenRath使用element.getElementsByTagNamediv，然后循环遍历它们，看看哪些具有特殊的.name属性-如果是，请将它们添加到数组中，并使用该数组。无论最终选择什么，请确保仅在element.querySelectorAll未定义时使用它。是否有关于getElementsByName被弃用的更多信息？我并不是说你错了，但这对我来说是个新闻，在几次搜索之后，我找不到更多关于它的信息。例如，没有提到弃用，并说所有主流浏览器都支持弃用。@Briguy37：他们可能是对的。我的陈述基于这样一个事实，即它存在于文件中，而不是在或中。但我可能错了，这是错误的。我不相信W3Schools告诉你的话，因为我是一个强壮的家伙。不幸的是，这段代码适用于那些认为改变是一个比特井的公司，在某些情况下确实如此，所以他们坚持使用1024x786 CRT mointors和512 MB RAM。所以他们没有IE8，IE7大约有。你认为这真的有可能吗？@MozenRath使用element.getElementsByTagNamediv，然后循环遍历它们，看看哪些具有特殊的.name属性-如果是，请将它们添加到数组中，并使用该数组。无论最终选择什么，请确保仅在element.querySelectorAll未定义时使用它。是否有关于getElementsByName被弃用的更多信息？我并不是说你错了，但这对我来说是个新闻，在几次搜索之后，我找不到更多关于它的信息。例如，没有提到弃用，并说所有主流浏览器都支持弃用。@Briguy37：他们可能是对的。我的陈述基于这样一个事实，即它存在于文件中，而不是在或中。但我可能错了，这是错误的。我不相信W3Schools告诉你的话，因为我是一个强壮的家伙。不幸的是，这段代码适用于那些认为改变是一个比特井的公司，在某些情况下确实如此，所以他们坚持使用1024x786 CRT mointors和512 MB RAM。所以他们没有IE8

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="target"></div>
  <script>
    (function() {
      // IE7 support for querySelectorAll. Supports multiple / grouped selectors and the attribute selector with a "for" attribute. http://www.codecouch.com/
      if (!document.querySelectorAll) {
        (function(d, s) {
            d=document, s=d.createStyleSheet();
            d.querySelectorAll = function(r, c, i, j, a) {
                a=d.all, c=[], r = r.replace(/\[for\b/gi, '[htmlFor').split(',');
                for (i=r.length; i--;) {
                    s.addRule(r[i], 'k:v');
                    for (j=a.length; j--;) a[j].currentStyle.k && c.push(a[j]);
                    s.removeRule(0);
                }
                return c;
            }
        })();
      }

      var qsaWorker = (function() {
          var idAllocator = 10000;

          function qsaWorkerShim(element, selector) {
              var needsID = element.id === "";
              if (needsID) {
                  ++idAllocator;
                  element.id = "__qsa" + idAllocator;
              }
              try {
                  return document.querySelectorAll("#" + element.id + " " + selector);
              }
              finally {
                  if (needsID) {
                      element.id = "";
                  }
              }
          }

          function qsaWorkerWrap(element, selector) {
              return element.querySelectorAll(selector);
          }

          // Return the one this browser wants to use
          return document.createElement('div').querySelectorAll ? qsaWorkerWrap : qsaWorkerShim;
      })();

      // Get the target
      var target = document.getElementById("target");

      // Dynamically add content
      target.innerHTML =
        '<div name="special">special 1</div>' +
        '<div name="special">special 2</div>' +
        '<div name="special">special 3</div>';

      // Get those elements
      var list = qsaWorker(target, '[name="special"]');

      // Prove we got them
      var p = document.createElement('p');
      p.innerHTML = "Found " + list.length + " 'special' elements";
      document.body.appendChild(p);
    })();
  </script>
</body>
</html>

function getElementsByAttribute(options) {
    /*if (container.querySelectorAll) {
        var selector = '';
        if (options.tagFilter) {
            selector += options.tagFilter;
        }
        selector += '[' + options.attr;
        if (options.val) {
            selector += '="' + options.val.replace(/"/g, '\\"') + '"';
        }
        selector += ']';
        return Array.prototype.slice.call(options.container.querySelectorAll(selector));
    }*/
    var elements = options.container.getElementsByTagName(options.tagFilter || "*"),
        ret = [],
        i, cur,
        matches = (function () {
            if (options.val) {
                return function (el) {
                    return el.getAttribute(options.attr) === options.val;
                };
            } else {
                return function (el) {
                    return el.hasAttribute(options.attr);
                };
            }
        })();
    for (i = 0; i < elements.length; i++) {
        cur = elements[i];
        if (matches(cur)) {
            ret.push(cur);
        }
    }
    return ret;
}

window.onload = function () {
    var contain = document.getElementById("container"),
        els = getElementsByAttribute({
            container: contain,
            attr: "name",
            val: "special",
            tagFilter: ""
        });

    console.log("els", els);
};