<html>

    <head>

      <base href="https://bugs.webkit.org/" />

    </head>

    <body><table border="1" cellspacing="0" cellpadding="8">

        <tr>

          <th>Bug ID</th>

          <td><a class="bz_bug_link 

          bz_status_NEW "

   title="NEW - JavaScript for-of on HTML Collection in Safari"

   href="https://bugs.webkit.org/show_bug.cgi?id=167091">167091</a>

          </td>

        </tr>

        <tr>

          <th>Summary</th>

          <td>JavaScript for-of on HTML Collection in Safari

          </td>

        </tr>

        <tr>

          <th>Classification</th>

          <td>Unclassified

          </td>

        </tr>

        <tr>

          <th>Product</th>

          <td>WebKit

          </td>

        </tr>

        <tr>

          <th>Version</th>

          <td>Safari 10

          </td>

        </tr>

        <tr>

          <th>Hardware</th>

          <td>Macintosh

          </td>

        </tr>

        <tr>

          <th>OS</th>

          <td>macOS 10.12

          </td>

        </tr>

        <tr>

          <th>Status</th>

          <td>NEW

          </td>

        </tr>

        <tr>

          <th>Severity</th>

          <td>Normal

          </td>

        </tr>

        <tr>

          <th>Priority</th>

          <td>P2

          </td>

        </tr>

        <tr>

          <th>Component</th>

          <td>WebKit API

          </td>

        </tr>

        <tr>

          <th>Assignee</th>

          <td>webkit-unassigned&#64;lists.webkit.org

          </td>

        </tr>

        <tr>

          <th>Reporter</th>

          <td>email.james.macdonald&#64;gmail.com

          </td>

        </tr></table>

      <p>

        <div>

        <pre>Consider the following code:

&lt;html&gt;

    &lt;head&gt;

        &lt;meta charset=&quot;utf-8&quot;&gt;

    &lt;/head&gt;

    &lt;body&gt;

        &lt;div class=&quot;cell&quot;&gt;div 1 text&lt;/div&gt;

        &lt;div class=&quot;cell&quot;&gt;div 2 text&lt;/div&gt;

        &lt;div class=&quot;cell&quot;&gt;div 3 text&lt;/div&gt;

        &lt;script type=&quot;text/javascript&quot;&gt;

            let list = document.getElementsByClassName(&quot;cell&quot;)

                for(let y of list){

                    console.log(&quot;y:&quot;, y)

                }

        &lt;/script&gt;  

    &lt;/body&gt;

&lt;/html&gt;

When run in Chrome V55.0, it produces the following console output:

y:        &lt;div class=&quot;cell&quot;&gt;div 1 text&lt;/div&gt;

y:        &lt;div class=&quot;cell&quot;&gt;div 2 text&lt;/div&gt;

y:        &lt;div class=&quot;cell&quot;&gt;div 3 text&lt;/div&gt;

Firefox V50.1 returns similar results as well.

However when run in Safari, this same file generates an error stating

TypeError: y of list is not a function. (In 'y of list', 'y of list' is &gt;undefined).

This appears to be because the value returned to the list variable is not an array, but an HTML collection as described in the following link:

<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=538558">https://bugs.chromium.org/p/chromium/issues/detail?id=538558</a></pre>

        </div>

      </p>

      <hr>

      <span>You are receiving this mail because:</span>

      <ul>

          <li>You are the assignee for the bug.</li>

      </ul>

    </body>

</html>