1

我有一个函数，它进行 ajax 调用，然后返回一段插入到表td元素中的 html。使用现在我element.innerHTML=ajaxResult;想访问属性为. 所以我做了一个并期望得到4-5个元素。但我实际上没有得到。ajaxResultnamespecialdocument.getElementsByName('special')

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

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

我在 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';
        }
    }
}
4

2 回答 2

3

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

实时复制| 直播源

(function() {
  // 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 = document.getElementsByName("special");

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

当然，因为它是 的函数document，它将找到所有带有 的元素name="special"，而不仅仅是您添加到表格单元格中的元素。

name如果不允许元素具有该属性，则上述内容不适用于 IE 。例如，如果您寻找getElementsByName("special"). 它将忽略<div name="special">但 find <input name="special">，因为name它不是div元素的有效属性。此 MSDN 文章中的详细信息。更糟糕的是，IE 将包含id匹配的元素，尽管这当然与name. 叹

除非您需要支持 IE7 及更早版本（例如，除非您正在为中国开发），否则您可以使用Element#querySelectorAllselector '[name="special"]'。这将只在元素内查找使用该name属性的元素。

示例：Live Copy | 直播源

(function() {
  // 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 = target.querySelectorAll('[name="special"]');

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

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

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

实时复制| 直播源

<!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>

在 IE7 中有效。

于 2013-05-16T13:29:21.800 回答
1

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

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);
};

演示：http: //jsfiddle.net/cxq6t/1/

（根据评论，我保留了支持的原始逻辑querySelectorAll，但证明不能在具有无效属性的旧 IE 中工作）

您传递给函数的对象接受：

  • container: 包含要查看的元素
  • attr：要查找的属性
  • val：要匹配的可选值
  • tagFilter：匹配元素的标签名的可选过滤器

我在 IE7/8 中进行了测试，看看是否<div name="special">会匹配，并且确实如此。以及其他<input />s。

如果你想将选择器扩展为更复杂的东西，比如querySelectorAll支持什么，你可以使用像 TJCrowder 的 polyfill。但这似乎完成了工作。

于 2013-05-16T14:36:43.233 回答