javascript - innerHTML を設定して作成された HTML 要素へのアクセス

Question

tdajax呼び出しを行い、テーブルの要素に挿入されたhtmlを返す関数があります。を使用して、 as 属性を持つの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';
        }
    }
}

score 3 · Accepted Answer

追加するテーブルセル自体が 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">れますが、検索されます。詳細については、この MSDN 記事を参照してください。さらに悪いことに、IE は一致する要素を含めますが、もちろん. はぁ<input name="special">namedividname

IE7 以前をサポートする必要がない限り (たとえば、中国向けに開発している場合を除き)、Element#querySelectorAllselectorを使用できます'[name="special"]'。そのname属性を使用する要素の要素内のみを検索します。

例:ライブコピー| ライブソース

(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 以前をサポートする必要がある場合は、この他のスタックオーバーフローの質問とそれに対する私の回答を参照してください。質問は、への追加に関するこの記事を指しており、質問に対する私の答えは、要素固有のレベルでそれをエミュレートする方法について述べています。querySelectorAlldocument

その記事のコードを、他の質問に対する私の回答と上記の例と組み合わせると、次のようになります。

ライブコピー| ライブソース

<!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で動作します。

score 1 · Accepted Answer

特定の属性 (および値) を持つ要素を取得する特定のシナリオのオプションとして、次のような関数を使用できます。

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: 一致した要素の tagName のオプションフィルター

が一致するかどうかを確認するために IE7/8 でテストしたところ、<div name="special">一致しました。他<input />のsと同様に。

セレクターを拡張して、サポート対象などのより複雑なものにしたい場合querySelectorAllは、TJCrowder のようなポリフィルを使用できます。しかし、これは仕事を成し遂げるようです。

javascript - innerHTML を設定して作成された HTML 要素へのアクセス

2 に答える 2

Related

Reference