0

単純な「getElementsByClass」関数を使用してフォーム上の要素をループする際に問題があります。この見出しを使用する必要があります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

また、IE8を使用する必要があります。

見出しを削除すると、関数は正常に動作します。誤ったタグが正しい場所にないことに気付きましたが、それらを削除すると、関数も正しく機能します。このページには他にもたくさんありますが、簡略化したバージョンを次に示します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<script type="text/javascript">
    function getElementsByClass(node,searchClass,tag) {    
        var classElements = new Array();
        var els = node.getElementsByTagName(tag); // use "*" for all elements
        var elsLen = els.length;
            alert("elsLen: " + elsLen);        
        var pattern = new RegExp("\\b"+searchClass+"\\b");
        for (i = 0, j = 0; i < elsLen; i++) {          
         if ( pattern.test(els[i].className) ) {
     classElements[j] = els[i];
     j++;
     }
    }
    alert("getElementsByClass: classElements.length: " + classElements.length);
    return classElements;
    }
</script>
</head>
<body>
<table>
  <form name="formOne"> 
      <input type="button" value="click" onclick="getElementsByClass(document.formOne,'popupElement','*');" />          
      <input type="text" class="popupElement">
   </form>        

  <form name="formTwo"> 
        <table>                
        <input type="text"  class="popupElement">
        <input type="text" class="popupElement"> 
        <input type="button" value="click2" onclick="getElementsByClass(document.formTwo,'popupElement','*');" />
  </form>

formOne での getElementsByClass() への最初の呼び出しが正しく実行され、アラート ボックスに適切な値が表示されます。しかし、formTwo の呼び出しでは、関数はフォーム上の要素を見つけません。

回避策を開発できるように、なぜこれが発生するのかを正確に理解しようとしています。

4

1 に答える 1

0

まず、IE8 で複製できませんでした。IE9 の問題のようです。

問題は、提供した HTML にあります。何らかの理由で IE DOM パーサーが終了タグの場所で混乱していたため、空のタグ (<>) が作成されていました。あなたの場合、フォームは空のタグになり、次の出力が得られました。

LOG: elsLen: 0 
LOG: getElementsByClass: classElements.length: 0

このマークアップで試してみてください。

<html>
<body>
<table>
<tbody>
    <tr>
        <td>
            <form name="formOne"> 
                <input type="button" value="click" onclick="getElementsByClass(document.formOne,'popupElement','*');" />          
                <input type="text" class="popupElement" />
            </form> 
        </td>
    </tr>
    <tr>
        <td>
            <form name="formTwo"> 
                <table>
                    <tbody>
                        <tr>
                            <td>
                                <input type="text"  class="popupElement"/>
                                <input type="text" class="popupElement"/> 
                                <input type="button" value="click2" onclick="getElementsByClass(document.formTwo,'popupElement','*');" />
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </td>
    </tr>
</tbody>
</table>
</body>
</html>

主に、すべてのタグを閉じて、HTML 4.01 テーブル スキーマに従いました。

于 2013-03-25T21:39:26.627 に答える