Javascript getElementsByClass HTML

Question

I'm having issues Looping through elements on a form using a simple 'getElementsByClass' function. I have to use this heading:

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

I also have to use IE8.

If I remove the heading, the function works fine. I realize the errant tags are not in the correct spots, but if I remove them, the function works correctly as well. There is much more to the page, but here is a stripped down version:

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

The first call to getElementsByClass() on formOne fires correctly and displays the proper values on the alert box. But on the call on formTwo, the function does not find any elements on the form.

I'm just trying to figure out why exactly this happens so I can develop a workaround.

could you use already existing getElementsByClassName() method? — karaxuna, Mar 25 '13 at 20:04
@karaxuna - not if he wants to support IE8, but probably should use it in other cases — kevmc, Mar 25 '13 at 20:10
[implement it yourself](http://stackoverflow.com/questions/7410949/javascript-document-getelementsbyclassname-compatibility-with-ie) — James, Mar 25 '13 at 20:12
I think thats because of incorrect html table usage (it works like you described in IE but in Chrome it does not work at all). If you replace table tags with div for example it works for me... — Pavle Gartner, Mar 25 '13 at 20:42

score 0 · Answer 1 · answered Mar 25 '13 at 21:39

First of all I could not manage to replicate it on IE8, it seems to be an issue with IE9.

The problem is with the HTML you provided. The IE DOM parser for some reason was getting mixed up where the end tags are, therefore an empty tag (<>) was being created. In your case the form ended up being an empty tag, resulting with following output.

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

Try it out with this markup.

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

Mainly I just closed all the tags and followed the HTML 4.01 table schema.

Javascript getElementsByClass HTML

1 Answers1